Breizhogeek, le blog qu'il sent bon la bretagne

Si pour l’impres­sion le poids des fichiers n’est pas impor­tant, pour le web c’est une des con­di­tions d’acces­si­bi­lité d’une page. Donc si on peut gra­piller quel­ques octets (ou plu­tôt Kilo octets) sur une image voire un lot d’ima­ges, autant le faire. Il y a alors 3 points inté­res­sants à étu­dier:

• l’opti­mi­sa­tion des ima­ges elle-mêmes
• l’uti­li­sa­tion de spri­tes CSS
• l’inté­gra­tion des ima­ges direc­te­ment dans le CSS
  
  

Opti­mi­sa­tion des ima­ges Gif et PNG

Il est en effet pos­si­ble pour la plu­part des ima­ges de type PNG ou même GIF d’opti­mi­ser leur poids : ces ima­ges, même expor­tées depuis Pho­to­shop ou Illus­tra­tor/Inks­cape, com­por­tent des don­nées qui ne sont pas for­cé­ment néces­sai­res pour une uti­li­sa­tion web, nous allons donc les sup­pri­mer^[1]. Pour cela, il existe plu­sieurs logi­ciels, dont je me pro­pose de faire la com­pa­rai­son dans cet arti­cle. Tout d’abord, pour que vous com­pre­niez bien que cette opti­mi­sa­tion se fait sans perte de qua­lité, un petit aperçu :

L’image de gau­che n’est pas opti­mi­sée : elle pèse 12,9Ko. Celle de droite est opti­mi­sée : elle pèse 8,12Ko.

La ques­tion est main­te­nant de savoir quel logi­ciel choi­sir. J’ai choisi d’opter pour une com­pa­rai­son entre 4 logi­ciels, qu’ils exis­tent pour Win­dows, Linux ou les 2).

J’ai éga­le­ment testé OptiPNG, puis­sant, mais qui modi­fiait l’image et son cal­que alpha (sous IE6 la trans­pa­rence est donc OK mais la cou­che était mal adap­tée), même en com­pres­sion mini­mum, je n’en parle donc pas ici.

Opti­mi­sa­tion des requê­tes et du poids des ima­ges

Nous allons dans un pre­mier temps voir com­ment inté­grer direc­te­ment nos ima­ges dans un fichier CSS pour éco­no­mi­ser quel­ques octets sur les requê­tes HTTP puis com­ment réduire encore le poids et le nom­bre de requê­tes.

L’attri­but INLINE de la pro­priété back­ground en CSS

Il existe en effet une pro­priété CSS per­met­tant d’inté­grer une image direc­te­ment dans le CSS, sous sa forme en base64. Ex:

back­ground: url(data:image/png;base64,<la_string_en_base_64>) ;

Exem­ple (pour ceux qui ont un navi­ga­teur récent vous devriez voir une her­mine orange comme dans le menu à droite de ce blog):

Vous pou­vez notam­ment tes­ter ceci rapi­de­ment en obte­nant la base 64 de votre fichier depuis : Base64 - deco­der/enco­der.

Il vous fau­dra donc un navi­ga­teur récent, notam­ment la ver­sion 8 de IE pour les mal­heu­reux uti­li­sa­teurs de ce der­nier.

L’uti­li­sa­tion des spri­tes

Un sprite con­si­tue en fait à réu­nir plu­sieurs ima­ges en une seule et à accé­der à la par­tie que l’on sou­haite en en défi­nis­sant les coor­don­nées. Cela per­met de gagner quel­ques octets: dans cha­que image, cer­tains infor­ma­tions sont répé­tées comme par exem­ple les tables de cou­leur. En créant une seule image, il n’y a plus qu’une table de cou­leur. Il s’agit en fait ici d’avoir une seule image com­po­sée de plu­sieurs autres auquel­les nous accè­de­rons via leurs coor­don­nées grâce à CSS. Pour ceux qui sou­hai­tent en savoir plus, Pom­page.net vous con­ten­tera sûre­ment : http://www.pom­page.net/pompe/spri­tes/.

Pour effec­tuer ces spri­tes aisé­ment, cer­tains sites vous pro­po­sent leurs ser­vi­ces, tel CSS-Sprit qui via Js vous déli­vrera le code CSS et l’image com­po­sée ! Je m’en suis d’ailleurs servi pour vous mon­trer com­ment l’accès à cha­que par­tie de l’image se fait à tra­vers la pro­priété back­ground-posi­tion :
Bien sûr encore une fois ça se limite aux navi­ga­teurs sachant inter­pré­ter la dite pro­priété CSS, le pro­blème est et sera tou­jours le même .

Ce billet est une tra­duc­tion très libre (aussi bien au niveau de la syn­taxe que du con­tenu : j’ignore des points qui me sem­blaient moins per­ti­nents) de 11 Ways to Ruin a Great Design sur le blog de PiDe­sign.

(Merci à fukung.net pour l’image)

1. Créer un pro­jet via un logi­ciel dont le nom com­porte “Micro­soft”. Vous feriez mieux de pein­dre avec vos doigts à la boue sur une vieille boîte de pizza, l’arro­ser d’essence et le jeter direc­te­ment dans un por­tail vers l’enfer.
2. Est-ce que j’ai men­tionné le fait qu’uti­li­ser COMIC SANS vous dis­cré­di­tera immé­dia­te­ment en tant que gra­phiste ?
3. Oublier de lan­cer une cor­rec­tion ortho­gra­phi­que. C’est la meilleure façon de mon­trer com­bien vous n’êtes pas inté­ressé par le sujet. Les fau­tes mon­trent éga­le­ment que vous êtes trop fai­néants pour finir cor­rec­te­ment le tra­vail et dis­cré­di­tera injus­te­ment vos col­lè­gues. Com­ment pour­rions-nous être pares­seux avec tou­tes ces dead­li­nes dure­ment ser­rées sur les­quel­les nous avons tant pro­cras­tiné ?
4. Ajou­ter une étoile rouge étin­ce­lante avec le mot “NEW !” dans une fonte hideuse ne donne pas réel­le­ment envie aux gens d’ache­ter votre pro­duit. En fait, ça leur donne plu­tôt envie de la vapo­ri­ser de pro­duit anti-insec­tes et de l’écra­ser avec leur chaus­sure. Deux fois.
5. Ajou­ter un con­tour et des effets à la jolie typo­gra­phie cur­sive que vous avez choi­sie et regar­der dis­pa­raî­tre la lisi­bi­lité.
6. Uti­li­ser des ima­ges de très basse qua­lité volées sur le site de quelqu’un d’autre. D’ailleurs, ce serait une bonne idée de se deman­der si deve­nir l’amant d’un détenu après avoir enfreint un copy­right vaut vrai­ment le coup pour votre design. Si vous allez en pri­son, il serait cool d’avoir au moins un beau pros­pec­tus qui vous per­met­tra de gagner un peu d’argent pour payer votre avo­cat…
7. Détou­rer vos pho­tos avec l’outil “Baguette Magi­que”. L’icône de cet outil devrait être rem­pla­cée par une béquille brillante. N’uti­li­sez pas cet outil, pré­fé­rez gar­der ce temps pour appren­dre com­ment uti­li­ser les mas­ques de fusion.
8. Rem­plir à tout prix l’espace vide en le bour­rant autant que pos­si­ble de copies d’image et détruire ainsi tout focus pos­si­ble sur le mes­sage. C’est une des voies les plus faci­les de trou­bler le public et d’éli­mi­ner toute chance de gagner de nou­veaux clients.
9. Éti­rer et rétré­cir vos pho­to­gra­phies – sans tenir compte des pro­por­tions ori­gi­na­les – pour qu’elles s’ajus­tent par­fai­te­ment au petit espace qu’il vous reste après avoir rem­pli le docu­ment à l’étape pré­cé­dente. Pas de pani­que, per­sonne ne s’en ren­dra compte.