Les deux formats d’image JPG et PNG font partie des formats les plus utilisés et sont tous deux excellents pour une utilisation sur des sites web. Les deux formats sont utilisés différemment dans le design web et ont chacun leurs propres forces et faiblesses. Dans cet article, nous comparons JPG et PNG pour montrer quel format est le mieux adapté à chaque objectif. Les images optimisées pour le SEO sont un élément essentiel du contenu et jouent un rôle crucial dans l’optimisation des moteurs de recherche.
Les formats d’image peuvent être créés avec différents profils et/ou une matrice de quantification modifiable. Par conséquent, les valeurs obtenues ici en termes de qualité et de taille de fichier ne sont pas comparables aux résultats d’autres tests.
PNG
Le format PNG est un format d’image sans perte qui permet une compression efficace des images. PNG signifie ‘Portable Network Graphics’ et est le successeur du format GIF. Comme le format GIF, il dispose d’un canal alpha, qui permet de créer des arrière-plans transparents. Cependant, les dégradés de couleurs et les détails fins peuvent rapidement conduire à des tailles de fichier importantes lors de la compression PNG.
Qualité de l’image en PNG
Comme le PNG est un format sans perte, il n’y a pas de perte de qualité lors de l’exportation.
Alors que des objets comme des graphiques sont représentés clairement et que la taille du fichier reste faible, la situation change pour les images plus détaillées avec de nombreux tons de couleurs.
Pour réduire la taille du fichier, les informations de l’image peuvent être quantifiées, ce qui entraîne un effet d’aliasing et des pixels visibles, notamment pour les images multicolores où la différence devient beaucoup plus évidente. À une qualité moyenne, les pixels sont déjà visibles. Bien que les images bi-ton puissent encore être satisfaisantes à une quantification moyenne, les images multicolores donnent un résultat médiocre.
Bien que les artefacts puissent être réduits en augmentant la quantification, cela entraîne une augmentation considérable de la taille du fichier, ce qui rend la quantification moins bénéfique. Dans de tels cas, des formats comme le JPG, qui sont présentés ci-dessous, montrent leurs avantages.
JPG
Le format JPG (JPEG) est un format de compression d’image avec perte. Pendant des années, le JPG a été le format de compression standard dans les appareils photo numériques. Seuls les appareils haut de gamme offrent la possibilité de stocker des photos sans compression dans le format RAW. Lors de l’utilisation de la compression JPG, un appareil photo numérique réduit considérablement la taille du fichier d’une photo.
Pour l’édition d’images, l’utilisation du format RAW dans l’appareil offre des avantages clairs par rapport au JPG, car le profil RAW n’applique pas de filtres comme la réduction du bruit. Le format RAW conserve également les détails dans les zones sombres, qui peuvent ensuite être éclaircies pour révéler plus de détails. Ces informations sont perdues dans les fichiers JPG.
Pour les photographes, l’utilisation du format RAW est donc recommandée. Cependant, pour la conception de sites web et l’utilisation sur Internet, le format JPG est idéal en raison de ses tailles de fichier plus petites.
Pour éviter de fausser les résultats des tests par une nouvelle recompression, les images ont été mises à l’échelle sans interpolation et enregistrées sans perte au format PNG.
Qualité de l’image en JPG
Une compression JPG avec une valeur de qualité de 92 atteint une bonne qualité d’image. À une valeur de qualité de q=84, qui est une valeur courante, des artefacts visibles apparaissent, tels que des blocs autour des bords. À q=50, le nombre d’artefacts augmente et devient plus prononcé.
À q=50, l’exemple multicolore montre également un effet de banding prononcé dans le dégradé de couleurs. Le nombre de couleurs est considérablement réduit à ce niveau de compression.
Taille du fichier JPG
La taille du fichier d’une image bicolore de 152,3 KB (877x877px) a été réduite de 59% à 62,5 KB avec une compression de qualité q=84. Une réduction supplémentaire par une compression plus forte donne une taille de fichier de 46,1 KB à q=50. Cependant, cela entraîne une perte de qualité significative. L’utilisation de la détection psycho-visuelle (avec q=84) permet de réduire encore la taille du fichier en dessous de la valeur de compression régulière de q=50, atteignant seulement 44,9 KB.
La détection psycho-visuelle est similaire à la compression psychoacoustique, comme avec le son MP3, où seules les informations pertinentes pour l’oreille humaine sont stockées dans le fichier JPG.
Réduire la résolution avec compression à q=84 réduit considérablement la taille du fichier et offre toujours un bon résultat adapté pour le web.
Comparaison directe et conclusion sur PNG ou JPG
Les formats JPG et PNG sont des standards dans le design web depuis de nombreuses années. Avec ces deux formats, la plupart des images peuvent être affichées de manière optimale.
Le format PNG est particulièrement adapté aux images avec peu de couleurs et des bords à fort contraste, comme les typographies, logos, etc., car il offre d’excellents résultats visuels avec de petites tailles de fichier. Les bords restent nets sans artefacts de compression. Les images avec peu d’informations détaillées peuvent être compressées en un fichier de très petite taille avec PNG.
Le format JPG excelle dans la compression de tous types d’images, notamment les images détaillées telles que les photographies. Dans ces cas, PNG générerait des fichiers beaucoup plus volumineux.
Il est à noter qu’une image PNG originale qui a été compressée avec JPG et ensuite enregistrée à nouveau en PNG peut se retrouver significativement plus grande que l’image originale. Cela est souvent dû au fait que la compression PNG peut produire des tailles de fichiers extrêmement petites pour des images simples, mais la compression JPG introduit des artefacts supplémentaires. Ces artefacts sont ensuite interprétés comme des données d’image lorsque le fichier est réencodé en PNG, ce qui entraîne une augmentation du taille du fichier.