Breizhogeek, le blog qu'il sent bon la bretagne

Aller au contenu | Aller au menu | Aller à la recherche

Catégories

Tag - accessibilité

Fil des billets - Fil des commentaires

lundi 29 mars 2010

Images pour le web: compression et utilisation

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 :
homer_non_optimisehomer__optimise

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).

Pro­grammeRésul­tatWin­dowsLinux/UnixInter­face gra­phi­que
PngOp­ti­mi­zer8.12KioOUINONOUI
Png­Crush8.2KioOUIOUINON
PngOUT11.6KioOUIOUIpour win­dows uni­que­ment + payant
Advan­ce­COMP (AdvPng)8.1KioOUIOUI (à com­pi­ler)NON


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 :
Sprite CSS 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 ;) .

Notes

[1] Pour ceux que ça inté­resse, plus d’infor­ma­tions sont dis­po­ni­bles ici (en anglais) : http://optipng.sour­ce­forge.net/png­tech/optipng.html

mardi 30 décembre 2008

Feed2img 0.2

Voilà donc une correction du plugin, dans sa version 0.2 .

lundi 15 décembre 2008

Plugin OpenID v2.0.2

EDIT : une nou­velle ver­sion est dis­po­ni­ble ici : http://blog.breiz­ho­geek.com/post/Plu­gin-Ope­nID-v2.0.3

Voici une mise à jour du plu­gin cor­ri­geant un man­que plu­tôt génant : si le compte Ope­nID était mal con­fi­guré et ne ren­voyait pas d’adresse e-mail, le com­men­taire était blo­qué. Un champ e-mail appa­rait désor­mais si aucune adresse e-mail n’est ren­voyée.

PS: merci à Julien Laver­gne pour son rap­port de bug d’ailleurs ;) .

mercredi 22 octobre 2008

Sortie finale du plugin OpenID pour Dotclear 2 !

EDIT: Désolé, le lien était mal passé !

Voilà enfin le plu­gin : PLU­GIN dans sa ver­sion 2.0 . J’ai en effet décidé de repar­tir non pas à 0 mais à 2, en réfé­rence à la ver­sion 2 de Dot­clear ! La pro­chaine ver­sion sera ainsi la ver­sion 2.0.1 . Je ne sais pas encore ce qu’elle com­por­tera, pro­ba­ble­ment d’autres tra­duc­tions… Si jamais vous sou­hai­tez d’ailleurs par­ti­ci­per au plu­gin, vous pou­vez m’envoyer un fichier po de la lan­gue tra­duite, je la met­trai dans le package !

Ce plu­gin annonce par la même occa­sion la fin de la série 1.x du plu­gin, qui était pour Dot­clear 1 !

Voilà, enjoy !

samedi 4 octobre 2008

3 façons de rendre la navigation plus aisée

Voir le web de façon moins linéaire

Le web est actuel­le­ment repré­senté de façon très linéaire par les navi­ga­teurs: en effet l’his­to­ri­que et la vue d’ensem­ble des visi­tes sont assez incom­plets et rigi­des. Je m’expli­que; la vue d’ensem­ble de nos der­niè­res visi­tes est par­fois repré­sen­tée sous la forme d’un tableau, c’est le cas pour IE ainsi que Goo­gle Chrome comme le mon­tre cette cap­ture d’écran :

screenshot de google chrome

Alors que de façon logi­que, elle devrait être repré­sen­tée de cette façon, tel un “brow­ser map­ping” :

browser_mapping.png

Un réel his­to­ri­que ou un his­to­ri­que avancé

De la même façon, si je me trouve sur un site A, notre navi­ga­tion est deve­nue par habi­tude une explo­ra­tion désyn­chro­ni­sée : afin de con­ti­nuer notre lec­ture du site A, nous ouvrons les liens qui nous sem­blent inté­res­sants dans de nou­veaux onglets (que le clic-molette a rendu plus que pra­ti­que). Or, une fois que nous allons sur ce nou­vel onglet, aucun his­to­ri­que n’est alors dis­po­ni­ble. Des sug­ges­tions de retour devraient au moins être pro­po­sées, quite à les dif­fé­ren­cier des réels pages pré­cé­den­tes, et encore. Là encore inter­vient le pro­blème de vision­ne­ment de l’his­to­ri­que: repré­senté comme il l’est actuel­le­ment, sa com­plexité se ren­for­ce­rait, du fait qu’il soit (plus) com­plet.

Pro­po­ser une réelle recher­che avan­cée.

Mozilla a été plu­tôt fier de mon­trer leur implé­men­ta­tion de l’awe­some bar dans Fire­fox 3, fonc­tion­na­lité déjà pré­sente dans des navi­ga­teurs comme Opera. Cette recher­che se fait de façon dyna­mi­que: à cha­que chan­ge­ment au niveau de la sai­sie, les résul­tats évo­luent et se basent sur l’his­to­ri­que. Sur Goo­gle Chrome, ou encore dans la barre de recher­che de Fire­fox, cha­que résul­tat est la résul­tante d’une requète envoyée à goo­gle.fr (par défaut) et est donc de l’ordre d’une véri­ta­ble recher­che web, et non lié à l’his­to­ri­que. Cepen­dant, les deux options sont inté­res­san­tes, la ques­tion devient donc : com­ment pro­fi­ter de ces der­niè­res, en même temps. La solu­tion est plu­tôt sim­ple: c’est tout sim­ple­ment un point incom­plet de cer­tains navi­ga­teurs. On dis­pose en effet d’une barre d’adresse, où l’on y sai­sit l’URL ou encore quel­ques expres­sions com­po­sant la recher­che; ainsi que d’une barre de recher­che. Dès alors, pour­quoi ne pas effec­tuer une recher­che glo­bale en effec­tuant une requète vers le moteur de recher­che sélec­tionné dans la barre de recher­che; et une recher­che plu­tôt locale, au niveau de l’his­to­ri­que, dans la barre d’adresse ? C’est le cas pour Mozilla Fire­fox, mais rare­ment pour les autres…

Ces deux points sont selon moi des idées à appro­fon­dir pour obte­nir un navi­ga­teur plus intui­tif, plus pra­ti­que. Mais la ten­dance sem­ble être plus ten­due vers la fiè­reté de mon­trer les quel­ques nou­veau­tés résol­vant les divers bugs ou man­ques siè­geant depuis trop long­temps dans les navi­ga­teurs. Après tout, Goo­gle Chrome sem­ble le seul navi­ga­teur qui a repensé une totale façon de con­ce­voir un navi­ga­teur (le pro­ces­sus par page en est l’exem­ple); mais même celui-ci n’a appa­ra­ment pas été aussi loin dans la R&D qu’il le fau­drait…

- page 1 de 3