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 .

Cela fait un moment que je recher­che un ges­tion­naire de fon­tes, capa­bles de me don­ner quel­ques infor­ma­tions sur mes fon­tes, de les clas­ser en fonc­tion de leur famille, leur type ou encore d’autres cri­tè­res mais éga­le­ment de m’en don­ner un aperçu rapide, les unes à côté des autres (ou sous forme de liste du moins) et qui per­met de les com­pa­rer. Quel­que chose à la manière de Lino­type Fon­tEx­plo­rer X.

Aujourd’hui, j’ai enfin trouvé un logi­ciel répon­dant à ces besoins et même à plus. Il est dis­po­ni­ble en plu­sieurs lan­gues, libre, gra­tuit, et dis­po­ni­ble sur Linux, Win­dows et Mac OS X. Je suis vrai­ment enchanté par ce logi­ciel et ai donc pensé que vous aussi vous aime­riez pro­ba­ble­ment le con­naî­tre.

Je vous pré­sente donc Font­Ma­trix !

Font­Ma­trix vous per­met donc d’avoir un clas­se­ment de vos fon­tes (cli­quez sur l’image pour agran­dir) :

Dans la par­tie gau­che on peut noter com­ment Font­ma­trix classe les fon­tes et per­met une rer­cher­che et un tri plus pré­cis. À droite, un exem­ple des infos pré­sen­tées sur la fonte en ques­tion.

Mais éga­le­ment de par­cou­rir d’un coup d’œil l’ensem­ble des fon­tes et leur rendu :

Donc à gau­che l’ensem­ble des typos (selon le clas­se­ment défini dans l’onglet pré­cé­dent comme visi­ble sur le pré­cé­dent aperçu) et à droite un exem­ple de rendu (j’ai choisi un texte fran­çais mais d’autres sont dis­po­ni­bles) dans un texte à valeur séman­ti­que et non pas un faux-texte.

Et enfin, un des cri­tè­res qui limi­tait les répon­ses à ma recher­che : l’outil de com­pa­rai­son des fon­tes et des gly­phes :
J’ai appli­qué des cou­leurs moches pour qu’on puisse bien dis­tin­guer les deux gly­phes mais il est pos­si­ble de les chan­ger (ou de n’en met­tre aucune) ainsi que d’affi­cher les points des cour­bes et de con­trôle de leurs tan­gen­tes. Le rec­tan­gle bleu per­met de zoo­mer sur une par­tie des gly­phes (je ne le mon­tre pas, l’aperçu serait peu par­lant).

Voilà, je serais curieux de savoir ce que vous en pen­sez, si vous le con­nais­siez déjà ou non… Je rap­pelle le lien et le nom du logi­ciel :

TÉĿÉ­CHAR­GER FONT­MA­TRIX