Un logo qui devient flou en grand format, une photo qui pèse cinq mégaoctets sur une page web, un fond blanc qui refuse de disparaître : la plupart de ces problèmes viennent d’un mauvais choix de format d’image. Comprendre les différences prend quelques minutes et évite beaucoup de frustration.
Matriciel ou vectoriel : la distinction fondamentale
Avant même de parler d’extensions, il faut séparer deux familles.
- Une image matricielle (ou bitmap) est une grille de pixels. Chaque pixel a sa couleur. Agrandie au-delà de sa taille d’origine, elle devient floue ou pixelisée. JPEG, PNG, GIF et WebP appartiennent à cette famille.
- Une image vectorielle est décrite par des formes mathématiques : points, courbes, remplissages. Elle peut être agrandie à l’infini sans perte de qualité. Le SVG en est le représentant sur le web.
Retenez la règle simple : une photographie est forcément matricielle ; un logo, une icône ou un pictogramme gagnent presque toujours à être vectoriels.
Compression avec ou sans perte
La deuxième notion clé concerne la façon dont le fichier est allégé.
- La compression avec perte supprime définitivement des informations jugées peu visibles. Le fichier devient beaucoup plus léger, mais la qualité se dégrade — et chaque nouvel enregistrement dégrade encore.
- La compression sans perte réduit la taille sans supprimer aucune information. Le fichier reste plus lourd, mais l’image d’origine est intégralement conservée.
Conséquence pratique : conservez toujours vos fichiers de travail dans un format sans perte et n’exportez en JPEG qu’à la toute fin.
Tableau comparatif
| Format | Type | Transparence | Usage idéal |
|---|---|---|---|
| JPEG | Matriciel, avec perte | Non | Photographies, images riches en nuances |
| PNG | Matriciel, sans perte | Oui | Captures d’écran, graphiques, images à fond transparent |
| SVG | Vectoriel | Oui | Logos, icônes, illustrations géométriques |
| WebP | Matriciel, les deux modes | Oui | Web moderne, remplace souvent JPEG et PNG |
| GIF | Matriciel, 256 couleurs | Oui (binaire) | Petites animations simples |
JPEG : la référence photographique
Le JPEG excelle sur les images comportant de nombreux dégradés, comme les photos. Sa compression réduit énormément le poids pour une perte souvent imperceptible à l’œil.
Ses faiblesses apparaissent ailleurs : sur du texte, des lignes nettes ou des aplats de couleur, il crée des artefacts visibles autour des contours. Il ne gère pas non plus la transparence.
PNG : netteté et transparence
Le PNG conserve chaque pixel exactement tel quel. C’est le bon choix pour une capture d’écran, un graphique, un schéma ou toute image contenant du texte.
Il gère aussi la transparence progressive, ce qui permet des bords doux et des ombres réalistes. En contrepartie, un PNG de photographie peut peser cinq à dix fois plus qu’un JPEG équivalent.
SVG : le format qui ne vieillit pas
Un fichier SVG est du texte décrivant des formes. Il en découle plusieurs avantages :
- Netteté parfaite sur tous les écrans, quelle que soit la taille d’affichage.
- Fichiers très légers pour les formes simples.
- Couleurs modifiables directement en CSS et animation possible.
Attention toutefois : le SVG n’est pas adapté aux photographies, et un fichier provenant d’une source inconnue mérite d’être vérifié, car il peut contenir du code.
WebP : le compromis moderne
Conçu pour le web, le WebP propose à la fois une compression avec perte et sans perte, gère la transparence et l’animation. À qualité visuelle comparable, il produit généralement des fichiers plus légers que le JPEG ou le PNG.
Il est aujourd’hui largement pris en charge par les navigateurs. Certains logiciels d’édition plus anciens ou certains outils métiers ne le reconnaissent pas encore, ce qui explique que JPEG et PNG restent des valeurs sûres pour les échanges de fichiers.
Choisir en trois questions
- Est-ce une forme géométrique ou un logo ? Si oui, SVG.
- Ai-je besoin de transparence ou de texte net ? Si oui, PNG ou WebP.
- Est-ce une photographie destinée au web ? Si oui, WebP en priorité, JPEG en solution universelle.
Bonnes pratiques pour le web
- Redimensionnez avant d’exporter. Publier une image de 4000 pixels de large affichée sur 800 pixels gaspille de la bande passante.
- Ajustez le niveau de qualité. Sur un JPEG, descendre de 100 % à 80 % divise souvent le poids sans différence visible.
- Renseignez toujours le texte alternatif. Il sert à l’accessibilité et au référencement.
- Évitez les conversions successives entre formats avec perte.
- Archivez les originaux dans un format sans perte, séparément des fichiers publiés.
Écrans à haute densité et images adaptatives
Les écrans actuels affichent souvent deux à trois pixels physiques pour un pixel de mise en page. Une image exportée exactement à la taille d’affichage peut donc paraître légèrement floue sur un téléphone récent ou un écran haute définition.
Deux réflexes permettent de régler la question sans alourdir inutilement les pages :
- Exporter les images matricielles à environ deux fois la taille d’affichage, puis les contraindre à la bonne largeur dans la mise en page.
- Fournir plusieurs tailles et laisser le navigateur choisir la plus adaptée selon l’appareil. La plupart des systèmes de gestion de contenu le font automatiquement.
Le SVG échappe entièrement à ce problème : n’étant pas composé de pixels, il reste net quelle que soit la densité de l’écran. C’est une raison supplémentaire de l’utiliser pour les logos et les icônes d’interface.
Et pour l’impression ?
Les règles changent. L’impression exige une résolution nettement supérieure à celle de l’écran et un mode colorimétrique adapté aux encres plutôt qu’à la lumière. Les formats d’échange y sont plutôt le PDF, le TIFF ou les fichiers natifs des logiciels de création. Un JPEG optimisé pour le web donnera un résultat décevant une fois imprimé en grand format.
Maîtriser ces choix fait partie du quotidien de tout créateur visuel. Pour approfondir le graphisme, la retouche et la préparation de fichiers, les cours gratuits d’art et design disponibles sur Cursa offrent une progression complète, du logiciel aux principes de composition.
