U4-6967 - Retina image of avatar

Created by Bjarne Fyrstenborg 15 Aug 2015, 18:18:57 Updated by Shannon Deminick 22 Oct 2015, 16:03:16

Could we add srcset attribute to the avatar to make it more sharp on retina screens?

This is the source for the avatar:

The natural size is 64x64px but the css scale it to 30x30px .. so on desktop it should just request a 30x30px image.

furthermore the rounded avatar is handled fixed fixed border-radius. It would be better just to use border-radius: 50% ul.sections li.avatar a img { width: 30px; border-radius: 16px; /* change to 50% */ }

so the html and css should be something like this:


ul.sections li.avatar a img { width: 30px; border-radius: 50%; }

note that Angular has a ngSrcset directive: https://docs.angularjs.org/api/ng/directive/ngSrcset

1 Attachments


Bjarne Fyrstenborg 18 Aug 2015, 19:55:01

PR: https://github.com/umbraco/Umbraco-CMS/pull/765

Shannon Deminick 19 Aug 2015, 08:38:15

We'll try to get this in for 7.3 if we get time, otherwise will be 7.3+

esunxray 30 Sep 2015, 07:22:32

Please take a look at this issue: http://issues.umbraco.org/issue/U4-5963

All China users can't download avatar just like that Google Fonts cannot be downloaded in China.

Priority: Up for grabs

Type: Bug

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.3.0

Due in version: 7.3.1


Story Points: