Comment redimensionner des images sans perte de qualité

« Sans perte de qualité » est asymétrique. La réduction — rendre une image plus petite — perd des informations par définition (vous avez moins de pixels que la source), mais la perte est généralement invisible si vous utilisez un bon algorithme. L’agrandissement — la rendre plus grande — invente des détails qui n’existaient pas, et le résultat est toujoursmoins net qu’une source en résolution native. Ce guide explique quels workflows préservent la qualité visible et lesquels ne le font pas.

Réduction : généralement sûre

Si votre source fait 3 000×2 000 pixels et que vous avez besoin de 600×400 pour le web, vous abandonnez 96 % des pixels. Tant que l’algorithme de réduction fait la moyenne des pixels abandonnés dans les pixels conservés (plutôt que de simplement échantillonner chaque N-ième pixel), le résultat semble correct.

Les navigateurs modernes, Photoshop et les outils dédiés utilisent par défaut l’interpolation bilinéaire ou bicubique. Pour des réductions agressives (> 4× réduction), ils enchaînent plusieurs passes pour éviter l’aliasing.

Quand la réduction tourne mal : échantillonnage au voisin le plus proche (qui préserve le pixel art mais produit des photos dentelées) ou réduction en une seule passe à des ratios extrêmes (qui cause des motifs de moiré). Presque aucun outil grand public n’utilise le voisin le plus proche par défaut ; vous devriez le demander explicitement.

Agrandissement : perd toujours

Une image de 100×100 pixels contient 10 000 unités d’information. L’agrandir à 400×400 produit 160 000 pixels — 150 000 desquels l’algorithme a inventés par interpolation entre voisins. Le résultat est mathématiquement une approximation.

Trois variantes d’agrandissement :

• Bilinéaire / bicubique.Interpolation standard. Résultats doux, légèrement flous. Le comportement par défaut quand vous changez la taille d’une <img> en CSS.
• Lanczos.Plus net que bicubique, préserve mieux les contours. Certains outils l’utilisent par défaut pour les agrandissements 2×.
• Agrandissement par IA.Topaz Gigapixel, Super Resolution d’Adobe, outils basés sur ESRGAN. Entraînés sur des millions d’exemples haute résolution ; hallucinant des détails plausibles. Les résultats sont meilleurs que l’interpolation mais ne sont pas réellement précis — les « détails » sont inventés.

Règle pratique : n’agrandissez jamais un asset final. Trouvez une source en plus haute résolution. Si la source n’existe vraiment pas (une vieille photo, un tout petit logo), l’agrandissement par IA est la moins mauvaise option.

Le format affecte la qualité visible

Même avec un redimensionnement parfait, le format dans lequel vous enregistrez détermine ce qui survit. Consultez notre guide PNG vs JPG vs WebP pour la comparaison complète ; la version courte :

• PNG— sans perte. Redimensionner puis enregistrer en PNG préserve exactement l’image redimensionnée. Utilisez pour les logos, illustrations, captures d’écran avec texte net.
• JPEG @ 90 %— visuellement indiscernable du PNG pour les photographies aux tailles de visualisation typiques. Les pertes de qualité ne viennent pas du redimensionnement, mais de l’encodage JPEG.
• WebP @ 80 % — 25-35 % plus petit que JPEG à qualité équivalente. La norme web pour les photographies depuis 2020.
• GIF — limité à 256 couleurs ; les GIF redimensionnés de photographies semblent postérisés. Convertissez en PNG ou WebP à la place.

Le workflow de protection de la source

Une fois que vous redimensionnez et sauvegardez, vous ne pouvez plus récupérer les détails d’origine. Alors :

1. Archivez la source. PNG ou RAW en résolution originale. Taguez/classez-la pour que votre futur vous puisse la retrouver.
2. Générez des dérivés.Tailles web depuis la source, pas depuis une copie préalablement redimensionnée. Chaque cycle de redimensionnement-sauvegarde accumule des artefacts de compression ; repartir de la source l’évite.
3. Générez les tailles dont vous avez réellement besoin.Courant : @1× pour les écrans traditionnels, @2× pour Retina, @3× pour les téléphones haut de gamme. Servez via <img srcset> ou <picture>.
4. Ne réditez pas un JPEG.Chaque sauvegarde supprime plus d’information. Si vous devez corriger les couleurs après coup, faites-le sur la source, puis ré-exportez.

Redimensionnement côté navigateur vs côté bureau

Les navigateurs modernes effectuent un redimensionnement de haute qualité en Canvas2D — c’est ce qu’utilise notre outil de redimensionnement d’images. Les résultats sont visuellement identiques au bilinéaire/bicubique de Photoshop pour la plupart des cas. Pour les réductions agressives (> 8× réduction), « Image Size » de Photoshop avec bicubic-sharper a encore un léger avantage pour préserver les détails fins.

Erreurs courantes

• Redimensionner en CSS plutôt que dans le code.Une image de 4 000×3 000 servie à width=400en CSS pèse quand même 4 000×3 000 octets sur le réseau. Le navigateur peut redimensionner, mais le réseau a déjà payé. Redimensionnez lors de l’exportation, pas lors de l’affichage.
• Oublier les écrans Retina.Une image de 200×200 sur un écran @2× s’affiche floue. Exportez à 400×400, affichez en 200×200 pixels CSS.
• Recadrer en agrandissant.Si vous recadrez 25 % d’une image, vous avez une image au quart de la résolution. L’agrandir aux dimensions d’origine ne fait qu’agrandir les artefacts. Recadrez d’abord, puis acceptez la résolution inférieure comme nouveau plafond.

Pour l’outil en direct, consultez notre outil de redimensionnement d’images et le compresseur d’images associé. Les deux fonctionnent entièrement dans votre navigateur — les fichiers ne quittent pas la page.

Exemple concret : une image hero pour un laptop Retina

Emplacement cible dans le design : 1 200 × 600 pixels CSS. Source : une photo DSLR de 24 mégapixels, 6 000 × 4 000 pixels, JPEG sRGB.

• Choisissez les dimensions de sortie. Pour Retina @2×, exportez 2 400 × 1 200 pixels device. Pour les téléphones avec DPR @3×, exportez 3 600 × 1 800. Utilisez <picture> avec srcset pour servir le bon.
• Recadrez, puis rééchantillonnez. Recadrez les 6 000 × 4 000 en une région 2:1 (p. ex. 6 000 × 3 000), puis rééchantillonnez à 2 400 × 1 200 avec Lanczos3 dans ImageMagick : magick input.jpg -filter Lanczos -resize 2400x1200^ -gravity center -extent 2400x1200 [email protected].
• Encodez en WebP à qualité 80. cwebp -q 80 [email protected] -o [email protected]. Taille de fichier attendue : ~85-130 Ko à cette résolution. L’équivalent JPEG q=85 ferait ~180-220 Ko.
• Ajoutez une variante AVIF pour les navigateurs qui la prennent en charge. avifenc --speed 6 -q 60 [email protected] [email protected] → encore 25-40 % plus petit que WebP.

Cas particuliers

• SVG.Les graphiques vectoriels n’ont pas besoin de rééchantillonnage — ils se restituent à toute taille sans perte.
• GIF/WebP animé. Le rééchantillonnage image par image sans cohérence temporelle introduit un scintillement. Utilisez ffmpeg avec un filtre temporel, ou convertissez en format animé moderne.
• Images HDR. Le contenu encodé en PQ/HLG 10 bits et 12 bits nécessite des rééchantillonneurs HDR-aware ; un rééchantillonneur 8 bits standard écrase les hautes lumières et les ombres.
• Impression à >300 PPI sur papier non couché.Le grossissement de l’encre sur papier non couché sature vers 250 PPI ; rééchantillonner la source à 600 PPI est du gaspillage.