Il existe tellement de types de formats d’image différents pour le web qu’il peut être difficile de les distinguer les uns des autres. Mais ce n’est pas quelque chose que vous devez négliger, car ils peuvent avoir un impact majeur sur votre site web. C’est l’une des décisions qu’il faut choisir avant de créer un site web.

Le meilleur format pour une photographie destinée au web n’est pas le même que celui d’un graphique ou d’un logo. Dans cet article, nous allons vous expliquer pourquoi afin que vous puissiez choisir les formats d’image les plus appropriés pour votre site Web.

Importance du format d’image pour le web

Il existe des centaines de formats d’image, et la plupart sont conçus à des fins très spécifiques. Mais ne vous inquiétez pas : vous n’avez pas besoin de choisir entre tous ces types. Seule une poignée de formats d’image est utilisée sur l’internet.

Chaque format d’image web est unique pour ses propres raisons, et chacun aura un effet différent sur votre site web.

En général, les formats d’image impactent trois facteurs différents de votre site web :

• Performance : Certains formats sont plus lourds que d’autres. Plus une image est lourde, plus le chargement de votre site web est long. Cela signifie que le temps de chargement de votre site web sera affecté par le type d’image que vous choisissez. Ce point est abordé en détail dans un autre article où nous parlons du référencement des images.
• Apparence : Certains formats d’image peuvent inclure plus de détails que d’autres, tant dans leur résolution que dans leur variété de couleurs. Certains formats se dégradent à chaque fois qu’ils sont copiés, tandis que d’autres conservent leur qualité au fil du temps.
• Compatibilité : L’étirement ou l’agrandissement d’une image en altère la qualité. Selon le format, cette perte de qualité sera plus ou moins importante. Cela signifie que certains formats d’image sont plus évolutifs que d’autres.

Idéalement, vous devriez tenir compte de ces trois facteurs lorsque vous choisissez les formats d’image pour votre site web afin d’obtenir un bon équilibre entre qualité et performance. Il est préférable de ne pas utiliser plus de deux formats différents sur votre site web afin de maintenir la cohérence.

Format d’image matricielle ou vectorielle pour le web ?

Il existe une division fondamentale entre les formats d’image matricielle et vectorielle pour le web.

• Les images matricielles sont constituées d’une grille bidimensionnelle de pixels. Chaque pixel contient des informations sur la couleur et la transparence. Les images matricielles étant constituées de pixels, elles ne sont pas très faciles à mettre à l’échelle. Si vous agrandissez une image matricielle au-delà de sa taille d’origine, elle perdra des détails et aura l’air floue. Parmi les formats matriciels les plus populaires figurent les formats JPEG, JPG, GIF et PNG.
• Les images vectorielles, quant à elles, sont constituées de lignes, de formes et de chemins. Ils ne contiennent pas d’informations sur les pixels, mais des informations mathématiques. Parce qu’elle est indépendante des pixels, une image vectorielle peut être agrandie et étirée de manière illimitée tout en conservant sa qualité. Quel que soit le zoom effectué, l’image sera toujours aussi nette. La limitation évidente est que les formats d’image vectorielle ne fonctionnent qu’avec des images constituées de vecteurs. Cependant, ils sont extrêmement utiles lorsqu’il s’agit d’afficher des logos, des graphiques, des icônes, des cartes, etc. Le type de format d’image vectorielle le plus populaire pour le web est le SVG.

Compression d’images avec ou sans perte ?

Il existe deux façons de compresser des fichiers numériques : avec ou sans perte. Cela s’applique à tous les médias autres que les images, tels que les musiques et la vidéo.

Un fichier compressé avec perte perd une partie de ses informations d’origine. Si vous décompressez une image compressée avec perte, vous ne récupérerez pas 100 % de son contenu, mais une partie de celui-ci sera définitivement perdue. C’est pourquoi les images compressées avec perte peuvent être réduites pour occuper beaucoup moins d’espace que l’original.

L’exemple le plus populaire de ce type est le JPEG.

Les fichiers compressés sans perte, en revanche, ne sacrifient aucune information. Si vous en décompressez un, vous récupérez l’intégralité du contenu original. Cela signifie qu’il n’y a aucune perte de qualité dans la compression sans perte. Cependant, les fichiers résultants prennent plus d’espace que les fichiers compressés avec perte.

Les formats d’image de ce type les plus couramment utilisés sont PNG et GIF.

Les formats d’image pour le site web

JPG / JPEG

JPEG est le format le plus pratique pour sauvegarder des photos pour le web. Ce format a été créé en 1986 par le Joint Photographic Experts Group, d’où il tire son nom.

Comme dans les premières versions de Windows, les extensions de fichier ne pouvaient pas dépasser trois caractères, le nom complet (JPEG) était abrégé en JPG. Aujourd’hui, Windows autorise des noms de fichiers plus longs comme JPEG, mais l’utilisation de JPG reste courante.

JPEG est un format d’image compressé avec perte conçu spécialement pour les photographies.

Parce qu’il peut contenir plus de 16 millions de couleurs, le JPEG est capable de stocker des images complexes sans perte notable de qualité dans leur taille naturelle.

Cependant, en raison de ce type de compression, chaque fois qu’une image JPG est enregistrée, elle perd un peu de sa qualité. Cette perte se traduit par des éléments visuels qui brouillent les petits détails. Plus on l’enregistre, plus les éléments deviennent visibles. Le meilleur moyen de préserver la qualité de votre photo est de conserver le fichier original non compressé.

Un autre inconvénient du format JPEG est qu’il ne prend pas en charge la transparence. Il ne s’agit donc pas d’un format d’image valide pour la superposition.

Le grand avantage des JPEG est l’espace qu’ils permettent d’économiser. Une image de 10Mb peut être enregistrée à moins de 100 kb au format JPG. Étant donné que les images plus petites nécessitent moins de ressources à traiter, ce format permet d’accélérer et de rendre plus rapide une page web.

PNG

Le format PNG est le plus approprié pour reproduire fidèlement les images. Contrairement au JPEG, le PNG est un format de compression sans perte. Cela signifie qu’il peut conserver toute la qualité de l’image originale.

Ce dernier dépend du type de PNG utilisé : PNG-8 ou PNG-26. Le PNG-8 peut inclure jusqu’à 256 couleurs, tandis que le PNG-26 peut inclure plus de 16 millions de couleurs, tout comme le JPEG.

Le format PNG prend en charge la transparence, ce qui est très utile pour afficher des logos ou superposer des images.

Le format PNG peut conserver la qualité des photos pour le web encore mieux que le format JPEG, mais le fichier résultant sera beaucoup plus gros en termes de poids.

Le format PNG est idéal pour les graphiques, les logos, les illustrations simples et d’autres types d’images Web qui utilisent peu de couleurs et des transitions simples entre les couleurs.

Vous pourrez conserver toute la netteté de ces images et leur taille restera réduite.

N’oubliez pas que le format PNG est un format optimisé pour l’écran et le web. Vous n’obtiendrez pas de bons résultats si vous essayez d’imprimer un PNG sur du papier.

GIF

Le format GIF est un autre format de compression d’image sans perte qui a gagné en popularité parce qu’il permet d’obtenir des tailles de fichier beaucoup plus petites que les autres formats d’image. L’inconvénient est qu’il ne peut inclure que jusqu’à 256 couleurs.

Les GIFs peuvent inclure du texte et des arrière-plans transparents. Le format GIF est donc idéal pour créer des bannières avec du texte sur des images. Il est également particulièrement utile pour afficher de nombreux petits graphiques, tels que des icônes et des logos sur la même page.

Toutefois, en raison de leur capacité limitée à afficher les couleurs, ils ne constituent pas un bon format pour l’affichage de photographies sur le web. À cette fin, les formats JPEG et PNG sont mieux adaptés.

La qualité la plus connue des GIFs est peut-être qu’ils peuvent être animés. Même dans ces cas, ils peuvent conserver toute la définition originale et atteindre une petite taille, ce qui les rend idéaux si vous voulez afficher un logo animé. Comme il ne peut afficher que 256 couleurs, les séquences vidéo ne seront pas très belles.

SVG

SVG est l’abréviation de Scalable Vector Graphics. Comme son nom l’indique, le format SVG est extensible de façon illimitée sans perte de qualité. En effet, elle n’est pas constituée de pixels, mais d’informations mathématiques.

Le format SVG existe depuis 2001, mais n’a été pris en charge que récemment par la plupart des navigateurs. Depuis lors, il est devenu l’un des formats d’image préférés des développeurs.

L’évolutivité du SVG le rend idéal pour des éléments tels que les graphiques, les cartes et les icônes.

Mais ce n’est pas son seul avantage : comme il est constitué d’informations mathématiques, vous pouvez facilement animer chaque élément individuel d’un SVG. En fait, vous pouvez intégrer les informations d’un SVG dans un code HTTP et l’animer grâce à JavaScript et CSS.

Ce qui est génial, c’est que les fichiers SVG sont encore plus petits que les fichiers JPG et PNG lorsque l’image est simple, comme un logo ou une icône. Cependant, lorsque l’image devient plus complexe, la taille du fichier augmente également, et de façon très importante.

Naturellement, ce format n’est pas utilisable pour les photographies destinées au web.

WEBP

WebP combine les avantages de JPEG et PNG. C’est l’un des formats d’image les plus intéressants de cette liste, car il a été créé spécifiquement pour être utilisé sur le Web.

WebP est un format d’image Open Source développé par Google en 2010, bien qu’il ne soit pas encore aussi populaire que d’autres formats d’image. Il est pris en charge par de nombreux navigateurs, et il existe des moyens de le faire fonctionner dans des versions plus anciennes et non prises en charge de navigateurs tels que Firefox et Safari.

WebP peut compresser des images avec ou sans perte. Dans le cas des images compressées sans perte, la taille est inférieure de 26 % à celle des PNG, tandis que les images compressées avec perte sont de 25 à 34 % plus petites que les images JPEG.

Les versions avec et sans perte des images WebP prennent en charge la transparence. Dans le cas de la compression avec perte, l’ajout de la transparence n’augmente la taille que de 22 %.

APNG

Le format APNG étend le format PNG standard pour inclure des animations. Ce format développé par Mozilla peut remplir le même rôle que les GIF, mais présente certains avantages par rapport aux GIF.

Pour commencer, le format APNG peut indexer une variété de profondeurs de couleurs, alors que le GIF est limité à des couleurs indexées sur 8 bits.

Cela fait d’APNG un format idéal pour les animations qui n’ont pas besoin d’être synchronisées avec le son. Cela comprend des barres de progression et des autocollants animés.

Comme le format GIF qu’il est censé remplacer, le format APNG utilise une compression sans perte. Toutefois, comme il permet d’indexer une plus grande variété de couleurs, les APNG peuvent contenir des contenus plus complexes, tels que des séquences vidéo, sans perte radicale de qualité.

HEIC/HEIF

HEIC est l’une des extensions que le format HEIF peut avoir. Le format de fichier image à haute efficacité a été créé par le MPEG (Moving Picture Experts Group) et offre plusieurs avantages par rapport à l’ancien JPEG. HEIF utilise la même technologie que le format vidéo HEVC ou H.265.

Les fichiers portant l’extension .heic sont en fait des conteneurs de fichiers image individuels codés en .heif. Nous voyons ici l’une de ses caractéristiques les plus intéressantes : le format HEIC peut stocker des séquences d’images et des images HDR.

En outre, les fichiers HEIC peuvent contenir des informations en plus des images, comme du son et du texte. Cela signifie que les images .heic peuvent être éditées sans modifier la version originale. Ils sont également favorables à la transparence.

Les images au format HEIF utilisent une compression avec perte, mais pèsent deux fois moins que leurs homologues JPG tout en conservant une qualité supérieure à ces derniers. La conversion et le traitement d’un fichier HEIC nécessitent plus de puissance de traitement qu’un JPEG et peuvent constituer une limitation sur les équipements plus anciens, mais cela ne doit pas être un problème sur le web.

Le seul obstacle à l’utilisation du format HEIF est la compatibilité. Le JPEG est encore beaucoup plus largement supporté. Les iPhones et iPads enregistrent désormais leurs photos au format HEIF, mais doivent les convertir en JPEG pour les partager.

AVIF

AVIF est un format Open Source qui a le potentiel de devenir l’un des formats d’image les plus pertinents. Il dispose d’un large éventail de fonctionnalités et utilise les dernières technologies de compression. Comme HEIC, AVIF encode les images au format HEIF.

AVIF peut stocker des images compressées avec ou sans perte. Ses fichiers compressés avec perte sont 50% plus petits qu’un JPEG à qualité égale, et atteint une compression de 30% à 50% supérieure à celle d’un WebP.

Comme un GIF, il peut enregistrer des animations ou des séquences d’images. Il prend également en charge la transparence et les images HDR.

Pour l’instant, le format d’image web AVIF est pris en charge par Chrome, Opera et Firefox, mais seulement partiellement dans ce dernier cas.

Comment trouver le meilleur format pour votre site web ?

Pour choisir les formats d’image et de photo idéaux pour votre site web, vous devez savoir ce qui les différencie les uns des autres. L’objectif doit être d’atteindre un équilibre entre la qualité et la performance.

L’utilisation de plusieurs formats d’image sur une même page Web peut être utile, mais vous devez comprendre ce que chacun d’entre eux fait le mieux et maintenir la cohérence autant que possible.

Mais le travail ne s’arrête pas là. Les différents formats d’image peuvent avoir un impact sur votre référencement et chacun doit être optimisé à sa manière.