À chaque image son format de fichier

Pour un projet de site Web, il faut fournir une foule d’éléments de contenu : textes, graphiques, photos, logos, etc. À chaque élément correspond un format de fichier idéal. Voici un petit guide pour vous aider à comprendre et à préparer vos contenus visuels correctement.

Format JPEG

Le format JPEG est le format par défaut des photos sur le Web. S’il n’y a pas de zone en transparence ou d’animation requise, c’est le format habituellement utilisé pour l’intégration de photos sur un site Web. La compression possible pour alléger les fichiers en fait le type de fichier idéal pour optimiser la vitesse de chargement d’un site Web.

Voici les principales caractéristiques du format JPEG :

• Affiche correctement la majorité des couleurs.

• Gère bien les dégradés et les ombres.

• Une fois compressé, le poids du fichier est plutôt léger, ce qui est idéal pour le Web.

• La compression fait perdre un peu de la qualité des images mais demeure tout de même très convenable pour un usage sur le Web.

• Ne permet pas les zones de transparence ou les animations.

Format PNG

Parce qu’il permet la gestion des transparences, le format PNG (plus précisément le PNG 8) est généralement employé pour les logos et les icônes sur le Web. On peut ainsi les superposer à des couleurs de fond sans se retrouver avec un encadré blanc autour des éléments. Bien que ces fichiers soient plus lourds que les fichiers JPEG, étant donné que les logos et les icônes ne représentent généralement pas la majorité des contenus d’une page Web, ils n’affectent pas réellement le temps de téléchargement d’une page Web.

Principales caractéristiques du format PNG :

• Gère bien les transparences.

• Plus lourd que les fichiers JPEG mais plus léger que les GIF.

• Est limité à 256 couleurs.

• Ne gère pas les animations.

Pour des besoins très spécifiques en termes de qualité d’image (images de très haute qualité avec transparence), il y a également le format PNG 24. Avec ce format, on accède à la même sélection de couleurs qu’avec le format JPEG mais malgré la compression sans perte de qualité, les fichiers sont plus lourds et toujours sans animation.

Format GIF

Pour des logos et icônes simples et pour des animations, on peut avoir recours au format GIF. Ce format est toutefois de moins en moins employé au profit des animations en CSS et des fichiers PNG/SVG de meilleure qualité et plus légers pour le Web.

Principales caractéristiques du format GIF :

• Gère les transparences et les animations.

• Sa compression est sans perte, ce qui permet d’avoir des fichiers relativement légers pour le Web.

• Est limité à 256 couleurs et ne peut donc pas gérer les dégradés et les ombres.

Format SVG

Il s’agit d’un format généré par le navigateur et donc utilisé pour des images simples, telles que des icônes, logos ou graphiques. La taille des images peut être modifiée sans risque de détérioration de la qualité de l’image.

Principales caractéristiques du format SVG :

• Gère la transparence et les animations à l’aide de CSS ou de JavaScript.

• La taille de l’image peut être modifiée sans perte de qualité.

• Bien que le poids d’un fichier soit léger, il peut alourdir le code d’une page Web si intégré dans le HTML.

• Ne peut servir que pour des images simples.

• L’édition d’une image en SVG nécessite un logiciel graphique tel qu’Illustrator.

Format WEBP

Créé par Google, le format WEBP est un passe-partout pouvant remplacer tous les autres formats, sauf le SVG. Son utilisation n’est toutefois pas recommandée car il n’est pas compatible avec tous les navigateurs et ne peut pas être édité sur les logiciels graphiques connus. Il faut donc faire la conversion des images manuellement, ainsi que dupliquer les images sous un autre format (pour un site Web) afin d’en assurer la compatibilité avec tous les principaux navigateurs.

Notre conseil : demandez à votre concepteur de site Web les formats dans lesquels il préfère recevoir vos documents.

Besoin d’un coup de pouce pour démêler vos fichiers? N’hésitez pas à communiquer avec nous pour obtenir tous nos conseils à ce sujet.

Source : https://www.genious-interactive.com/images-web-quel-format-choisir/