<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>

Quels formats
d'images utiliser ?

Jpg, Png, Svg ou WebP

Quand devriez-vous utiliser JPG, PNG, SVG ou WebP comme types de fichiers image ? 

Non seulement il est crucial de savoir quand utiliser quel format en termes de qualité, mais cela a aussi un impact énorme sur la vitesse de chargement de votre site Web. Aujourd'hui, vous découvrirez les avantages et les inconvénients de l'utilisation de l'un ou l'autre des formats de type d'image Web les plus populaires

Avant d'aller plus loin, j'aimerais faire une distinction importante entre deux méthodes de compression d'images différentes :

Lossless signifie que vous pouvez compresser une image à une taille de fichier plus petite sans compromettre sa qualité.
Lossy est le contraire. Lorsque vous compresserez une image, elle perdra en qualité.

Très bien, passons en revue chacun des formats de fichiers d'images les plus populaires. JPG, PNG, SVG et WebP sont beaucoup mieux adaptés pour afficher des images de haute qualité. Mais bien sûr, ces formats de fichiers ont leurs avantages et leurs inconvénients, comme vous le verrez bientôt. 

JPEG/JPG

JPEG (Joint Photographic Experts Group), souvent écrit en JPG, est un format de compression à perte, initialement publié en 1992. JPEG est couramment utilisé dans les applications graphiques comme Photoshop et Illustration. JPEG est le format de fichier standard pour la plupart des appareils photo numériques.

Les couleurs JPEG, contrairement aux GIFs, ont des millions de couleurs, ce qui les rend beaucoup mieux adaptés aux images et aux graphiques que les GIFs.

Compression avec perte : la perte signifie que JPG perd de la qualité lorsque vous le compressez pour réduire la taille de son fichier. La perte de qualité dépend d'une myriade de facteurs liés au type d'image que vous comprenez.

La taille des fichiers JPEG est nettement plus petite que celle des fichiers PNG lorsque vous comparez des fichiers JPG et PNG de la même résolution.

JPEG est un format d'image fixe, ce qui signifie que contrairement aux GIF et SVG par exemple, JPEG ne supporte pas l'animation.

Compatibilité avec les navigateurs : JPEG est compatible avec tous les navigateurs modernes, et jusqu'à IE6.

Vous ne devriez utiliser JPEG par rapport à PNG que si une taille de fichier plus petite est plus importante que la qualité de l'image. 

PNG

PNG (Portable Network Graphics) est un format graphique matriciel publié initialement en 1996. PNG supporte la compression sans perte, la transparence et plus de 16 millions de couleurs. Cela en fait un format de prédilection lorsqu'il est important de maintenir une bonne qualité d'image.

Il y a deux formats PNG, PNG-8 et PNG-24, décomposons les deux.

Caractéristiques techniques du PNG-8
Couleurs limitées : PNG-8 ne supporte que 256 couleurs, et est similaire aux GIFs. Mais PNG-8 vient à une taille de fichier plus petite que les GIFs.

Animation : contrairement aux GIFs, PNG-8 a un support d'animation médiocre.

Caractéristiques techniques du PNG-24
Couleurs riches : PNG-24 supporte plus de 16 millions de couleurs. Cela rend le PNG-24 similaire au JPEG en termes de profondeur de couleur.

Fichiers de plus grande taille : le format PNG-24 est nettement plus grand que le format JPEG.

PNG-8 et PNG-24 supportent tous les deux la transparence, comme les GIFs, mais à un niveau de qualité plus élevé grâce à un "canal alpha", ce qui signifie que (contrairement aux GIFs) il peut avoir une réelle transparence.

Bien que le PNG ait plus d'options que le JPEG : une taille moyenne de fichier beaucoup plus grande. Ce compromis entre la qualité et la largeur de bande est un compromis que vous devez faire en fonction du contexte spécifique de votre projet.  C'est assez simple, en fait. Si vos images sont "décorées" de manière significative, par exemple avec du texte , il est probablement plus logique d'utiliser JPEG et d'économiser la bande passante excédentaire pour vous et vos utilisateurs. Si toutefois, vous affichez des produits d'une bijouterie, alors vous devriez probablement utiliser PNG.

Utilisez PNG(24) au lieu de JPEG si vous avez besoin d'afficher la meilleure qualité d'image possible à tous les niveaux de taille/zoom. 

Xnview MP

XnViewMP ( gratuit et en français) est la version avancée de XnView. C'est un puissant explorateur, visualiseur et convertisseur multi-plateforme. Compatible avec plus de 500 formats.

En allant sur fichier et exporter, vous avez la possibilité de choisir le niveau de compression pour les formats suivants : JPG, PNG et même le WEBP.

SVG

Évolutivité : Les SVG sont (en théorie) infiniment évolutifs. Vous pouvez les faire aussi grands ou aussi petits que vous le souhaitez, sans compromettre la qualité.

Taille du fichier : Les SVG sont en moyenne beaucoup plus petits que les GIF, JPEG, PNG, même à des résolutions extrêmement élevées.

Animations : tout comme les GIFs, les SVG supportent les animations, mais avec beaucoup plus de flexibilité et une qualité incomparablement supérieure.

Codable : Les SVG peuvent être manipulés directement avec HTML, CSS et JavaScript (par exemple pour les animations).

Graphiques seulement : SVG est un format vectoriel graphique. Contrairement aux formats PNG, JPEG et GIF, ils ne peuvent pas être utilisés pour la photographie.

L'utilisation de SVG à la place de la plupart des autres formats, réduira massivement la charge totale de pages sur votre site web, et donc l'expérience utilisateur. Cela réduira également la facture d'hébergement de votre serveur/fichier. 

Si vos graphiques actuels (pas les images) sont en JPG, PNG, ou GIF alors vous devriez les remplacer par SVG. Fichier de plus petite taille, de meilleure qualité.

WEBP

WebP est un format d'image moderne initialement publié en 2007 par Google. WebP vous offre une compression d'image sans perte et sans perte supérieure, par rapport à tous les autres formats populaires.

Pourquoi ai-je attendu la dernière partie de ce guide pour vous le dire ? Jetons un coup d'oeil aux faits de WebP, alors ça aura du sens.

Compression : WebP peut être compressé par compression sans perte ou avec perte.

Taille du fichier : WebP peut réduire les fichiers JPEG jusqu'à 34% et les images PNG jusqu'à 45%.

WebP peut être utilisé aussi bien sur les graphiques que sur la photographie

Contact

Adresse

Retz Création Internet
21 Vièvre, 44640 Le Pellerin
Tél : 06 24 54 62 41

Horaires

Lundi au vendredi
de 9 h à 19h sans interruption