JPG, PNG, GIF, WebP, AVIF, SVG… Derrière ces extensions se cachent des façons très différentes de stocker une image. Choisir le mauvais format peut produire un logo flou, une photo inutilement lourde ou une transparence qui disparaît. Pour s'y retrouver, il suffit de comprendre quelques notions de base, puis de connaître le profil de chaque format. ## Les notions à connaître ### Matriciel ou vectoriel Une **image matricielle** (on dit aussi *bitmap* ou *raster*) est une grille de pixels, chacun ayant sa couleur. C'est le cas des photos et de la grande majorité des images que vous manipulez. Sa qualité dépend de son nombre de pixels : agrandie au-delà de sa taille, elle devient floue ou pixelisée. JPG, PNG, GIF, WebP et AVIF sont des formats matriciels. Une **image vectorielle** est décrite par des formes géométriques : lignes, courbes, cercles, aplats de couleur. Le logiciel recalcule l'image à chaque affichage, quelle que soit la taille. Elle reste donc parfaitement nette, du favicon au panneau publicitaire. Le SVG est le principal format vectoriel du web. En revanche, une photo ne peut pas être représentée efficacement en vectoriel. ### Avec ou sans pertes Une compression **sans perte** réduit le poids du fichier en encodant plus efficacement les données, mais restitue exactement chaque pixel à l'ouverture. Comme une archive ZIP, elle ne supprime rien. Une compression **avec pertes** va plus loin : elle supprime des informations que l'œil humain perçoit peu, comme les très fines variations de couleur. Les fichiers sont beaucoup plus légers, mais l'image n'est plus strictement identique à l'original. Et chaque nouvel enregistrement avec pertes peut ajouter une légère dégradation. ### Transparence Certains formats peuvent stocker, pour chaque pixel, un niveau de transparence (on parle de **canal alpha**). C'est indispensable pour un logo posé sur un fond coloré ou un produit détouré. D'autres formats ne connaissent que des pixels opaques. ### Profondeur de couleur La plupart des images utilisent 8 bits par canal (rouge, vert, bleu), soit plus de 16 millions de couleurs. Certains formats se limitent à 256 couleurs ; d'autres vont au-delà de 8 bits, utile pour les dégradés subtils et le HDR. ## JPG (ou JPEG) **Le format historique de la photographie.** Créé au début des années 1990, le JPEG est le format d'image le plus répandu au monde. - **Compression** : avec pertes, réglable par un paramètre de qualité. - **Transparence** : non. - **Animation** : non. - **Points forts** : excellent pour les photos, compatible avec absolument tous les logiciels, appareils et services. - **Points faibles** : crée des artefacts (blocs, halos) autour du texte et des contours nets ; se dégrade à chaque réenregistrement ; supplanté en efficacité par les formats modernes. **À utiliser pour** : les photos à envoyer, imprimer ou partager largement ; les photos d'un site en solution de repli. ## PNG **Le format sans perte polyvalent.** Le PNG a été conçu dans les années 1990 comme une alternative libre au GIF. - **Compression** : sans perte. - **Transparence** : oui, avec niveaux progressifs. - **Animation** : une variante, l'APNG, existe mais reste peu utilisée. - **Points forts** : rendu parfait des contours, du texte et des aplats ; transparence de qualité ; idéal comme format de travail. - **Points faibles** : fichiers lourds pour les photos. **À utiliser pour** : les captures d'écran, les logos et icônes matriciels, les schémas, les images avec transparence, les fichiers destinés à être retouchés. ## GIF **Le vétéran de l'animation.** Apparu à la fin des années 1980, le GIF a survécu grâce à sa capacité à animer des images. - **Compression** : sans perte, mais limitée à une palette de 256 couleurs maximum. - **Transparence** : oui, mais tout ou rien (un pixel est soit opaque, soit totalement transparent), ce qui crée des bords crénelés. - **Animation** : oui. - **Points forts** : compatibilité universelle, animation simple. - **Points faibles** : couleurs limitées, photos de mauvaise qualité, animations très lourdes. **À utiliser pour** : la compatibilité avec de vieux systèmes. Sur un site, une courte vidéo ou un WebP animé est généralement plus léger et plus beau. ## WebP **Le format moderne polyvalent.** Proposé par Google au début des années 2010, le WebP a été pensé pour remplacer à lui seul JPG, PNG et GIF sur le web. - **Compression** : avec ou sans pertes, au choix. - **Transparence** : oui, même en mode avec pertes. - **Animation** : oui. - **Points forts** : fichiers généralement plus légers que JPG et PNG à qualité comparable ; pris en charge par tous les navigateurs majeurs actuels. - **Points faibles** : prise en charge inégale par certains logiciels anciens hors navigateur. **À utiliser pour** : la quasi-totalité des images d'un site web, photos comme graphismes. ## AVIF **Le plus récent et le plus efficace.** Dérivé du codec vidéo AV1, ouvert et sans redevance, l'AVIF représente la génération suivante. - **Compression** : avec ou sans pertes, généralement plus efficace que le WebP sur les photos. - **Transparence** : oui. - **Animation** : oui. - **Couleurs** : au-delà de 8 bits possible, compatible HDR. - **Points forts** : poids réduit, artefacts discrets même à forte compression. - **Points faibles** : encodage lent et gourmand en calcul ; lu par les navigateurs récents (Chrome, Edge, Firefox, Safari 16.4 et suivants) mais pas par les plus anciens ; prise en charge encore partielle hors navigateur. **À utiliser pour** : les photos d'un site, de préférence avec une solution de repli en WebP ou JPG. ## SVG **Le vectoriel du web.** Le SVG est un format texte, fondé sur le XML, qui décrit l'image par des formes. - **Compression** : le fichier est du texte, souvent très léger pour des formes simples ; il peut être compressé lors de la transmission. - **Transparence** : oui, naturellement. - **Animation** : possible via CSS ou script. - **Points forts** : net à toutes les tailles, très léger pour les logos et icônes, modifiable par code (couleur, taille). - **Points faibles** : inadapté aux photos ; un SVG complexe peut devenir lourd ; un fichier SVG pouvant contenir du code, il faut se méfier des SVG d'origine inconnue intégrés sur un site. **À utiliser pour** : les logos, icônes, pictogrammes, illustrations en aplats, graphiques. ## Le tableau récapitulatif | Format | Type | Pertes | Transparence | Animation | Usage idéal | |---|---|---|---|---|---| | JPG | Matriciel | Avec | Non | Non | Photos à partager partout | | PNG | Matriciel | Sans | Oui | Rare (APNG) | Captures, logos, retouche | | GIF | Matriciel | Sans, 256 couleurs | Tout ou rien | Oui | Compatibilité ancienne | | WebP | Matriciel | Avec ou sans | Oui | Oui | Images de sites web | | AVIF | Matriciel | Avec ou sans | Oui | Oui | Photos de sites web | | SVG | Vectoriel | Non applicable | Oui | Oui | Logos, icônes | ## Comment choisir en pratique Posez-vous trois questions. 1. **L'image est-elle une photo ou un graphisme ?** Une photo appelle un format avec pertes (JPG, WebP, AVIF). Un graphisme simple appelle le SVG s'il est vectoriel, sinon un PNG ou un WebP. 2. **Où sera-t-elle utilisée ?** Sur un site web, privilégiez WebP et AVIF. Pour un envoi, une impression ou un logiciel quelconque, le JPG et le PNG restent les plus sûrs. 3. **A-t-elle besoin de transparence ?** Si oui, écartez le JPG. Et une règle d'or : **conservez toujours un original de bonne qualité** (le fichier de l'appareil photo, un PNG ou le fichier source du logiciel de création). Les formats de diffusion se déclinent à partir de lui, autant de fois que nécessaire. ## En résumé - **Matriciel ou vectoriel** : les photos sont matricielles, les logos idéalement vectoriels (SVG). - **Avec ou sans pertes** : les pertes allègent fortement les photos, le sans-perte préserve les graphismes et les fichiers de travail. - **JPG** reste le format universel des photos, **PNG** celui des captures et graphismes avec transparence. - **GIF** est dépassé : préférez une vidéo ou un WebP animé. - **WebP** est le choix polyvalent pour le web, lu par tous les navigateurs majeurs actuels ; **AVIF** compresse encore mieux mais n'est lu que par les navigateurs récents. - **Gardez un original** et déclinez les formats selon l'usage.