Les images représentent une part très importante du poids d’un site web qui détermine son temps de chargement. Il est donc essentiel d’optimiser la taille et la compression de ces images et d’utiliser le bon format.
Les différents formats
Choisir le bon format est essentiel, chaque format ayant ses avantages et inconvénients.
Voici un tableau récapitulatif des formats d’images utilisables sur le web.
| Format | JPG | GIF | PNG 24 | PNG 8 | SVG |
|---|---|---|---|---|---|
| Avantages |
|
|
|
|
|
| Inconvénients |
|
|
|
|
|
| Utilisation | Photos sans transparence | Images animées |
| Visuels avec aplats et sans transparence partielle : logos, schémas, icônes… | Icônes, logos et pictogrammes |
La résolution
La résolution d’une image est le rapport entre la taille et le nombre de pixels qu’elle contient.
On entend encore beaucoup dire qu’il faut que les images soient en 72dpi, c’est totalement faux. Il existe une multitude de résolutions d’écrans sur lesquels sera affiché votre site, qui peuvent varier de 60 dpi sur certains réglages d’ordinateurs de bureau à plus de 500 dpi sur certains smartphones.
La résolution n’a absolument aucune importance sur le web, la seule chose importante aujourd’hui est la taille de l’image en pixels (sauf pour le svg). Si vous utilisez Photoshop, au moment de créer un fichier, mettez le nombre que vous voulez dans la case résolution, ça ne change rien!
La taille
La taille en pixel de chaque image dépendra du contexte (où sera placée cette image sur le site).
Pour une image destinée à un fond de site qui occupera 100% de la page, il faut arriver à un compromis entre taille/poids et qualité sur tous les écrans. Nous recommandons une taille de 1920 x 1080px qui permet un affichage correct sur la majorité des écrans.
La compression du jpg
Un paramètre des plus important lors de l’enregistrement d’un JPEG est le niveau de compression, appelé “Qualité” sur Photoshop. Plus la compression est importante (la qualité élevée), plus le poids va être important. Il faut arriver à un bon compromis entre poids et qualité de l’image, pour cela, il faut tester les niveaux de compression.
Généralement, un taux de compression à 80 permet de garder une image de bonne qualité.
Autres optimisation d’images
Il est possible de gagner encore quelques ko en utilisant des outils de compression comme TinyPNG. Ces outils suppriment les données cachées contenues dans vos fichiers d’images (les métadonnées, les profils de couleurs…) et qui n’ont aucun impact sur le rendu visuel de l’image.