Provide higher-resolution alternative project and user avatar images

Proposal

Currently users are able to upload high-resolution project and user avatars, but they get scaled down to 48px or 64px when being displayed. Avatar images are served with markup

<img class="avatar project-avatar..."
src="/uploads/filename.png?width=48"
width="48" height="48">

Modern browsers support providing alternative image resolutions for users of high-dpi (retina) screens. One of the ways to do it is with srcset attribute. Browsers on low-dpi devices will simply ignore the attribute, while retina users will get sharper icons.

<img ...
srcset="/uploads/filename.png?width=96 2x"
...
>

Zoomed in screenshot after adding such srcsets to project avatars:

Implementation guide

1. Add srcset attribute with an URL for twice the width

Only certain width attributes are honored, see ALLOWED_IMAGE_SCALER_WIDTHS in app/models/concerns/avatarable.rb.

Links

• https://docs.gitlab.com/ee/development/image_scaling.html
• https://docs.gitlab.com/ee/architecture/blueprints/image_resizing/