Sprites

Je l’avoue, bien que connaissant la technique, je n’y trouvais jusqu’alors pas une grande utilité (outre pour les changements d’états au survol).

Maintenant qu’il est question de performances, la réponse est toute autre et j’utilise bien plus souvent cette astuce. C’est un peu contraignant de produire des images démesurément grandes et de tout bien caler, mais on s’en sort quand même sans trop de heurts.

Je tâche toutefois de bien espacer mes sprites, pour permettre un agrandissement du texte dans le navigateur sans effet de bord sur l’affichage.

Clipping

De la même manière que je le fais maintenant pour mes images décoratives, je m’interrogeais sur la pertinence d’avoir une multitude d’images appelées dans le HTML. Pourquoi ne pas réduire de la même manière le nombre de requêtes ?

Je passe en revue plusieures solutions.

Techniques de masquages par CSS

<div style="width:100px;height:50px;backgroud-image:url(texte.png);">
    <span class="masquer">Texte</span>
</div>

Il s’agit là d’une technique plutôt connue mais qui pose je crois, pas mal de problèmes d’accessibilité. On s’empêche tout simplement d’utiliser des images de contenu et on ruse par CSS pour garantir un affichage conforme à grand coup d’images de fond.

Bref, on détourne le problème et on s’en crée des nouveaux… pas convaincu.

Images map

<img src="menu.png" alt="Menu" title="" width="150" height="50" usemap="#menu" />
<map id="menu" name="menu">
    <area alt="Lien 1" href="#lien_1" coords="0, 0, 75, 50" shape="rect"/>
    <area alt="Lien 2" href="#lien_2" coords="75, 0, 150, 50" shape="rect"/>
</map>

C’est déjà plus accessible. Mais on perd par contre toute information sémantique autour de nos liens et c’est un peu casse-pied à mettre en place. Pourquoi pas dans certaines occasions (typiquement une carte géographique).

Clipping

Je me souviens alors d’un vieil article de Laurent Denis sur le clipping et après avoir farfouillé un peu, on obtient quelque chose qui tient à peu prêt la route.

• Un exemple de menu en image réalisé avec cette technique de clipping.

Qu’en pensez-vous ? Ça vaut le coup de se donner du mal comme ça pour les performances ?

Les inconvénients que j’y vois au premier abord sont :

• le poids ajouté au fichier CSS (augmenté encore un peu plus pour notre ami IE) ;
• la complexité relative de la technique ;
• et surtout l’affichage un peu étrange de la page CSS désactivées et images activées.

Les avantages :

• le nombre de requêtes HTTP réduit ;
• l’accessibilité ;
• la sémantique du code ;
• et la possibilité de faire un changement d’image au survol sans ajout de JS.

Armé de l’extension YSlow, j’essaye de mettre en place une configuration la plus performante possible.

Bonne nouvelle

Certaines des recommandations sont évidentes et du coup il est rassurant de voir qu’on suit déjà ses principes :

• externaliser les fichiers CSS et JS ;
• éviter les redirections ;
• ne pas dupliquer les scripts ;
• réduire la taille de l’arbre HTML ;
• utiliser le moins possible d’iframes ;
• éviter les pages 404 ;
• préférer <link> à @import ;
• optimisez au mieux les images et
• ne pas les redimensionner côté client.

Les premières étapes

Beaucoup de règles se comprennent aisément, et il suffit d’adapter son code pour s’y conformer.

Je me suis ainsi retrouvé à :

• déplacer mes appels JS en bas de page ;
• utiliser bien plus souvent la technique des sprites CSS ;
• concaténer mes fichiers CSS et mes fichiers JS ;
• limiter au maximum l’utilisation des filtres ;
• minimiser la taille des mes fichiers CSS et JS ;
• faire attention à mes appels au DOM et
• réduire la taille de mes favicons.

La suite

Arrive maintenant les points qui me semblent plus obscurs (que je découvre à peine). À savoir :

• gérer le cache au mieux ;
• compresser les fichiers ;
• configurer les ETags ;
• vider le buffer ;
• etc.

Et pour les professionnels de l’optimisation et de l’hébergement

Reste ensuite quelques points plus spécifiques qui, de mon avis, sont réservés aux professionnels ou tout du moins, bien peu évidents à mettre en place :

• l’utilisation d’un CDN ou encore
• la répartition des contenus sur plusieurs domaines.

Mes interrogations du moment

Elles sont multiples.

J’aimerais comprendre pourquoi malgré mes efforts certains de mes contenus ne sont pas Gzippés, comprendre un peu mieux les principes de ETags, fouiller un peu du côté de cette fonction flush(), automatiser les compressions et les concaténations, etc.

Et justement sur ce dernier point, j’expérimente en ce moment deux techniques. Celle de Niels Leenheer pour concaténer les fichiers et celle de Douglas Crockford pour minimiser le code JS.

Avez-vous des conseils à me donner sur ces sujets ? Est-ce des domaines que vous découvrez également ?

Soit, mais quelles sont les bonnes pratiques ? Est-ce vraiment pertinent ?

J’ai en tête plusieurs possibilités :

<ul title="Fruits">
    <li><a href="#lien_vers_pommes">Pommes</a></li>
    <li><a href="#lien_vers_oranges">Oranges</a></li>
    <li><a href="#lien_vers_bananes">Bananes</a></li>
</ul>

ou :

<hx class="cacher">Fruits</hx>
<ul>
    <li><a href="#lien_vers_pommes">Pommes</a></li>
    <li><a href="#lien_vers_oranges">Oranges</a></li>
    <li><a href="#lien_vers_bananes">Bananes</a></li>
</ul>

ou encore :

<dl>
    <dt class="cacher">Fruits</dt>
    <dd><a href="#lien_vers_pommes">Pommes</a></dd>
    <dd><a href="#lien_vers_oranges">Oranges</a></dd>
    <dd><a href="#lien_vers_bananes">Bananes</a></dd>
</dt>

La dernière solution semble attrayante… mais elle éliminerait de nos pages toute liste non-ordonnée. Et ça ne convient pas non plus pour des listes ordonnées.

Quelqu’un a t-il déjà fait des essais sur tout ça, des conseils à donner ? Est-ce que ces techniques sont vraiment utiles ?

D’un côté, on pourrait par exemple penser que ces éléments appartiennent au système d’exploitation. Et que par exemple, un ascenseur, un champ texte, un bouton radio… doivent changer d’apparence en fonction de l’OS.

C’est le choix qui est fait actuellement par nos navigateurs.

De l’autre, à l’inverse, on peut très bien imaginer que ces éléments appartiennent au site/à l’interface visitée. On pourrait alors envisager de passer différents paramètres (via CSS) pour changer la taille, les couleurs, la forme, etc.

C’est ce qui tend à se faire de plus en plus pour l’avenir, avec quelques possibilités actuellement sur les navigateurs modernes, mais encore trop de limitations. On voit d’ailleurs fleurir un nombre incroyable de scripts et d’astuces en tout genre, afin de palier au plus vite ces limites.

ou

<img src="image.png" alt="&hellip;" title="" />

• séparation du contenu de la présentation ;
• souplesse pour les éventuelles modifications ;
• légerté du code ;
• rendu au chargement mieux maitrisé.

Autant d’arguments à prendre en compte pour faire votre choix. Personnellement j’ai opté pour la solution une… mais je ne demande qu’à changer d’avis !

Imbrications des conteneurs

<div class="encadre_arrondi_haut">
    <div class="encadre_arrondi_bas">
        <p>Du contenu.</p>
    </div>
</div>

C’est de loin la méthode que je préfère, car, selon moi, elle ne perturbe pas le sens sémantique de la structure. Elle ne permet pas de traiter tout les cas de figures par contre (notamment quand il s’agit de jouer avec la transparence).

Ajouts d’éléments vides

<div>
    <span class="encadre_arrondi_haut"></span>
    <span class="encadre_arrondi_bas"></span>
    <p>Du contenu.</p>
</div>

C’est pratique et parfois plus souple, ça valide au niveau W3C… mais pas avec l’extension HTML Validator que j’aime beaucoup. C’est tout bête mais ça m’ennuie !

Ajouts d’éléments avec un contenu “neutre”

<div>
    <span class="encadre_arrondi_haut"><br /></span>
    <span class="encadre_arrondi_bas"><br /></span>
    <p>Du contenu.</p>
</div>

ou encore :

<div>
    <span class="encadre_arrondi_haut">&nbsp;</span>
    <span class="encadre_arrondi_bas">&nbsp;</span>
    <p>Du contenu.</p>
</div>

Je ne pense pas que les retours chariots ni les espaces insécables soient pris en compte par les lecteurs d’écrans… toutefois, les éléments sont détournées de leur usage et je ne suis pas plus convaincu.

Des avis sur ce sujet, ô combien passionnant ?!

Vous écrivez vos balises auto-fermantes comme cela :

<br />

Ou comme cela :

<br/>

Et surtout, pourquoi ?

J’avoue utiliser la première solution sans aucune justification qui tienne la route pour autant. Je serais curieux d’en apprendre plus.

Le format JPG

Il s’agit d’un format de compression puissant et particulièrement adapté aux photos et aux dégradés de couleurs.

Il est possible lors de l’optimisation de jouer sur :

• le taux de compression (plus le taux est élevé plus l’image sera “abîmée”) ;
• le niveau de flou (une image légèrement floue fera apparaître moins de défauts à la compression) ;
• les passes (à savoir un affichage qui sera rendu de manière progressif le temps du chargement de l’image).

Le format GIF

Ce format est principalement utilisé pour créer des images animées, mais il est possible toutefois de l’utiliser avec des images fixes car l’optimisation des images en est parfois meilleur qu’avec le format JPG. Notamment avec des images très “géométriques”, petites ou dont la palette de couleurs est limitée.

Il est possible lors de l’optimisation de jouer sur :

• le nombre de couleurs dans la palette (jusqu’à 256) ;
• et les différents paramètres qui permettront justement de réduire ce nombre de couleurs.

Le format GIF accepte la transparence binaire (totalement transparent ou pas).

Le format PNG

C’est avant tout de ce format que je voulais parler car c’est sans doute le moins connus de tous. En effet, il est mal intégré aux logiciels de production habituels et également disponible en plusieurs format, ce qui ne facilite pas son utilisation.

PNG 8

On parle là d’une optimisation en 8 bits des images. On travaille donc comme en GIF sur une palette de 256 couleurs à la quelle on ajouter la transparence binaire là encore. Le taux de compression étant dans la plupart des cas meilleur qu’en GIF, si votre image n’est pas animée, je préconise de choisir ce format.

Il est possible lors de l’optimisation de jouer sur :

• le nombre de couleurs dans la palette (jusqu’à 256) ;
• et les différents paramètres qui permettront justement de réduire ce nombre de couleurs.

PNG 24

Ce format diffère du précédent par la prise en charge de la transparence sur plusieurs niveaux. On pourra alors dire que telle couleur est rouge et transparente à 25%. Par ailleurs la palette n’est plus limitée à 256 couleurs puisqu’elle est codée maintenant sur 24 bits.

Il est possible lors de l’optimisation de jouer sur :

• les passes (à savoir un affichage qui sera rendu de manière progressif le temps du chargement de l’image).

La seule restriction à ce format est qu’il n’est pas prit en charge par le navigateur Internet Explorer dans ses versions inférieures à 7. Il faut alors user de techniques particulières pour que cela marcher et ce n’est pas toujours évident.

Enregistrement des fichiers PNG

Que ce soit en PNG 8 ou en PNG 24, je vous conseille fortement de compresser vos fichiers avec un petit utilitaire : PngOptimizer. Non seulement il compresse au mieux vos fichiers mais il corrige également des erreurs couleurs faites par la plupart des logiciels (dont Photoshop).

C’est un logiciel qui ne fonctionne que sous Windows, et je n’y ai pas trouvé d’alternative sérieuse sur Mac ou Linux. Les commentaires sont là pour ça.

En résumé

• Pour une image animée, utilisez le format GIF.
• Pour une image riche en couleurs et détaillée (une photographie), utilisez le format JPG.
• Pour une petite image faible en couleurs, qui nécessite une transparence binaire ou très “géométrique”, utilisez le format PNG 8 (en veillant à compresser correctement).
• Pour une image qui nécessite une transparence sur plusieurs niveaux, utilisez le format PNG 24 (en veillant à compresser correctement et en utilisant les techniques appropriées pour Internet Explorer).

J’ai ainsi découvert que cet éditeur ajoutais systématiquement une déclaration d’encodage sur les fichiers CSS.

@charset "utf-8";

J’y vois directement un intérêt quand il s’agit de commenter son code ou de générer du contenu via les pseudos éléments after ou before.

Mais cet intérêt n’est limité qu’a cela ? C’est très restreint comme champ d’utilisation non ? Et par ailleurs, cela pose-t’il pas des problèmes particuliers sur un navigateur précis ?

Je serais curieux d’en savoir plus donc.

Notez que :

• on associera si besoin dans notre feuille de style cette règle : .fine{font-size:30%}
• les espaces insécables différent des espaces normaux car ils ne peuvent pas être séparés des mots qu’ils séparent par un éventuel retour à la ligne ;
• l’apostrophe et le trait d’union, ne sont pas des ponctuations mais des signes grammaticaux ;
• l’encodage des entités ne pose aucun problème dans la balise <title> et l’attribut alt par exemple ;
• l’apostrophe français s’écrit ’ et non ' ;
• les guillemets français s’écrivent « » et non " " ;
• les points de suspension s’écrivent … et non ... ;
• les différences entre les tirets et le trait d’union pourra faire l’objet d’un petit billet ;
• tout comme il est prévu également un billet sur les signes diacritiques, les symboles typographiques, mathématiques et monétaires.

Et attention à ne pas croire que ces règles relèvent du détail, l’affichage est est parfois fortement impacté. Katsoura écrivait récemment un billet à ce sujet.

On trouve d’ailleurs de plus en plus de CMS ou d’outils qui respectent automatiquement ces règles (SPIP, Dotclear, Markdown).