Vote #72290
未完了Gravatar: one size to rule them all
0%
説明
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.
journals
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.
--------------------------------------------------------------------------------
I don't know if it's a good idea, most browsers have low-quality algorithms for resampling images (eg. nearest) right?
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
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:
!resampling.png!
Doesn't seem to be the same bicubic resampling.
--------------------------------------------------------------------------------
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]_:
!http://www.gravatar.com/avatar/8fe1970d5ccdd67ce0eef376cb3c786b?rating=PG&size=20! !{width:20px}http://www.gravatar.com/avatar/8fe1970d5ccdd67ce0eef376cb3c786b?rating=PG&size=60!
--------------------------------------------------------------------------------
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:
<pre>
<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="/>
</pre>
--------------------------------------------------------------------------------
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 ;)
--------------------------------------------------------------------------------
Plus, the original 20x20 gravatar is *1.06 KB*, the 60x60 is *3.04 KB*.
--------------------------------------------------------------------------------
FWIW, Github uses only one gravatar size (140x140).
--------------------------------------------------------------------------------
+1
If this feature is implemented, Gravatar icons on Redmine become "Retina Ready":http://blog.gravatar.com/2012/07/30/retina/.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------