Une image numérique est une grille de pixels, et un fichier image est une façon de stocker cette grille en moins d'octets. Le format choisi décide du nombre d'octets, de la perte éventuelle de détail et de la transparence. Ce guide explique les compromis avec des chiffres mesurés, et l'outil à utiliser.
Pixels, taille et fichier de départ
Un pixel non compressé occupe 3 octets (rouge, vert, bleu). Une photo de téléphone de 4000 × 3000 fait 12 mégapixels, soit 36,000,000 octets, environ 34.3 Mio, avant compression. Les formats réduisent cela en repérant des motifs, c'est pourquoi les photos arrivent en fichiers de quelques mégaoctets.
Le rapport d'aspect est la largeur divisée par la hauteur, simplifiée. 1920 × 1080 se réduit par 120 en 16:9 et 4000 × 3000 en 4:3. Pour redimensionner sans déformer, changez un côté et calculez l'autre : une image 16:9 de 800 de large fait 450 de haut. L'Redimensionneur de Format d'Image et l'Redimensionneur d'Image conservent le rapport, le Redimensionneur d'Images en Lot traite de nombreux fichiers et l'Inspecteur de Dimensions d'Image lit la taille d'un fichier existant.
La taille d'impression est le nombre de pixels divisé par les pixels par pouce : un tirage de 6 × 4 pouces à 300 ppp demande 1800 × 1200 pixels. Une image d'écran n'a pas de taille propre ; seuls ses pixels comptent.
Avec perte et sans perte
- Les formats sans perte (PNG, GIF, WebP sans perte) stockent chaque pixel exactement. Le décodage rend l'original.
- Les formats avec perte (JPEG, WebP avec perte, AVIF, HEIC) écartent le détail que l'œil remarque le moins, d'où des fichiers bien plus petits mais irrécupérables. Un réglage de qualité échange taille contre fidélité.
Les formats comparés
| Format | Compression | Transparence | Animation | Idéal pour |
|---|---|---|---|---|
| JPEG | Avec perte | Non | Non | Photographies |
| PNG | Sans perte | Oui | Rarement (APNG) | Captures, logos, graphiques avec texte |
| GIF | Sans perte, 256 couleurs | 1 bit | Oui | Courtes animations simples |
| WebP | Les deux | Oui | Oui | Images web de tout type, plus petites que JPEG ou PNG |
| AVIF | Les deux | Oui | Oui | Les fichiers les plus petits à qualité donnée, HDR ; encodage plus lent |
| HEIC / HEIF | Avec perte | Oui | Oui | Photos de téléphone (par défaut sur iPhone) ; mauvaise prise en charge des navigateurs |
| SVG | Vectoriel (sans pixels) | Oui | Via CSS ou SMIL | Icônes, logos et schémas à toute taille |
La compression avec perte convient aux images naturelles et bruitées comme les photographies. La compression sans perte convient aux aplats et aux bords nets. Nous avons mesuré les deux mêmes images synthétiques de test de 800 × 600, de 1,440,000 octets chacune sans compression :
| Format | Graphique (aplats, bords nets) | Type photo (lisse avec texture) |
|---|---|---|
| PNG | 7 203 octets | 722 265 octets |
| JPEG, quality 85 | 45 938 octets | 70 979 octets |
| JPEG, quality 50 | 26 980 octets | |
| WebP sans perte / avec perte 80 | 2 780 octets | 30 498 octets |
| AVIF, quality 60 | 4 180 octets | 31 491 octets |
Sur le graphique à aplats, le PNG est environ 6 fois plus petit que le JPEG, qui en plus brouillerait les bords nets. Sur l'image de type photo, c'est l'inverse : le JPEG en qualité 85 est environ 10 fois plus petit que le PNG, et le WebP et l'AVIF à qualité similaire sont encore plus petits. Vos fichiers seront différents, mais la tendance se confirme.
Convertir d'un format à l'autre
Utilisez le convertisseur qui correspond à votre point de départ : Convertisseur JPG en PNG, Convertisseur PNG en JPG, Convertisseur JPG en WebP, Convertisseur PNG en WebP, Convertisseur WebP vers JPG, Convertisseur WebP vers PNG, Convertisseur HEIC vers JPG, Convertisseur AVIF vers JPG et Convertisseur SVG en PNG. Convertir vers un format avec perte fait toujours perdre du détail, et passer d'un format avec perte à un format sans perte ne le restitue pas, cela donne seulement un fichier plus gros. Rassemblez des photos dans un document avec l'Convertisseur d'Image en PDF et extrayez des pages avec le Convertisseur de PDF en Images.
Pour intégrer une petite image directement dans du HTML ou du CSS, encodez-la avec l'Convertisseur d'Image en Base64 (et inversez avec le Convertisseur Base64 vers Image). Base64 transforme chaque groupe de 3 octets en 4 caractères : les données sont donc 33,3 % plus volumineuses ; réservez-le aux toutes petites icônes.
Retoucher sans gâcher la qualité
Chaque enregistrement en JPEG recompresse : faites donc toutes vos retouches d'abord et exportez une seule fois. Gardez un original. Outils qui modifient les pixels : Recadreur d'Image, Rotateur d'Images, Retourneur d'Image, Diviseur d'Images, Créateur de Collages, Ajout de Filigrane sur Image et Créateur de Photo de Profil. Réduisez la taille du fichier avec l'Compresseur d'Image. Effets visuels : Outil de Flou d'Image, Ajusteur de Luminosité et Contraste d'Image, Convertisseur d'Image en Niveaux de Gris, Pixelisateur d'Image et l'Convertisseur d'Image en Art ASCII.
Cas particuliers
- Les graphiques vectoriels (SVG) sont décrits par des formes, ils s'adaptent donc à toute taille. Réduisez-les avec l'Optimiseur SVG.
- Les favicons demandent plusieurs petites tailles ; l'Générateur de Favicon à Partir d'Image crée le jeu.
- Le texte dans une image peut être relu avec l'OCR Image en Texte.
- Les images de remplacement pendant le développement viennent du Générateur d'Images de Remplacement.
- Les couleurs d'une image : voyez Comment fonctionnent la couleur et le contraste.
Erreurs fréquentes
- Enregistrer une capture d'écran en JPEG. Le texte prend des halos flous et le fichier est plus gros ; utilisez PNG ou WebP sans perte.
- Enregistrer une photo en PNG. Le fichier est bien plus gros que nécessaire.
- Agrandir une petite image. Cela ajoute des pixels, pas du détail.
- Ignorer les métadonnées. Les photos peuvent contenir la position GPS ; voyez Comment fonctionnent les métadonnées EXIF des photos.