Feature #11516

Gravatar: one size to rule them all

Added by Peter Leonov about 10 years ago. Updated about 8 years ago.

Status:NewStart date:
Priority:NormalDue date:
Assignee:-% Done:

0%

Category:UI
Target version:-
Resolution:

Description

It might be useful to request avatar image in one size big enough to display at the profile page. Other sizes could be produced by rescaling the big one to any size we want by just a CSS rule.

This helps reduce load to the gravatar servers, reduce total HTTP request needed to render the page, reduces reflows caused by image been getting its real size on load, and last but not least theme designers get control over the avatar size without intrusion to the server side.

resampling.png (21.1 KB) Jean-Philippe Lang, 2012-07-27 22:12

MSIE 8.png (85.8 KB) Peter Leonov, 2012-07-27 22:33

Chrome Win.png (86.6 KB) Peter Leonov, 2012-07-27 22:33

Firefox Win.png (88.6 KB) Peter Leonov, 2012-07-27 22:33

Firefox Mac.png (84.4 KB) Peter Leonov, 2012-07-27 22:33

Opera Mac.png (88.3 KB) Peter Leonov, 2012-07-27 22:33

Safari Mac.png (84.1 KB) Peter Leonov, 2012-07-27 22:33

History

#1 Updated by Peter Leonov about 10 years ago

An addition. We could select the most popular avatar size by default to hit a browser cache if the browser has already met this avatar on the other site.

#2 Updated by Jean-Philippe Lang about 10 years ago

I don't know if it's a good idea, most browsers have low-quality algorithms for resampling images (eg. nearest) right?

#3 Updated by Peter Leonov about 10 years ago

AFAIK, the only browser which ever used nearest-neighbor algorithm is MSIE. And MSIE versions 7.0 and 8.0 have a simple CSS tweak to switch to an eye candy bicubic interpolation. As far as MSIE 9.0 uses hardware acceleration by default it just can't scale otherwise than using a bicubic scaling.

In my experience, other browsers support smooth rescaling for years.

WebKit-based browsers may use nearest on images with heavy animated size. For static images it uses bicubic as expected.

#4 Updated by Jean-Philippe Lang about 10 years ago

Just made a quick test with Firefox 14.

On the left, a bicubic resample of a screenshot. On the right, the same screenshot resampled by FF:

Doesn't seem to be the same bicubic resampling.

#5 Updated by Jean-Philippe Lang about 10 years ago

On small images, the difference is not so obvious (but still visible with my FF).

An original 20x20 gravatar on the left, a 60x60 gravatar resampled at 20x20 by [your browser]:

#6 Updated by Peter Leonov about 10 years ago

Yeap, you'r right for Firefox (Win) and Opera (Win and Mac) with large images. But for sane avatar sizes all go bicubic way.

Here is a set of screenshots of my gravatar scaled from 300px on the left, and 1300px on the right for different browsers on Mac and Win.

Use this code:

<style>
.ava { width: 150px; }
</style>

<img class="ava" src="http://www.gravatar.com/avatar/3ba04ac580b453fa6cc4457500d032c6?rating=PG&size=300&default="/>
<img class="ava" src="http://www.gravatar.com/avatar/3ba04ac580b453fa6cc4457500d032c6?rating=PG&size=1300&default="/>

#7 Updated by Peter Leonov about 10 years ago

Jean-Philippe Lang wrote:

On small images, the difference is not so obvious (but still visible with my FF).

Yes, indeed! Glad to see you investigating client side quirks ;)

#8 Updated by Jean-Philippe Lang about 10 years ago

Plus, the original 20x20 gravatar is 1.06 KB, the 60x60 is 3.04 KB.

#9 Updated by Jean-Philippe Lang about 10 years ago

FWIW, Github uses only one gravatar size (140x140).

#10 Updated by Go MAEDA about 8 years ago

+1
If this feature is implemented, Gravatar icons on Redmine become Retina Ready.

#11 Updated by Toshi MARUYAMA about 8 years ago

  • Category set to UI

Also available in: Atom PDF