Présentation des types d'images : guide du développeur

Nous savons qu'il peut être difficile de suivre tous les types de fichiers image utilisés aujourd'hui. Pour simplifier la situation, nous avons compilé un guide qui couvre en détail chaque format d'image populaire. Nous nous concentrons spécifiquement sur les types d'images qu'un développeur Web utiliserait. Il existe de nombreux autres formats de fichiers, mais ce sont les plus populaires sur le Web.

Pour une plongée en profondeur dans AVIF, le format d'image de nouvelle génération le plus populaire, consultez cet article .

À la fin de cet article, vous saurez quand et comment utiliser tous les formats de fichiers image dont nous discutons et pourrez choisir le bon en toute confiance. Vous apprendrez à optimiser la qualité de l'image tout en minimisant la taille des fichiers, augmentant ainsi les performances de vos sites Web et applications.

Pour savoir comment optimiser automatiquement les images et convertir les formats d'image à la volée, visitez imgix.com.

Voici une liste des types de fichiers image que nous aborderons dans cet article :

• GIF
• PNG
• TIFF
• JPG/JPEG
• JPEG2000
• JPEGXR
• BMP
• SVG
• HEIC/HEIF
• WEBP
• AVIF/AV1

Pourquoi y a-t-il tant de formats d'images ?

L'explication la plus simple de la grande variété de formats d'image est que chacun sert un objectif différent. Différents formats d'image utilisent également différentes méthodes de compression, un processus qui encode les informations d'un fichier pour réduire sa taille totale et accélérer le téléchargement sur une page Web.

En raison des différences dans les algorithmes de compression, certains formats d'image se traduisent par des fichiers de plus petite taille avec la même qualité d'image, mais au détriment de fonctionnalités telles que la transparence de l'image.

Certains formats ont des propriétés qui ne les rendent utiles que pour les images d'un type particulier. Par exemple, le format SVG est un format vectoriel et convient parfaitement aux icônes, mais il ne convient pas aux photographies car celles-ci sont stockées dans un format d'image différent appelé raster.

En parlant de formats d'image, nous devons clarifier ces termes et quelques autres termes courants avant de plonger dans les types d'images. Discutons brièvement de la différence entre les formats d'image raster et vectoriels et la compression sans perte ou avec perte.

Trame contre vecteur

Sous le capot, les formats vectoriels définissent une image comme une série de formes plutôt que de stocker des informations sur la couleur de chaque pixel dans un champ.

Cette propriété fait des images vectorielles comme SVG un excellent choix pour les icônes, les logos, les graphiques et autres graphiques numériques tout en utilisant très peu de bande passante pour chaque image.

En revanche, les formats raster sont constitués de pixels individuels et sont largement utilisés sur le Web en raison de leurs algorithmes de compression efficaces.

L'une des principales différences entre les formats raster et les formats vectoriels est que les formats raster ne peuvent pas être mis à l'échelle à partir de leur résolution d'origine sans avoir l'air pixélisés ou flous.

Le graphique ci-dessous montre comment la mise à l'échelle d'une image entraîne une pixellisation.

Source : Wikimédia Commons

Compression sans perte ou avec perte

Les images nécessitent une énorme quantité de données pour être affichées. Transférer toutes ces données sous leur forme brute, que ce soit sur Internet ou stockées sur votre disque dur, est très inefficace. Pour rendre les images plus efficaces, nous appliquons une "compression" à leurs données sous-jacentes.

La compression utilise des approches mathématiques et de correspondance de motifs pour réduire les données nécessaires au transfert d'une image.

Si vous avez déjà utilisé un acronyme, tel que "LOL" pour dire "rire aux éclats", alors vous avez effectué une forme de compression très simple.

Pour que la compression fonctionne, l'expéditeur et le destinataire doivent savoir que la compression est appliquée et quel algorithme de compression est utilisé.

L'expéditeur doit savoir comment compresser les données d'image, et le destinataire doit savoir comment inverser la compression ou « décompresser » pour récupérer les données d'image dans leur forme affichable.

Il existe de nombreuses méthodes différentes pour compresser les données, mais elles appartiennent toutes à l'une des deux catégories suivantes : sans perte ou avec perte. Les algorithmes de compression considérés comme "sans perte" préservent les données exactement telles qu'elles étaient avant qu'elles ne soient compressées.

Bien que les algorithmes sans perte soient efficaces, une efficacité encore plus grande peut être obtenue si les données d'image peuvent être pré-ajustées de manière à faciliter la compression.

Par exemple, s'il y a un tas de pixels imperceptiblement blanc cassé dans votre image, les changer en blanc parfait peut rendre l'image plus facile à compresser. L'utilisateur final qui visualise l'image ne remarquera jamais la différence.

Cependant, étant donné que les données changent, une partie des détails d'origine est « perdue » afin de bénéficier de la compression. C'est ce qu'on appelle la compression « avec perte ».

En bref, la compression sans perte signifie que la taille du fichier d'une image peut être réduite sans affecter sa qualité. À l'inverse, la compression avec perte élimine certaines informations (généralement redondantes) dans un fichier qui ne peuvent pas être récupérées.

Maintenant que nous avons couvert ces termes (qui apparaîtront au fur et à mesure que nous passerons en revue chaque type d'image), parlons davantage des types d'images les plus couramment utilisés sur le Web.

GIF (format d'échange graphique)

Description : Le Graphics Interchange Format (GIF) est un format d'image raster créé en 1987, et c'est le plus ancien format de fichier encore fréquemment utilisé aujourd'hui. Les images GIF utilisent un algorithme de compression connu sous le nom de codage LZW pour permettre un stockage facile et une meilleure qualité d'image compressée.

Les GIF sont presque toujours construits de manière à imposer une limite de 256 couleurs dans les images, même si les GIF peuvent techniquement prendre en charge davantage de variations de couleurs.

Aujourd'hui, le GIF est surtout connu comme format d'images animées. Une image animée combine plusieurs images (ou trames) en un seul fichier, et les trames sont lues successivement. L'une des raisons pour lesquelles les GIF sont populaires pour l'animation est qu'ils se font passer pour des images.

Vous pouvez télécharger un GIF animé sur une page sans avoir besoin d'un lecteur vidéo. Bien que les GIF soient couramment utilisés pour l'animation, ils ne constituent pas une option idéale en raison de la qualité de résolution inférieure et de la façon dont les images sont compressées (ce qui entraîne des fichiers de grande taille).

Idéal pour : les images simples, telles que les graphiques ou les logos, qui nécessitent une transparence simple.

Performances : les performances dépendent du nombre d'images dans le GIF. S'il y a trop de cadres, le GIF sera lent à charger sur une page Web en raison de sa taille de fichier plus importante. Lors de la création d'une image GIF, vous pouvez régler la résolution de chaque image et le nombre d'images affichées par seconde.

Naturellement, plus la valeur des images par seconde (FPS) est élevée et plus la résolution de chaque image est élevée, plus le fichier GIF sera volumineux. Essayez d'utiliser différentes valeurs FPS et différentes résolutions pour trouver la combinaison optimale pour votre cas d'utilisation.

En général, les GIF sont très difficiles à compresser car chaque séquence animée est un ensemble d'images indépendantes assemblées. Même si certaines parties de l'image sont identiques entre les images d'un GIF, il est difficile pour un algorithme de compression d'identifier ces parties.

Cette limitation est l'une des raisons pour lesquelles la taille de fichier d'une image GIF est généralement supérieure à la même séquence d'images dans une vidéo MP4.

Qualité : les GIF utilisent un algorithme de compression sans perte, mais la qualité de l'image se dégrade souvent en raison du préfiltrage (y compris le tramage, le serrage et la quantification des couleurs) lié à la conversion d'images 24 bits en couleur en GIF 8 bits palettisés.

Compatibilité du navigateur : Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari.

PNG (graphiques réseau portables)

Description : Portable Network Graphics (PNG) est un format de fichier qui utilise une compression sans perte. Les images avec des transitions nettes et de grandes zones de couleur unie (par exemple, des graphiques ou des images contenant du texte) peuvent être mieux compressées au format PNG que, par exemple, au format JPG.

Par conséquent, vous trouvez fréquemment des images PNG sous forme de captures d'écran et d'illustrations.

Les images PNG sont devenues la norme sur le Web car elles offrent une transparence d'image : vous pouvez placer une image PNG transparente sur une autre image et créer un effet de profondeur et de couches multiples.

Les PNG prennent également en charge l'alpha complet, ce qui signifie que l'image peut être semi-transparente. L'effet de semi-transparence permet par exemple d'avoir des ombres transparentes dans une image PNG.

Idéal pour : les graphiques, les illustrations, les bannières et les logos.

Performances : les fichiers PNG ont tendance à avoir des tailles de fichier plus importantes que les fichiers JPEG et SVG, ils sont donc moins adaptés au Web si vous avez besoin d'une image haute résolution avec une taille de fichier plus petite.

Qualité : les images PNG utilisent une compression sans perte et leur représentation au pixel près est idéale pour les graphiques à contraste élevé. Certains fichiers PNG contiennent jusqu'à 16 millions de couleurs en raison de leur profondeur de couleur de 24 bits.

Compatibilité du navigateur : Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari.

TIFF (format de fichier d'image balisé)

Description : Le format de fichier d'image balisé (TIFF) est un format d'image initialement créé pour stocker des photos numérisées. Le format est le plus populaire parmi les photographes, les éditeurs d'images et les éditeurs, principalement pour des raisons historiques.

Idéal pour : graphiques haute résolution et art graphique où la taille du fichier n'est pas un problème.

Performances : les fichiers TIFF peuvent être compressés ou non ; le format prend en charge plusieurs options de compression. Les images TIFF ne sont généralement pas prises en charge dans les navigateurs Web, donc les utiliser pour afficher des images sur le Web n'est pas une option.

Qualité : les fichiers TIFF sont de très haute qualité ; ils manquent généralement de compression ou utilisent une compression sans perte, ce qui les rend idéaux pour les photographies et les images numérisées.

Compatibilité des navigateurs : aucun navigateur ne prend actuellement en charge le format TIFF ; il est uniquement utilisé comme format de téléchargement.

JPG/JPEG (Groupe conjoint d'experts photographiques)

Description : Un fichier JPEG/JPG (Joint Photographic Expert Group) est le format le plus couramment utilisé pour les images compressées avec perte. Beaucoup se demandent quelle est la différence entre les fichiers JPG et JPEG, mais il n'y en a pas : les deux abréviations sont complètement interchangeables.

Caractéristique unique : une caractéristique précieuse du format JPG est le mode progressif . La plupart des images JPG sont créées en mode de base. Pour comprendre la différence entre les deux modes, imaginez la lecture d'une page de texte ligne par ligne. Vous commencez par le haut et continuez ligne par ligne vers le bas.

Si cela vous prend une minute pour lire la page, il vous faudra 30 secondes pour lire la moitié de la page.

Mode de référence

Avec une image JPG en mode de base , c'est ainsi que vous chargeriez le fichier JPG sur le Web, une ligne de pixels après l'autre, de haut en bas. Si votre image se charge lentement en raison d'une taille de fichier importante ou d'une connexion lente, les visiteurs de votre site Web ne verront qu'une partie de l'image jusqu'à ce qu'elle se charge complètement.

Mode progressif

En mode progressif , cependant, vous commencez par charger une version basse résolution de votre image, puis vous chargez une version haute résolution.

Les visiteurs de votre site Web verront immédiatement une image complète, même si elle est de qualité inférieure, et au fur et à mesure que l'image se charge, sa qualité sur la page s'améliorera.

Les images JPG progressives conviennent parfaitement aux sites Web rapides car elles minimisent le temps de peinture initial de la page.

Idéal pour : images fixes et photos, captures d'écran.

Performances : hautes performances compte tenu de la petite taille du fichier ; facile à télécharger et à télécharger.

Qualité : JPEG est un format avec perte, ce qui signifie que la qualité est perdue chaque fois que l'image est redimensionnée. Les images JPEG ont tendance à perdre un peu de netteté, de sorte qu'elles ne fonctionnent pas bien dans les graphiques et autres graphiques qui nécessitent un niveau élevé de netteté pour s'afficher correctement.

Cependant, les JPEG sont excellents lorsqu'ils sont utilisés pour des photographies et des images pleines de couleurs. JPEG fonctionne également bien pour les captures d'écran en raison de sa taille de fichier plus petite que PNG.

Compatibilité du navigateur : Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari.

« Quelle est la différence entre JPEGmini et MozJPEG ? » Le but de JPEGmini et de MozJPEG est de réduire la taille de l'image JPG sans effets visibles pour l'utilisateur final.

JPEGmini utilise un algorithme modifié à la main qui réduit la qualité de l'image dans des endroits où un humain ne le remarquerait probablement pas. Cet algorithme unique permet au programme de réduire considérablement la taille des images JPEG, parfois jusqu'à 80 %.

MozJPEG est un encodeur JPG développé par Mozilla qui utilise de nombreux ajustements automatisés pour obtenir une réduction importante de la taille du fichier JPG tout en maintenant la qualité de l'image.

JPEG2000

Description : Joint Photographic Expert Group 2000 (JPEG2000) est une norme parfois utilisée à la place de JPEG. JPEG2000 utilise une méthode d'encodage sophistiquée. Comparé à un fichier JPEG ordinaire, il offre de meilleures performances de compression sans perte significative de qualité d'image.

Idéal pour : Images fixes et photos.

Performances : hautes performances grâce à sa petite taille de fichier ; facile à télécharger et à télécharger.

Qualité : La qualité est supérieure à celle d'un fichier JPEG ordinaire car les méthodes de compression sont beaucoup plus efficaces.

Compatibilité du navigateur : le format n'est pas rétrocompatible et ne prend pas en charge les principaux navigateurs tels que Chrome, Firefox, Internet Explorer et Microsoft Edge. Le format n'est pris en charge que dans le navigateur Safari à partir de la version 5-13.1.

JPEGXR

Description : JPEG XR (Extended Range), également connu sous le nom de HD Photo, est un format de fichier développé par Microsoft. Le format est principalement utilisé sur les systèmes Windows et n'est généralement pas pris en charge sur d'autres plates-formes.

JPEG XR, par rapport à JPEG, ajoute des fonctionnalités telles que la compression sans perte, la prise en charge alpha complète (une option pour la semi-transparence) et une plus grande précision des couleurs.

Caractéristique unique : une capacité unique de JPEG XR est la prise en charge d'une structure en mosaïque. Une image est divisée en mosaïques, des régions indépendantes qui peuvent être décodées séparément, et chaque région peut être affichée sans qu'il soit nécessaire de décoder le reste de l'image.

Convient le mieux pour : Photos présentées aux utilisateurs d'Internet Explorer (versions 9 à 11) et de Microsoft Edge (jusqu'à la version 18).

Performances : hautes performances grâce à un algorithme de compression plus efficace. La prise en charge des mosaïques permet un rendu plus rapide dans le navigateur.

Qualité : JPEG XR peut utiliser à la fois la compression avec et sans perte, de sorte que la qualité d'une image varie en fonction de l'option de compression choisie. Généralement, la taille du fichier sera inférieure à celle d'une image JPG lors de l'utilisation de la compression avec perte et inférieure à celle d'un PNG lors de l'utilisation de la compression sans perte.

Compatibilité du navigateur : uniquement pris en charge sur IE 9-11 et Microsoft Edge jusqu'à la version 18. Les nouvelles versions d'Edge ont supprimé la prise en charge des images JPEG XR.

BMP (bitmap)

Description : Le format de fichier Bitmap (BMP) est un format d'image raster le plus populaire sur les systèmes Windows.

Mieux adapté pour : principalement utilisé pour les captures d'écran sur les machines Windows si la compression n'est pas possible pour une raison quelconque.

Performances : les images bitmap occupent une quantité importante d'espace de stockage, surtout si elles contiennent beaucoup de couleurs. Par conséquent, ils peuvent être lents à se charger lorsqu'ils sont utilisés sur un site Web, ce qui est l'une des raisons pour lesquelles nous ne recommandons pas d'utiliser des fichiers BMP sur le Web.

Qualité : les images bitmap offrent une qualité parfaite au pixel près (tout comme les PNG).

Compatibilité du navigateur : Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari.

SVG (graphiques vectoriels évolutifs)

Description : Un fichier SVG (Scalable Vector Graphics) est un format d'image vectorielle XML couramment utilisé sur le Web.

Les formats vectoriels sont beaucoup plus polyvalents et plus faciles à utiliser que leurs homologues raster comme GIF, PNG, JPG et BMP ; plus important encore, ils évoluent en douceur sans aucune perte de qualité.

Convient le mieux pour : les graphiques qui nécessitent une qualité constante lorsqu'ils sont mis à l'échelle, tels que les icônes, les bannières et les graphiques.

Performances : les images SVG ont une influence positive sur les performances des pages Web, car elles ont tendance à avoir des tailles de fichier beaucoup plus petites que les formats raster tels que PNG, BMP et TIFF.

Qualité : les images SVG conservent leur qualité, quelle que soit la façon dont elles sont transformées, grandes ou petites. Cette propriété est essentielle pour les graphiques tels que les logos d'entreprise qui sont utilisés à la fois comme favicons et comme images d'en-tête sur un site Web.

Compatibilité des navigateurs : presque tous les navigateurs prennent en charge le format SVG, à l'exception d'IE 6-8 (publié avant mars 2009) et du navigateur Android 2.1-2.3 (publié avant décembre 2010).

HEIC / HEIF (format de fichier d'image à haute efficacité)

Description : Le format de fichier d'image à haute efficacité (HEIC/HEIF) est un format d'image développé par le Moving Picture Experts Group. Il s'agit d'un format d'image relativement nouveau récemment introduit par Apple comme format de stockage de photos sur l'iPhone et l'iPad.

L'une des raisons pour lesquelles Apple a choisi ce format pour ses appareils mobiles est la possibilité de stocker des séquences d'images (par exemple, une Live Photo ou une rafale de photos) dans un seul fichier.

Dans de telles situations, les fichiers HEIC stockent la différence entre les images plutôt que de stocker une image complète, ce qui réduit considérablement la taille du fichier.

Idéal pour : Photographie, images animées.

Performances : les fichiers HEIC ont une taille de fichier supérieure à celle des fichiers JPEG car le format HEIC utilise une compression sans perte. Cependant, les images HEIC ont une taille de fichier plus petite que PNG, un format sans perte comparable.

Qualité : très élevée : les images HEIC peuvent stocker plus du double de détails d'une image JPEG.

Compatibilité des navigateurs : aucun navigateur moderne ne prend en charge le format HEIC.

"Est-ce que HEIC est meilleur que JPEG?" HEIC peut stocker plus de deux fois le détail d'une image JPEG tout en gardant une taille de fichier faible, ce qui les rend beaucoup plus performants et de meilleure qualité que le format JPEG.

La plus petite taille de fichier HEIC est particulièrement utile pour aider à réduire les coûts de stockage dans le cloud, à condition que vous puissiez convertir les fichiers HEIC vers d'autres formats lors de la diffusion sur le Web. Le format HEIC n'est actuellement pas largement utilisé sur le Web en raison d'un manque de prise en charge des navigateurs.

Cependant, certaines solutions CDN d'image convertissent automatiquement un fichier HEIC dans un format pris en charge par le navigateur.

"Comment puis-je convertir mes images HEIC au format JPEG?" Vous pouvez le faire en utilisant un outil en ligne tel que HEIC vers JPG .

"Ai-je besoin d'une licence pour utiliser HEIC?" Aucune licence n'est requise pour utiliser le format HEIC de manière non commerciale.

WEBP (format d'image Web)

Description : Le Web Picture Format (WebP) est un format d'image développé par Google. Il peut utiliser une compression avec ou sans perte, ce qui vous permet de choisir entre des tailles de fichiers plus petites et une qualité supérieure.

WebP vise à créer des images plus petites et plus belles qui augmentent généralement les temps de chargement d'une page Web. WebP prend également en charge l'animation et les boucles, similaires aux GIF. Le format gagne en popularité et en soutien.

Idéal pour : Photographies, bannières et images animées.

Performances : bonnes lors de l'utilisation de la compression.

Qualité : généralement bonne, en particulier lors de l'utilisation d'une compression sans perte.

Compatibilité des navigateurs : depuis 2018, WebP bénéficie d'une large prise en charge sur tous les principaux navigateurs Web, à l'exception d'IE, et Apple a annoncé la prise en charge de WebP dans les prochaines versions de Safari. Nous vous recommandons d'utiliser les alternatives JPEG ou PNG lors de l'ajout d'images WebP à votre site Web.

"Comment puis-je empêcher Google Chrome d'enregistrer mes images en tant que WebP ?" Par défaut, Google Chrome enregistre les images Web au format WebP. Si vous êtes sur un Mac, vous pouvez exporter une image WebP vers un JPG en utilisant l'application Aperçu par défaut du système.

Sous Windows, vous pouvez télécharger une extension telle que Save Image as PNG . Une autre option consiste à utiliser imgix pour que les images de votre site Web soient diffusées au format WebP lorsque vos clients utilisent Chrome ou Firefox et au format PJPG (Progressive JPG) pour les autres navigateurs.

AVIF (format de fichier image AV1)

Description : Le format AVIF est le format d'image basé sur le format d'encodage vidéo AV1. AV1 a été créé et est développé par l' Alliance for Open Media , un consortium formé par Mozilla, Google, Cisco, Netflix, Amazon et d'autres sociétés.

L'idée principale derrière AVIF est de tirer parti des algorithmes de compression développés à l'origine pour la vidéo dans un format d'image.

Netflix pense qu'AVIF a un potentiel pour les images dans ses applications en raison de la qualité supérieure que ce format offre tout en maintenant une taille d'image faible.

Idéal pour : les images contenant des détails spécifiques qui doivent être préservés, par exemple, les dégradés, le texte et les graphiques dans les affiches de films.

Performances : excellentes lors de l'utilisation de la compression.

Qualité : Excellente lors de l'utilisation de la compression.

Compatibilité du navigateur : Le format AVIF est pris en charge dans Google Chrome à partir de la version 85. Firefox prend en charge AVIF depuis la version 77, mais la fonctionnalité AVIF est désactivée par défaut et doit être activée dans les paramètres. Les autres navigateurs ne prennent actuellement pas en charge le format AVIF.

Quel format d'image dois-je choisir ?

Dans cette section, nous fournissons des recommandations pour les formats d'image en fonction de votre cas d'utilisation spécifique.

Photographies : pour les photographies sur un site Web, nous recommandons JPG en raison de sa taille de fichier plus petite. Alors que d'autres formats offrent des fonctionnalités supplémentaires telles que la transparence, celles-ci ne sont pas nécessaires pour les photos.

Une option encore meilleure consiste à utiliser un service intelligent qui convertit les images statiques au format optimal en fonction du navigateur utilisé par vos utilisateurs.

Par exemple, imgix propose des images au format WebP pour ceux qui utilisent Chrome et Firefox, et au format PJPG pour ceux qui utilisent Internet Explorer, Safari et Microsoft Edge.

Dessins au trait et dessins animés : pour les dessins animés et les illustrations, nous vous recommandons également d'utiliser le format JPG pour les mêmes raisons : les images JPG ont des tailles de fichier plus petites et l'illustration n'a généralement pas besoin de transparence.

Éléments de conception graphique : Notre recommandation pour les éléments de conception graphique est double :

• Utilisez SVG dans la mesure du possible en raison de sa petite taille de fichier et de son redimensionnement facile sans perte de qualité.

• Sinon, utilisez PNG car sa compression sans perte fonctionne bien pour les images avec des transitions nettes et de grandes zones de couleurs unies.

Icônes : Nous recommandons le format SVG pour les icônes. Le format produit de petits fichiers et vous donne la possibilité de redimensionner votre image sans perte de qualité.

Il est préférable que les icônes soient créées au format SVG dès le départ, car la conversion d'une image PNG ou GIF en un format vectoriel comme SVG peut ne pas être possible après coup.

Logos de sites Web : pour les logos de sites Web, SVG gagne à nouveau. Ce format utilise moins de bande passante que les autres formats et peut être facilement redimensionné. Comme pour les icônes, essayez de créer votre logo en SVG.

Images animées : Notre recommandation pour les images animées est le format MP4. C'est un format vidéo plutôt qu'un format d'image, et par rapport à un GIF, une animation MP4 fait environ un dixième de la taille.

Utilisez la balise <video> , définissez les options de lecture automatique et de boucle, et définissez l'attribut muted pour reproduire le comportement d'un GIF avec un fichier MP4. Lorsque vous utilisez imgix, nous convertissons automatiquement vos fichiers GIF en MP4 (remarque : la prise en charge des GIF animés est une fonctionnalité imgix premium).

Quels formats d'image peuvent être servis avec imgix ?

Les types de fichiers peuvent interagir avec imgix en tant que formats d'entrée ou formats de sortie .

Un format d'entrée est un fichier qui sera accepté par les paramètres d'imgix. Vous pouvez transformer des images acceptées avec un format d'entrée en utilisant l'API d'imgix ( w=600 , par exemple).

Un format de sortie est un type de fichier dans lequel imgix peut transformer n'importe quel format d'entrée. Par exemple, vous pouvez transformer un jpg en png en utilisant fm=png.

Tout format d'entrée non pris en charge sera diffusé sans aucune transformation .

* Voir les notes spécifiques au fichier ci-dessous

Servir des actifs non pris en charge avec imgix

Bien qu'imgix soit optimisé pour servir des images, il est possible de passer par d'autres actifs statiques tels que les fichiers JavaScript et CSS de votre Source. Cela vous donnera l'avantage de servir d'autres actifs via notre CDN distribué dans le monde entier.

Cependant, nous ne garantissons pas le comportement de ces actifs - les paramètres de rendu (en particulier les paramètres par défaut) peuvent affecter la sortie et peuvent accidentellement générer une erreur de rendu.

Lors de la diffusion de types de fichiers non pris en charge, il est important de ne pas appliquer de paramètres à l'URL. Bien qu'il n'y ait généralement aucun problème avec l'utilisation de paramètres sur des types d'entrée non pris en charge, il existe de rares cas où un paramètre peut provoquer un comportement inattendu sur certains types de fichiers.

Si vous avez une source configurée avec des paramètres par défaut qui causent des problèmes avec des ressources d'entrée non prises en charge, vous pouvez contourner ce problème en :

• Servir ces actifs sans utiliser imgix ou

• Utilisez une source distincte pour servir ces actifs

Notes spécifiques au fichier

APNG

Les PNG animés seront rendus sous forme d'APNG statique. Pour les animations, veuillez plutôt utiliser des GIF animés (fonctionnalité premium).

PSE

Uniquement pris en charge en tant que pass-through, pas en tant que type d'entrée.

HEIC

HEIC ne fonctionnera que si l' image d'origine a été créée à partir d'un appareil iOS

SVG

Les SVG peuvent être activés en tant que paramètre d'entrée en contactant [email protected] . S'ils ne sont pas encore activés pour votre compte, nous pouvons les transmettre tant qu'ils ont une déclaration XML correcte en haut du fichier.

Notez qu'il existe une vulnérabilité de sécurité pour les SVG qui permettent l'exécution de javascript en ligne lorsqu'ils sont servis via un navigateur Web.

En activant SVG comme paramètre d'entrée, vous pouvez empêcher l'exécution de ce code en autorisant imgix à pixelliser et à servir le fichier. Vous pouvez le faire en appliquant n'importe quel paramètre par défaut dans vos paramètres Source, comme auto=compress.

Une autre façon de prévenir les vulnérabilités liées aux SVG consiste à empêcher les SVG téléchargés par l'utilisateur, ce qui empêche les SVG non autorisés d'être servis à partir de votre source.

Il n'est pas recommandé d'utiliser l'encodage Base64 dans vos fichiers SVG. Le morceau Base64 ne sera pas traité par notre pile de rendu et ne sera pas affiché dans le rendu de sortie.

WEBP

Le WebP animé n'est pas encore pris en charge comme format d'entrée.

WEBM

La transparence est perdue lors de la conversion d'un GIF en WEBM. Comme alternative, vous pouvez convertir le GIF en APNG pour prendre en charge la transparence.

Foire aux questions (FAQ)

"Quelles sont la bonne taille et la bonne résolution d'une image sur un site Web ?" La réponse dépend des appareils que les visiteurs de votre site Web utilisent et de la façon dont vous utilisez chaque image.

Nous vous recommandons d'utiliser une taille d'image optimisée pour la taille de l'écran de chaque appareil afin que les images conservent une qualité élevée tout en consommant le moins de bande passante possible.

Par exemple, un iPhone 11 Pro Max a une résolution d'écran de 1242x2688 pixels. Lorsque vous tenez compte du ratio de pixels de l'appareil (DPR) , vous devez envisager une image 3 fois plus grande que ces dimensions si votre image occupe toute la largeur de votre site Web dans la fenêtre du navigateur.

Rendre l'image trop grande consommerait inutilement de la bande passante supplémentaire, tandis que l'utilisation d'une taille de fichier plus petite pixelisera l'image et lui donnera une qualité inférieure sur la page. Le même principe s'applique proportionnellement aux images uniques ou multiples qui occupent moins que la largeur totale de la fenêtre.

Dans un navigateur, l'attribut srcset de l'élément <img> est un moyen pratique d'afficher différentes tailles d'image en fonction de la taille de l'écran. Consultez le guide Images réactives avec srcset pour plus de détails sur son utilité et son fonctionnement.

Résumé

Dans cet article, nous avons couvert de nombreux formats d'image courants, y compris leurs performances et leur compatibilité avec les navigateurs. Gardez à l'esprit qu'il n'existe pas de format unique adapté à chaque image sur le Web.

Pour choisir un format d'image optimal, réfléchissez à la façon dont vous utiliserez chaque image, si vous devrez la montrer aux utilisateurs dans différents formats et quels navigateurs vous prévoyez de prendre en charge. Pour convertir automatiquement les formats d'image pour des performances optimales, créez un compte gratuit sur imgix dès aujourd'hui .