Quels formats d’images sur mon site web?

Différents formats d'images pour le web

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.

FormatJPGGIFPNG 24PNG 8SVG
Avantages
  • Léger
  • Possibilité de choisir le niveau de compression
  • 16 millions de couleurs
  • Gestion des animations
  • Pas de pixellisation
  • Gestion de la transparence
  • Pas de pixellisation
  • 16 millions de couleurs
  • Gestion de la transparence, même partielle
  • Léger
  • Pas de pixellisation
  • Gestion de la transparence
  • Possibilité de choisir le nombre de couleurs indexées
  • Léger
  • Pas de pixellisation
  • Vectoriel: agrandissement de l’image sans perte de qualité, sans pixellisation
  • Gestion de la transparence
Inconvénients
  • Pas de gestion de la transparence
  • Mauvais rendu sur les aplats et textes
  • Pixellisation
  • Limité à 256 couleurs maximum
  • Pas de transparence partielle (seulement des zones entièrement transparentes)
  • Lourd
  • Limité à 256 couleurs maximum
  • Pas de transparence partielle (seulement des zones entièrement transparentes)
  • Non supporté par Internet Explorer 8 et ses versions antérieures
  • Uniquement pour les images vectorielles
  • Implémentation variable de la balise <svg> selon les navigateurs
UtilisationPhotos sans transparenceImages animées
  • Visuels nécessitant une transparence partielle (dégradé sur fond transparent, opacité partielle…)
  • Visuels nécessitants beaucoup de couleurs et des aplats
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.