Améliorer le rendu d’un GIF redimensionné

Je viens de tomber sur “Blowing up pixel art on the Web“, mettant en avant des propriétés CSS3 permettant d’améliorer (corriger ?) le rendu des images indexées (GIF et PNG 8bits).

En référence du blogpost initial, une icône de Goomba 🙂 (3x le même GIF)


GIF 8bits 48×48

GIF 8bits 48×48 zoom 2x

GIF 8bits 48×48 zoom 2x avec le fix

Le responsive et ses gabarits fluide nous forçant à passer les images en 100% de large, ce petit trick tombe a pic ! Vu comme ça, c’est vrai que ça a l’air magique, mais la vraie question avec une amélioration de ce genre, c’est le coût en performance. Sur un ordinateur fixe avec son quad-core 3Ghz, sa grosse carte graphique et son alimentation de 600W errait bien s’en sortir, mais sur mobile, cela pourrait être très notable. On sait que iOS n’est pas très copain avec les GIF animés par ex…

Pour ce faire, plutôt qu’une simple balle rouge qui rebondit, prenons ce GIF à l’animation fluide et rapide, dans une page avec et sans ce “quick fix”.

sans fixavec fix
(n’hésitez pas à me donner votre ressenti sur votre téléphone / tablette)

– iOS7 sur un iPhone4, aucun ralentissement notable. Pas non plus iPad iOS8.

– Android 4.1 sur Galaxy Tab 10.1, aucun ralentissement. Supporté par Chrome, Firefox, Opera et même le navigateur Android. Dolphin et Opera Mini ne le gère pas mais l’image s’affiche.

– WindowsPhone 8.1 sur Lumia 920, aucun ralentissement.

– Blackberry 10 sur Q10, aucun ralentissement.

So far so good ! Zéro ralentissement, et même IE8 sur Windows XP répond présent \o/

Oui, mais…

Reste celui qu’on oublie trop souvent, le mal aimé, que l’on refile depuis toujours au stagiaire en gloussant de rire … oui, l’email.

Ordinateurs

Apple Mail ok
Thunderbird OSX ok
Opera Mail OSX pas ok
WinXP Outlook Express ok
WinXP Outlook 2003 ok
WinXP Thunderbird ok
Win7 Opera Mail pas ok
Win7 Outlook 2010 pas ok
Win7 WindowsLiveMail ok
Win7 Lotus Notes 8.5 ok (non lissé dans tt les cas)
Win8 Mail ok
Win10 Beta Mail pas ok (non animé – Word)

Webmails

Gmail pas ok
Yahoo pas ok
Orange Pro ok
SFR ok
Free Zimbra ok
RoundCube ok
LaPoste ok

Mobiles & tablettes

iOS Mail ok
iOS appli Gmail pas ok
iOS appli SFR ok
iOS webmail LaPoste ok
iOS webmail Outlook ok
   
Android Mail pas ok
Android appli GMail pas ok
Android appli Inbox pas ok
Android appli Yahoo pas ok
Android appli Outlook pas ok
Android appli Orange pas ok
   
WindowsPhone 8.1 ok
   
Blackberry 10 pas ok

Carnage…

Comments are closed.