Redimensionner une image

Pourquoi redimensionner vos images ?

Les téléphones et les appareils photo modernes capturent des images énormes : une seule photo peut faire 6000 pixels de large et peser dix mégaoctets ou plus. C’est bien plus de détails que ce que presque n’importe quel écran, e-mail ou page web n’affichera jamais. L’en-tête d’un blog peut s’afficher à 1200 pixels de large ; une photo de profil à 400 ; une signature d’e-mail à 150. Envoyer un fichier de 6000 pixels dans un emplacement de 1200 pixels gaspille de la bande passante, ralentit le chargement des pages et alourdit les pièces jointes sans aucun bénéfice visible.

Le redimensionnement est aussi le levier le plus puissant dont vous disposez sur la taille du fichier. Comme les données d’une image évoluent avec son nombre total de pixels, diviser par deux à la fois la largeur et la hauteur supprime environ les trois quarts des pixels — et donc l’essentiel de la taille du fichier — avant même toute compression. Baisser la qualité JPEG peut réduire de 30 à 50 % ; redimensionner une photo trop grande à sa taille d’affichage réelle réduit couramment de 80 à 95 %. Si un fichier vous semble trop volumineux, redimensionnez d’abord et compressez ensuite.

Et comme cet outil fonctionne entièrement sur votre appareil, c’est la façon privée de procéder. D’autres redimensionneurs en ligne envoient vos photos vers un serveur distant, les traitent là-bas et vous les renvoient. Ici, vos images sont chargées en mémoire, redimensionnées en local et vous sont rendues immédiatement : elles ne touchent jamais à un réseau.

Comment le redimensionnement affecte la qualité

Réduire une image — la rendre plus petite — est par nature doux pour la qualité, mais la façondont les pixels sont combinés compte énormément. La mise à l’échelle naïve se contente de jeter des pixels, ce qui produit des contours dentelés et un scintillement sur les détails fins. Cet outil utilise plutôt le rééchantillonnage Lanczosde haute qualité, qui pondère un voisinage de pixels environnants pour chaque pixel de sortie. Le résultat garde les contours nets et le texte lisible, de sorte qu’une image réduite paraît propre plutôt que floue ou crénelée.

La seule opération qui nuit véritablement est la mise à l’échelle vers le haut: agrandir une image au-delà de ses dimensions d’origine. Aucun rééchantillonneur ne peut inventer un détail qui n’a jamais été capturé, si bien qu’une photo agrandie paraît molle et pâteuse. En règle générale, ne redimensionnez jamais que vers le bas : choisissez la plus grande taille dont vous avez réellement besoin et redimensionnez à cette taille, jamais au-dessus des dimensions de la source. Lorsque vous convertissez en plus vers un format avec perte, rappelez-vous que la compression et le redimensionnement se cumulent : une image redimensionnée a moins de pixels à compresser, ce qui explique précisément pourquoi les deux ensemble produisent des fichiers aussi petits.

Pixels, pourcentage et tailles cibles courantes

Le mode pourcentage est idéal pour les lots : réglez sur 50 % et chaque image se réduit de façon proportionnelle, quelle que soit sa taille de départ. Le mode pixelsest destiné aux cibles précises : saisissez une largeur (ou une hauteur) et, avec le rapport hauteur/largeur verrouillé, l’autre dimension est calculée pour vous afin que rien ne soit étiré. Le rapport hauteur/largeur n’est rien d’autre que la relation entre la largeur et la hauteur (16:9, 4:3, 1:1) ; le conserver intact est ce qui empêche les visages et les logos de paraître écrasés. Vous pouvez en lire davantage sur le fonctionnement des images et de leurs dimensions dans le guide des images sur le web de MDN.

Quelques cibles utiles à garder en tête : la plupart des contenus webrendent très bien entre 1200 et 2000 pixels sur le plus grand côté (utilisez la valeur la plus élevée pour les images hero pleine largeur sur les écrans à haute densité). Les pièces jointes et signatures d’e-mail devraient généralement rester à 800 pixels ou moins pour ne pas saturer les boîtes de réception. Pour les réseaux sociaux, les dimensions courantes sont d’environ 1080×1080 pour une publication carrée Instagram, 1080×1920 pour les stories et reels verticaux, 1200×630 pour un aperçu de lien Facebook ou Open Graph, et 1500×500 pour une bannière X/Twitter. En cas de doute, redimensionnez à la plus grande taille où l’image apparaîtra et laissez la plateforme la réduire à partir de là.

Conseils pour obtenir les meilleurs résultats

• N’agrandissez jamais.Agrandir au-delà de la taille d’origine ne fait qu’ajouter du flou. Choisissez la plus grande dimension dont vous avez vraiment besoin et arrêtez-vous là.
• Redimensionnez avant de compresser.Moins de pixels signifie un fichier plus petit et moins de travail pour l’encodeur. Pour obtenir les photos les plus petites, redimensionnez ici puis faites-les passer par la compression JPEG.
• Verrouillez le rapport hauteur/largeur.Saisissez seulement la largeur ou seulement la hauteur et laissez l’autre dimension se remplir automatiquement : c’est la façon la plus simple d’éviter les images étirées et déformées.
• Convertissez pendant le redimensionnement. Passer en WebP ou AVIF avec le convertisseur d’images peut réduire une photo redimensionnée de 25 à 50 % de plus sans perte de qualité visible.
• Conservez vos originaux.Redimensionnez à chaque fois à partir d’un master en pleine résolution plutôt que de redimensionner à nouveau une copie déjà réduite, ce qui cumule la perte de qualité.