Entre jpg, png, webp, avif, svg et les formats 4 : 3 ou 16 : 9, le mauvais choix peut coûter en qualité, en poids et en visibilité: l’objectif est de repartir avec une méthode simple, des recommandations par cas d’usage et des repères concrets.
- Un « format » mélange souvent trois choses différentes: extension (jpg, png…), dimensions en pixels et rapport d’aspect (4 : 3, 16 : 9).
- Photos: jpeg/jpg ou, si possible, webp/avif pour réduire le poids du fichier et améliorer le lcp.
- Transparence et graphismes nets: png (alpha) ou svg (vectoriel) selon le besoin de redimensionnement.
- Web: servir la bonne taille avec responsive images (srcset, picture) et éviter d’envoyer 2000 px si l’image s’affiche en 800 px.
- Animation: gif pour le très simple, apng ou formats modernes quand la qualité et le poids comptent.
Comprendre ce que recouvre vraiment le mot format d’image
Dans les demandes du quotidien, « quel format d’image choisir ? » recouvre en réalité trois décisions distinctes. Les confondre mène à des fichiers trop lourds, des visuels flous, ou une diffusion ratée sur le web, les réseaux sociaux ou l’impression.
1) Le format de fichier (l’extension: jpg, jpeg, png, gif, webp, avif, svg, heic, tiff, bmp) est un standard technique qui définit comment les données visuelles sont codées et compressées pour le stockage et l’affichage. C’est ici que se jouent la compression avec perte (typique du jpeg) ou la compression sans perte (typique du png), la gestion de la transparence (canal alpha), l’animation (gif, apng), et la conservation de certaines informations comme les métadonnées exif ou un profil icc.
2) Les dimensions en pixels (ex: 800 × 600) déterminent la netteté à l’écran. Une règle opérationnelle: inutile d’envoyer une image de 2000 px si elle s’affiche en 800 px. On paie ce surplus en poids du fichier, donc en temps de chargement, donc en performance.
3) Le rapport d’aspect (ex: 4 : 3, 16 : 9) décrit la forme du cadre. Il ne dit rien, à lui seul, sur la qualité: un 16 : 9 peut être très net ou très compressé. En revanche, il dicte le cadrage, les recadrages nécessaires et la cohérence d’une série d’images.
Pour décider vite sans sacrifier la qualité ni la performance, gardez une grille simple:
- Nature du contenu: photo, capture d’écran, logo, illustration, texte fin, aplats.
- Contraintes de diffusion: web (compatibilité navigateurs), réseaux sociaux (recompression), impression (chaîne graphique).
- Exigences techniques: transparence (alpha), animation, retouches futures, conservation des exif et du profil icc.
- Objectif performance: poids du fichier, nombre d’images, et impact sur les core web vitals, notamment le lcp.
Une fois ce cadre posé, une question simplifie tout le reste: matriciel ou vectoriel ? Matriciel ou vectoriel: le premier choix qui simplifie tout
Matriciel ou vectoriel: le premier choix qui simplifie tout
Avant de débattre entre jpeg, png, webp ou avif, il faut trancher la nature même de l’image: matricielle (raster) ou vectorielle. C’est le choix qui conditionne la netteté à l’agrandissement, le poids du fichier, et la facilité de mise à l’échelle sur des écrans très variés.
Image matricielle: elle est composée de pixels. C’est le cas des photos, textures, captures d’écran, images issues d’un appareil photo ou d’un smartphone. Les formats typiques: jpg/jpeg, png, gif, webp, avif, heic, tiff, bmp. À l’agrandissement, on peut perdre en netteté si la résolution en pixels est insuffisante.
Image vectorielle: elle est décrite par des formes (courbes, segments) et se redimensionne sans perte de qualité. Les formats typiques: svg (web), et des formats de création comme ai. C’est idéal pour un logo, des icônes, des schémas, des pictogrammes et des illustrations « propres ».
Conséquences concrètes:
- Logo: en svg, il reste net sur mobile, écran 4k, et impression, sans multiplier les variantes.
- Photo de couverture: en jpeg/webp/avif, car le rendu photographique supporte bien la compression avec perte (selon réglage) et le poids peut être maîtrisé.
- Interface avec texte fin: souvent png (sans perte) ou svg si l’élément est vectorisable, pour éviter les artefacts.
Si votre cas d’usage est « photo ou capture », vous restez côté matriciel et vous choisissez une extension selon la transparence, la compatibilité et la compression. Si votre cas d’usage est « dessin net, identitaire, réutilisable », le vectoriel s’impose. Panorama des extensions: forces, limites et usages recommandés
Panorama des extensions: forces, limites et usages recommandés
Plutôt qu’une liste encyclopédique, l’objectif est une lecture orientée décision: quel format pour quel usage, avec quelles contraintes de diffusion.
| Extension | Type | Points forts | Limites typiques | Usages recommandés |
|---|---|---|---|---|
| jpg / jpeg | matriciel | compression efficace pour la photo, compatibilité très large | compression avec perte, pas de transparence alpha | photos web, bannières photo, catalogues en ligne |
| png | matriciel | compression sans perte, transparence (alpha), bords nets | poids élevé sur les photos | logos sur fond transparent, UI, captures d’écran |
| gif | matriciel | animation simple, compatibilité historique | couleurs indexées sur 8 bits, souvent lourd | animations courtes et très simples |
| webp | matriciel | compression efficace, bon compromis qualité/poids, bénéfice vitesse et seo | compatibilité plus récente que jpeg/png, nécessite parfois un repli | images web polyvalentes (photos et graphismes) |
| avif | matriciel | compression encore plus efficace, open-source et sans licence commerciale | compatibilité plus récente, pipeline de génération à maîtriser | web orienté performance quand support et outillage sont prêts |
| svg | vectoriel | redimensionnement sans perte, souvent léger | pas adapté aux photos | logos, icônes, schémas, illustrations vectorielles |
| heic | matriciel | courant sur mobile, efficace au stockage | compatibilité web et outils variable selon contexte | archivage mobile, échanges selon écosystèmes |
| tiff | matriciel | format de production, utile en chaîne graphique et impression | fichiers lourds, peu adapté au web | pré-presse, retouche, livraison print |
| bmp | matriciel | simple, peu compressé | généralement non recommandé sur le web, compatibilité et poids défavorables | cas spécifiques hors web, à éviter en diffusion |
Deux points souvent négligés dans les flux de diffusion:
- Métadonnées exif: utiles pour l’archivage (appareil, date, paramètres), mais parfois superflues en publication. Les conserver ou les supprimer peut influencer le poids et la confidentialité.
- Profil icc: il stabilise la couleur entre écrans et imprimantes. En web, un profil mal géré peut produire des écarts; en impression, il devient central.
Et pour l’animation, le duo gif/png ne raconte pas toute l’histoire: apng (animated portable network graphics) est une extension de png ajoutant le support des images animées, introduite initialement par Mozilla. Elle est citée pour des animations simples (indicateurs d’activité, éléments d’interface) et est prise en charge pour la création d’autocollants animés dans Messages sur iOS.
Maintenant que les forces sont posées, la comparaison la plus fréquente reste un classique: png vs jpg. PNG vs JPG: qualité, poids, transparence, quel gagnant selon le contenu
PNG vs JPG: qualité, poids, transparence, quel gagnant selon le contenu
La question « quelle est la meilleure qualité entre png et jpg ? » n’a pas une réponse unique, parce que png et jpeg ne visent pas le même compromis.
JPEG (jpg/jpeg) est pensé pour la photo en ligne. Il utilise une compression avec perte: on élimine une partie de l’information visuelle pour alléger le fichier. Bien réglé, le résultat est très correct pour des scènes naturelles (peau, ciel, textures). Mal réglé, on voit apparaître des artefacts (blocs, bavures, halos), surtout autour des contrastes et du texte incrusté.
PNG utilise une compression sans perte: l’image se reconstruit sans dégradation. C’est ce qui le rend fiable pour:
- les captures d’écran (texte fin, UI),
- les aplats de couleur et formes nettes,
- la transparence via un canal alpha (dégradés de transparence, bords doux).
En revanche, sur une photo, un png peut devenir inutilement lourd: on conserve une précision que l’œil n’exige pas toujours, et le poids du fichier grimpe.
Règles rapides, orientées usage:
- Photo: jpg/jpeg par défaut; webp ou avif si votre chaîne web le permet, pour réduire le poids sans sacrifier la perception de qualité.
- Logo sur fond transparent: png si vous avez besoin d’un bitmap, sinon svg (plus propre et redimensionnable).
- Image avec texte fin (interface, schéma en bitmap): png, ou svg si vectorisable, pour éviter les artefacts du jpeg.
- Transparence obligatoire: png/webp/avif selon compatibilité; jpeg ne gère pas l’alpha.
Un détail qui change la donne en production: le « meilleur format » dépend aussi de la diffusion. Une plateforme sociale peut recomprimer vos images; un site e-commerce peut privilégier la vitesse; l’impression exige une autre logique (ppi/dpi, profil icc). Cette logique de diffusion commence… par le cadre lui-même: 4 : 3 ou 16 : 9. 4 : 3 ou 16 : 9: quel rapport d’aspect choisir et pourquoi
4 : 3 ou 16 : 9: quel rapport d’aspect choisir et pourquoi
Le rapport d’aspect décrit la proportion largeur/hauteur. Choisir 4 : 3 ou 16 : 9, c’est choisir un cadre narratif: ce qui entre dans l’image, ce qui est coupé, et la manière dont l’œil lit la scène selon les écrans.
16 : 9 est associé aux usages « paysage »: vidéo, hero images, bannières, présentations orientées écran large. Il favorise les lignes d’horizon, les scènes larges, et laisse de l’espace pour du texte latéral dans certains layouts.
4 : 3 est plus proche d’un cadre photo classique et de nombreux usages de présentation. Il peut mieux servir un portrait contextualisé (personne + environnement) ou des images où la hauteur compte (produit debout, affiche, document).
Méthode de décision en deux étapes:
- Étape 1: partir du support principal. Sur un site, regardez le gabarit réel: carte produit, article, bannière, galerie. Sur une diffusion vidéo, le 16 : 9 s’impose souvent.
- Étape 2: prévoir une zone de recadrage. Si l’image doit vivre sur mobile et desktop, anticipez les recadrages automatiques: gardez le sujet dans une zone centrale, et laissez des marges « sacrifiables ».
Ce choix n’est pas seulement esthétique: il influence le poids du fichier et la performance. Un 16 : 9 très large, exporté trop grand, devient vite coûteux. À l’inverse, un 4 : 3 recadré à répétition peut multiplier les variantes si vous ne rationalisez pas. La suite logique est donc la diffusion web: comment choisir un format qui charge vite, respecte le rendu, et soutient le seo. Web et seo: choisir un format qui charge vite sans perdre en qualité
Web et seo: choisir un format qui charge vite sans perdre en qualité
Sur le web, le format d’image n’est pas qu’une histoire de rendu: c’est un sujet de seo et d’expérience utilisateur, via les core web vitals. Une image trop lourde peut dégrader le lcp (largest contentful paint) si elle constitue l’élément principal au-dessus de la ligne de flottaison.
Repères opérationnels issus des recommandations courantes: viser des images qui ne dépassent pas 100 Ko quand c’est réaliste pour favoriser un chargement rapide, et surtout adapter les dimensions à l’affichage. L’exemple typique reste parlant: ne pas envoyer 2000 px si l’image s’affiche en 800 px.
Stratégie de formats, orientée compatibilité:
- Priorité performance: servir avif ou webp quand possible, car leur compression est présentée comme plus efficace que les anciens formats, avec un bénéfice sur la vitesse et donc le seo.
- Repli: fournir une version jpeg (photos) ou png (transparence) pour les environnements moins compatibles.
- Éviter bmp en diffusion web: généralement non recommandé, et il existe de meilleurs formats.
La performance ne dépend pas que de l’extension. Trois leviers font souvent plus que le débat png vs jpg:
- Redimensionnement côté serveur: générer des tailles adaptées (miniature, mobile, desktop) au lieu d’un original unique.
- Compression: ajuster la qualité (pour le jpeg) ou optimiser les png; des outils comme TinyPNG ou Kraken.io sont souvent cités pour réduire le poids.
- Responsive images: servir la bonne variante selon l’écran avec srcset et, si nécessaire, picture pour gérer les formats (avif/webp + fallback).
Exemple de logique HTML (principe): un picture propose avif, puis webp, puis jpeg; un img utilise srcset pour aligner la taille sur le viewport. Résultat: moins de données transférées, un lcp plus stable, et un rendu cohérent.
Une fois ces principes en place, il reste à les appliquer sans y passer dix minutes à chaque export. Cas d’usage: la checklist pour choisir en moins d’une minute
Cas d’usage: la checklist pour choisir en moins d’une minute
Objectif: décider en 60 secondes, en séparant format de fichier, rapport d’aspect et contrainte de diffusion.
| Cas d’usage | Format conseillé | Réglages rapides | Points d’attention |
|---|---|---|---|
| photo produit (web) | webp ou avif, repli jpg/jpeg | exporter à la taille d’affichage; compresser; variantes via srcset | surveiller le poids du fichier (cible 100 Ko quand possible); exif à limiter si inutile |
| portrait (web) | webp/avif, repli jpg/jpeg | recadrage cohérent; 4 : 3 ou 16 : 9 selon mise en page | éviter le surdimensionnement; garder un rendu peau naturel (compression modérée) |
| capture d’écran | png (ou webp sans perte si pipeline) | dimension exacte; pas de rééchantillonnage agressif | texte fin: le jpg crée vite des artefacts |
| logo | svg (sinon png) | vectoriser; simplifier les formes | transparence (alpha) si bitmap; cohérence des couleurs, profil icc si nécessaire |
| icônes et pictos | svg | optimiser le svg; éviter les détails inutiles | tests d’affichage; attention aux styles embarqués |
| illustration avec aplats | svg ou png | si bitmap, png sans perte; sinon svg | le jpeg peut dégrader les bords nets |
| animation courte | gif ou apng | durée courte; dimensions raisonnables | gif: couleurs indexées 8 bits; apng: meilleure profondeur de couleur, utile pour UI |
| image avec texte | png ou svg; repli webp selon compatibilité | éviter la compression avec perte | lisibilité d’abord; attention aux halos en jpeg |
| emailing | jpg/jpeg ou png selon contenu | poids réduit; dimensions adaptées | compatibilité prioritaire; éviter les formats trop récents si non maîtrisés |
| impression | tiff (production), parfois jpeg selon flux | préparer la résolution selon usage; gérer le profil icc | ne pas confondre pixels et dpi; chaîne graphique et contrôle couleur |
Deux rappels qui évitent la plupart des erreurs:
- Résolution (pixels) sert l’écran; ppi et dpi deviennent pertinents surtout pour l’impression et la chaîne de production.
- Le meilleur format ne compense pas une mauvaise stratégie de variantes: sur le web, srcset et des tailles adaptées font souvent gagner plus que de changer uniquement d’extension.
Une fois la checklist appliquée, il reste des cas où l’on doit arbitrer. C’est là que les erreurs courantes coûtent cher, en poids ou en rendu. Erreurs courantes et compromis: quand il faut arbitrer
Erreurs courantes et compromis: quand il faut arbitrer
Erreur 1: utiliser png pour des photos. Le png est sans perte et excellent pour la transparence et les bords nets, mais sur une photo il peut exploser le poids du fichier. Résultat: chargement plus lent, lcp dégradé, et un bénéfice visuel souvent imperceptible.
Erreur 2: utiliser jpg pour du texte fin ou des aplats. La compression avec perte du jpeg crée des artefacts sur les bords contrastés: lettres, traits, interfaces. Pour ces contenus, png ou svg est plus fiable.
Erreur 3: choisir gif par réflexe pour toute animation. Le gif est pratique, mais sa limitation en couleurs indexées sur 8 bits et son poids peuvent poser problème. Pour des animations d’interface, apng est souvent plus adapté car il supporte une variété de profondeurs de couleur.
Erreur 4: oublier les responsive images. Servir une seule image « grande » à tout le monde gaspille de la bande passante. Une stratégie srcset et picture permet de livrer la bonne taille et, si besoin, le bon format (avif/webp avec repli jpeg/png).
Erreur 5: ignorer la couleur. Un profil icc absent ou mal géré peut produire des écarts visibles entre écrans; c’est encore plus critique en impression. Même sur le web, la cohérence colorimétrique compte pour une marque.
Erreur 6: confondre pixels et dpi. Augmenter le dpi sans augmenter les pixels ne crée pas de détail supplémentaire. Pour l’écran, la priorité est la dimension en pixels; pour l’impression, ppi/dpi s’inscrivent dans un flux où la résolution source et la taille imprimée comptent.
Arbitrer, c’est accepter un triangle: qualité perçue, compatibilité, performance. Si vous visez un maximum de compatibilité, jpeg/png restent des valeurs sûres. Si vous visez la performance, webp/avif sont des candidats forts, à condition de prévoir des replis. Et si le visuel doit rester parfaitement net à toute taille, svg gagne presque toujours.
FAQ
Quel format d’image choisir ?
Commencez par le contenu: photo en jpg/jpeg (ou webp/avif pour le web si possible), graphisme avec transparence en png, logo et icônes en svg, animation courte en gif ou apng. Puis adaptez dimensions et variantes (srcset, picture) pour limiter le poids du fichier et préserver le lcp.
Quel format choisir 4/3 ou 16/9 ?
Choisissez selon le support: 16 : 9 pour bannières et usages vidéo orientés écran large, 4 : 3 pour un cadrage plus « photo » et des contenus où la hauteur aide. Fixez ensuite une zone centrale protégée pour les recadrages mobile/desktop.
Quelle est la meilleure qualité entre PNG et JPG ?
Le png conserve la qualité (compression sans perte) et gère la transparence alpha, idéal pour texte fin, captures et aplats. Le jpg/jpeg est optimisé pour la photo mais compresse avec perte: il peut être excellent sur des scènes naturelles, moins sur des bords nets.
Quel format d’image est le meilleur, 4 : 3 ou 16 : 9 ?
Aucun n’est « meilleur » en soi: 4 : 3 et 16 : 9 sont des rapports d’aspect, pas des formats de compression. Le meilleur est celui qui correspond à l’affichage principal et minimise les recadrages, tout en gardant des dimensions adaptées pour éviter un fichier trop lourd.
Choisir vite revient à séparer trois décisions: extension, dimensions en pixels, rapport d’aspect. En appliquant cette méthode et une stratégie web orientée poids et variantes, on gagne en qualité perçue, en compatibilité et en performance sans complexifier la production.
