Should use smaller version of user icons in main view

[wlach]

On the front page, we currently get github and gravatar images using their native sizes, which are rather large (80x80 in the case of gravatar, up to 500x500 in the case of github)

We get the URL here:

iodide/server/views.py

Line 21 in b45ecdc

notebooks = (

(the part of the query where we fetch the avatar URL is owner__avatar)

And render it in react here:

iodide/src/server/components/user-name.jsx

Line 24 in b45ecdc

const Avatar = ({ src }) => <img src={src} alt={src} />;

This results in a large amount of unnecessary bandwidth being used and the pages loading more slowly.

For gravatar, we should be able to add s=30 to the URL to get them at the right size: https://en.gravatar.com/site/implement/images/

Github seems to support the same, e.g. https://avatars3.githubusercontent.com/u/20569?v=4&s=30

To do this properly, I'd recommend a small helper function on the client that takes a URL and adds either a ?s=30 or a &s=30 to it. I'm a bit torn on whether to do this on the client or server side, but am leaning towards doing it on the client. @robhudson @rafrombrc this would be another good bug to tackle.

[teonbrooks]

@wlach what about adding it to the url in the middleware here? is there a disadvantage adding to the server side?

[wlach]

@wlach what about adding it to the url in the middleware here? is there a disadvantage adding to the server side?

I would lean against adding it to that piece of middleware, as some API endpoints might wind up using whatever is calculated there -- and whatever uses that may not always want 30x30 dimensions.

In general I think it's best to keep all the UI decisions in src/ (i.e. the js/css code we compile with webpack). This makes it easier for someone to know where a change should be made in cases like this -- obviously every rule has exceptions, the recent favicon work you did would be an example.