Aujourd’hui, dur de faire la distinction entre les différents formats d’images utilisés dans le monde du design du web, du print. Avec l’arrivée de WebP, Jpeg 2000, Jpeg XR et AVIF ces dernières années, on a pensé qu’il était urgent de vous en parler.
Jpeg, png, psd … Vous ne savez plus comment envoyer ou mettre en ligne vos fichiers. Pour connaître l’utilisation propre à chacun des formats d’images actuels et ne plus vous tromper, continuez votre lecture !
Les formats d’images actuels et leur utilisation
Les formats d’images adaptés pour le web
JPEG (Joint Photographic Expert Group) : JPEG est le format le plus utilisé sur le web. Il permet de compresser les données d’une image en ne laissant que ce qui est visible à l’œil nu ce qui fait de lui le format photo le plus répandu. Il est largement utilisé par les appareils numériques et les sites web pour la légèreté et la vitesse de chargement que cela confère aux photos. C’est un format universel qui peut être lu sur n’importe quel support. Toutefois, il perd de la qualité quand il est sauvegardé plusieurs fois.
PNG (Portable Network Graphics) : A l’image de JPEG, PNG est un format reconnu pour sa compression. Il supporte une grande qualité d’image, conserve la netteté et les couleurs initiales de l’image originale. Mais il est surtout connu pour supporter les fonds transparents, ce qui est très pratique lorsqu’on veut ajouter un logo ou autres designs et photos sur fond transparents. PNG est un format d’image lourd mais il est adapté pour le web si on abuse pas de son utilisation.
GIF (Graphics Interchange Format) : C’est le format populaire des réseaux sociaux. Ce fichier est une animation (utilisant LZW, un algorithme de compression sans perte). Comme PNG, il supporte les fond transparents, mais n’est pas aussi qualitatif au niveau notamment au niveau des couleurs car il est très limité en taille (de petite taille).
MP4 (Moving Picture Expert Group) : Très répandu sur le net, le format MP4 supporte de la vidéo, du texte et de l’audio. C’est un format de vidéo très léger et donc parfait pour publier vos vidéos sur votre site ou vos réseaux sociaux.
Les autres formats de traitement d’images
AI (Adobe Illustrator) : Adobe Illustrator est l’un des logiciels de design vectoriel les plus connus au monde. Basé sur des tracés et des formes géométriques, il est souvent utilisé pour les logos ou autres images destinés à être placé sur des supports de communication. Quand vous créez ce genre de design sur le logiciel Adobe Illustrator, vous avez tout intérêt à l’enregistrer en .ai afin de conserver la netteté et la qualité de l’image même si on l’a redimensionne.
PSD (Adobe Photoshop) : Adobe Photoshop est un logiciel de retouche d’image générant de des fichiers matriciels, composé de pixels, et non vectoriels. Il est souvent utilisé pour des images qui ne peuvent pas être vectorisées. Il permet de retoucher des images de manière très précise mais un fichier en .psd demeure lourd et donc uniquement adapté à la retouche d’images.
SVG (Scalable Vector Graphics) : Le format .svg est un format que vous ne pourrez utiliser que sur les navigateurs. Il permet de sauvegarder et afficher des images vectorielles, de redimensionner les images sans perdre sa qualité. Il est léger mais n’est pas supporté par les réseaux sociaux.
PDF (Portable Document Format) : Le format PDF, créé par Adobe, est largement utilisé pour l’impression de fichiers ou pour leurs mises en ligne. Ce qu’il faut retenir sur ce format est qu’il ne permet aucune modification une fois enregistrer, et sera distribuée avec le même affichage sur n’importe quel support. Il peut contenir de multiples éléments mais ne peut être ouvert que si vous possédez PDF Reader sur votre ordinateur. (Son prédécesseur, le format EPS (Encapsulated Postscript) pouvait lui être ouvert par plusieurs logiciels mais était très lourd).
TIFF (Tagged Image File Format) : Format de référence pour les images de haute qualité, il est principalement utilisé par les professionnels du commerce et de l’impression. Il est généralement utilisé pour les impressions de très haute qualité ce qui fait de lui un fichier lourd mais supporté par tous les systèmes d’exploitation.
Les nouveaux formats Web
WebP : Créé en 2010 par Google, il a été conçu pour réduire la taille des images autant que possible, c’est-à-dire généralement de 30% par rapport aux images PNG ou JPEG. L’intérêt est qu’elles réunissent les caractéristiques des deux formats, à savoir une compression sans perte comme PNG et avec perte comme JPEG. La qualité d’image est optimum et permet une multitude d’utilisation malgré qu’elle soit compatible qu’avec une partie des navigateurs. Je vous invite à consulter notre article « WebP, le nouveau format d’image de Google ».
Jpeg 2000 ou Jpeg XR : Nous avons vu JPEG juste avant qui, vous l’aurez compris, est le format le plus utilisé sur le web. Les formats Jpeg 2000 et Jpeg XR sont eux les évolutions de Jpeg. La taille de fichier est encore réduite mais avec une qualité similaire. Le format Jpeg XR supporte la transparence comme le format PNG ! Les formats sont supportés chacun par leurs navigateurs : Safari et IOS Safari pour Jpeg 2000 et Internet Explorer, Edge et Internet Explorer Mobile pour Jpeg XR.
AVIF (AV1 Image File Format) : Evolution d’AV1, ce format utilise les algorithmes de compression du format vidéo pour réduire le poids des images. Il ne nécessite aucune licence pour s’en servir : il est open-source. Windows supporte le format dans Windows 10 et Netflix, VLC et Gimp l’utilise.
Le récapitulatif
Quel est l’intérêt de connaître les utilisations faites de chaque format d’images ? Savoir les identifier, c’est pouvoir choisir les formats les plus optimums et les plus intéressants suivant l’utilisation que vous en faites. Plus vous choisirez un format adapté, plus il sera léger et plus la vitesse de chargement et le poids de votre page, site internet ou fichier sera amélioré. Un fichier trop lourd sera pénalisé par Google et générera un mauvais référencement naturel (SEO).
Nous vous avons résumé l’ensemble de ces données dans le tableau récapitulatif suivant :
FORMATS D'IMAGES | UTILISATION | AVANTAGES | INCONVENIENTS |
---|---|---|---|
JPEG | Images sur le web, sur les réseaux sociaux, sur les portfolios photos, pour utilisation numérique, pour envoi de photos aux clients | Visible sur presque tous les supports, légèreté du fichier, idéal pour un chargement rapide sur Internet | Perte de qualité après plusieurs sauvegardes, il n’est pas éditable en plusieurs calques |
PNG | Logos, photos avec fonds transparents pour les réseaux ou les sites web | Supporte les fonds transparents, bonne qualité | Lourdeur du fichier, à utiliser avec parcimonie |
GIF | Courtes animations sur les réseaux sociaux | Supporte les fonds transparents, et des animations simples | Les couleurs sont parfois atténués, baisse de qualité avec la limitation de taille, pas idéal pour l’impression |
MP4 | Vidéos des sites internet et des réseaux sociaux | Fichier léger, compatible avec beaucoup de lecteurs vidéo, s’affiche sur internet | |
AI | Images sur les supports de communication, designs | Permet le redimensionnement des images, bonne qualité de l’image | Nécessite d’avoir le logiciel Adobe Illustrator |
PSD | La retouche photo | Précision dans le retravaille des images, éditable en plusieurs calques (permet de modifier les images calque par calque) | Fichier très lourd, nécessite d’avoir le logiciel Adobe Photoshop. Pour l’impression ou l’envoi aux clients, il vaut mieux le convertir |
SVG | Eléments visuels de l’entreprise comme les logos, illustrations, icônes, etc. | Permet le redimensionnement des images sans perte de qualité | Incompatible aux réseaux sociaux |
Documents, formulaires et pour leur impression | Conserve la mise en page souhaitée (pour impression par exemple) | Nécessite le téléchargement en amont de PDF Reader sur l’ordinateur | |
TIFF | Impression de très haute qualité | Image d’excellente qualité, qualité professionnelle | Fichier très lourd |
WEBP | Images sur les sites internet, réseaux sociaux … | Taille et poids réduit de 30% par rapport à JPEG et PNG, image de bonne qualité, compatibles avec beaucoup de navigateurs | |
JPEG 2000 | Images sur les sites internet, réseaux sociaux … sur Safari et IOS Safari | Taille réduite par rapport à Jpeg, bonne qualité d’image | Incompatible avec Internet Explorer, Edge et Explorer Mobile |
JPEG XR | Images sur les sites internet, réseaux sociaux … sur Internet Explorer, Edge et Explorer Mobile | Taille réduite par rapport à Jpeg, bonne qualité d’image, supporte les fonds transparents | Incompatible avec Safari et IOS Safari |
AVIF | Images compressés | Image deux fois moins lourde que JPEG, libre de droits | Pas encore compatible avec tous les moteurs de recherche (beaucoup en phase de tests ou de discussions) |
Les experts de cet article :
Elise Rocchesani
Digital Manager
Bleu Ebène