Image en CSS ou en HTML

[Corrigeur]

Bonjour à tous.

Les conseils d’optimisation d’antan préconisaient de passer toutes les images répétitives (donc décoratives) en CSS.
Plutôt que :

<img width="18" height="18" title="Plan du site." alt="sitemap" src="sitemap.png">

Il était conseillé d’écrire en CSS

#element { background:url(sitemap.png) no-repeat; }

On disait en gros qu’une image qui n’apporte que de la décoration gagnait à être passée en CSS et que cela accélérait les temps de chargement de pages suivants. Cela permettait de plus d’adapter la décoration aux dispositifs d’affichage selon les dimensions d’affichage du dispositif. Cela complique toutefois le codage en HTML lorsque la surface de l’image doit correspondre à une zone de clic ou comme ici d'écritures.

Inversement, une image qui apporte de l’information devait voir sa forme <img> privilégiée, car cela permettait d’ajouter de l’information par le alt et par le title.

Qu’en est-il maintenant ? Merci pour vos explications.

 

[loubet]

je ne vois pas de raisons pour que cela ai changé.

 

[Grafimages]

Dans le cas d'une image décorative, l'une ou l'autre solution importe peu.
Dans le cas d'une image informative (icône avec lien, image illustrative liée au contenu...), on privilégie le HTML, puisque l'image doit pouvoir être affichée même si les CSS ne sont pas chargées/affichées.
Via Alsacreations (article de 2009).
Même son de cloche chez OpenWeb.

Aucune raison que ça ait changé depuis.

 

[zeb]

Moi je fais deux distinction :
* L'image de contenu (illustration du contenu comme une photo par exemple)
* l'image de design (c'est une illustration du site ou des pages en général).

le contenu c'est <img src ... le design c'est au maximum en CSS (RAB si c'est pas chargé vite ou pas).
Ensuite pour ce qui est des images liées au design j'utilise base 64 dans le CSS dès que la taille du code est compatible.

 

[Bigb06]

Ce qui pourrait avoir changé depuis, c'est qu'on privilégie aujourd'hui les polices d'icones pour afficher les éléments décoratifs car ils sont plus adaptés au responsive design.

 

[Marie-Aude]

Cela dit on peut faire ses propres SVG aussi

 

[Corrigeur]

Il apparait finalement que l’on peut distinguer les images en 4 catégories. Tiens ! Cela me rappelle les maths de sixième avec les unions et les intersections.

On trouvera :
– Les images décoratives. Ce sont celles qui n’apportent rien au message mais qui donnent une apparence plus belle. Ces images gagnent souvent à être intégrées au CSS. Ex. : fioriture, liseré, fond d’écran, fond de contenu...
– Les images informatives. Ce sont celles dont la présence apporte de l’information. Ces images gagnent souvent à être intégrées au HTML avec un alt et un title.. Ex. : image illustrant un billet.
— Les images avec un rôle variant. Ex. : le logo pourra être considéré comme une image décorative sur le bandeau, mais comme une image informative sur un site externe.
— Les images à la fois décoratives et informatives. Ce sont des images dont on pourrait se passer, mais dont la présence apporte de l’information qui ne gagnera toutefois pas vraiment à se voir complété par un alt et un title. Où situer le curseur et quand faut-il mettre un alt et un title ? La distinction va dépendre en fait de l’interprétation de chacun. Ex. : une image à cliquer sera à la fois décorative, car on pourrait s’en passer, mais aussi comme informative, car elle pourrait remplacer efficacement le texte. Faut-il alors les intégrer au CSS ou au HTML ? Cela va dépendre de l’analyse de chacun. Lorsque le alt et le title n’apportent rien, ces images correspondent en gros aux images des polices d’icônes.

 

[Corrigeur]

J’ai beaucoup travaillé sur l’optimisation de l’affichage pour réduire le temps nécessaire à l’affichage. J’ai réalisé de nombreux tests et j’ai finalement préféré ici une technique que nous utilisions autrefois dans les jeux vidéos quand la vitesse était primordiale : la technique des sprites.

Les tests montrent que ce n’est pas toujours la meilleure solution. Cela a par contre permis de réduire ici le nombre de connexions, de diminuer la taille des images téléchargées et de rétrécir ainsi la durée nécessaire à l’affichage complet de 0,7 seconde.

Bref ! Malgré une vidéo YouTube, une grosse image et 3 réseaux sociaux, la page index du Corrigeur s’affiche désormais en 0,436 seconde la toute première fois, et l’affichage des pages suivantes se fait en 0,252 seconde selon GTmetrix. Le score est ainsi de 99 % pour PageSpeed de Google et 98 % pour YSlow de Yahoo.

Pour ceux que cela intéresse, il vous suffit d’aller regarder le source de la page index de corrigeur.fr et de quelques autres pages du même site pour comparer.