Redimensionneur d'images, redimensionnez vos photos en ligne
Redimensionnez des images par largeur, hauteur ou pourcentage, verrouillez le rapport d'aspect et choisissez un mode d'ajustement. 100 % dans votre navigateur, sans téléversement.
Chargement de Redimensionneur d'images, redimensionnez vos photos en ligne… Si rien ne se passe, activez JavaScript.
Redimensionner une image consiste à modifier le nombre de pixels qui composent sa largeur et sa hauteur, ce qui influe à la fois sur la taille du fichier et sur la façon dont l'image s'affiche à l'écran. La résolution d'une image numérique se mesure en mégapixels : une image de 4000 × 3000 contient 12 millions de pixels. Diviser par deux les deux dimensions, jusqu'à 2000 × 1500, réduit le nombre de pixels à 3 millions, soit une diminution de 75 % des données brutes. Comprendre la différence entre les dimensions intrinsèques en pixels d'une image et la taille en CSS à laquelle un navigateur l'affiche est essentiel pour les performances web : une image de 4000 px de large affichée dans un conteneur de 400 px oblige le navigateur à télécharger dix fois plus de données que nécessaire.
Questions fréquentes
Mes images sont-elles téléversées vers un serveur ?
Qu'est-ce que le rapport d'aspect et pourquoi devrais-je le verrouiller ?
Quelle est la différence entre les modes d'ajustement Contenir, Couvrir et Étirer ?
Puis-je redimensionner une image par pourcentage plutôt qu'en pixels fixes ?
Quels formats sont pris en charge en entrée et en sortie ?
Y a-t-il une résolution ou une taille de fichier maximales ?
Pourquoi devrais-je servir plusieurs tailles d'image sur un site web ?
Le redimensionnement affecte-t-il la qualité de l'image ?
Que signifie mégapixel et pourquoi est-ce important ?
Comment le redimensionnement côté navigateur se compare-t-il à Photoshop ou à d'autres outils de bureau ?
À propos de Redimensionneur d'images, redimensionnez vos photos en ligne
Les développeurs web, les graphistes, les gestionnaires de réseaux sociaux et les blogueurs redimensionnent des images au quotidien. Un design web adaptatif nécessite généralement la même photographie à trois ou quatre largeurs différentes : un original en pleine résolution pour les grands moniteurs, une variante moyenne pour les tablettes et une vignette compacte pour le mobile, servis via l'attribut HTML srcset afin que les navigateurs ne téléchargent que la taille dont ils ont besoin. Les plateformes de commerce électronique ont besoin de dimensions de vignettes homogènes pour les grilles de produits. Les professionnels du marketing par courriel doivent maintenir les images en dessous de limites de taille strictes. Les flux de production pour l'impression exigent des cibles précises en DPI et en millimètres. Le simple fait de redimensionner aux bonnes dimensions avant le téléversement peut faire économiser des gigaoctets de stockage et accélérer considérablement le chargement des pages.
Cet outil effectue chaque opération de redimensionnement localement dans votre navigateur grâce à la HTML Canvas API, de sorte que vos images ne quittent jamais votre appareil. Vous pouvez indiquer une largeur exacte, une hauteur exacte ou un pourcentage des dimensions d'origine. Activer le verrouillage du rapport d'aspect garantit que l'image n'est jamais étirée ni écrasée. Trois modes d'ajustement vous offrent un contrôle précis : Contenir met l'image à l'échelle pour qu'elle tienne entièrement à l'intérieur de la zone cible (le canevas est complété si nécessaire), Couvrir remplit la zone et rogne le débordement sur les bords, et Étirer force l'image aux dimensions exactes sans tenir compte des proportions. Le résultat est disponible en téléchargement au format PNG, JPEG ou WebP, à la qualité de votre choix.
Quelques conseils pour obtenir les meilleurs résultats : verrouillez toujours le rapport d'aspect, sauf si vous avez spécifiquement besoin d'un résultat déformé. Lorsque vous générez des vignettes pour un site web, visez la taille d'affichage exacte plutôt que de vous fier au CSS pour réduire l'image, car servir des images correctement dimensionnées est l'un des gains les plus rapides dans un audit de performance Lighthouse. Si vous devez produire plusieurs tailles d'une même image, redimensionnez d'abord vers la plus grande, puis réduisez ce résultat vers les tailles plus petites, car cela préserve davantage de détails qu'une réduction répétée à partir de l'original. Pour les écrans Retina et haute densité, produisez des images au double (2×) de la taille d'affichage en CSS afin de garantir un rendu net.
Pixels, mégapixels et le long chemin vers les images adaptatives
Le mot « pixel » est une contraction de « picture element » (élément d'image) et a été inventé à la fin des années 1960 par des ingénieurs du Jet Propulsion Laboratory de la NASA, qui avaient besoin d'un terme pour décrire les cellules individuelles des images numérisées renvoyées par les sondes spatiales. Le premier appareil photo numérique grand public capable de capturer un mégapixel complet fut le Kodak DCS 100, sorti en 1991 au prix d'environ 13 000 dollars ; il stockait les images sur une unité de disque dur séparée, portée à l'épaule grâce à une bandoulière. Vers 2010, les smartphones d'entrée de gamme étaient livrés avec des appareils photo de 5 mégapixels, et vers 2023 les modèles haut de gamme dépassaient couramment les 200 mégapixels, créant un paradoxe où les appareils photo de nos poches produisent des images bien plus grandes que ce que n'importe quel écran peut afficher.
Le concept d'images adaptatives, servir des tailles d'image différentes à des appareils différents, précède le web moderne de plusieurs décennies. Les premiers ingénieurs de la diffusion télévisée ont été confrontés à un problème analogue en concevant des systèmes qui devaient fonctionner sur des écrans allant de minuscules postes portatifs à de grandes consoles de salon. Sur le web, le problème est devenu aigu vers 2010, lorsque Apple a introduit l'écran Retina, qui a doublé la densité de pixels de l'écran de l'iPhone 4. Les développeurs ont soudain dû servir des images au double de la résolution pour ces appareils ou accepter des photos floues, sans pour autant pénaliser les utilisateurs d'écrans ordinaires par des téléchargements inutilement volumineux. Cette tension a conduit à la création de l'attribut HTML srcset, normalisé en 2014, et de l'élément picture, qui permettent tous deux aux navigateurs de sélectionner automatiquement la taille d'image la plus appropriée.
Avant l'existence du zoom numérique, le zoom optique des appareils photo était obtenu en déplaçant physiquement les éléments de l'objectif, le même principe que celui que les fabricants de télescopes utilisaient depuis le XVIIe siècle. Les algorithmes de redimensionnement numérique, en revanche, sont le fruit des mathématiques du traitement du signal développées au XXe siècle. La méthode d'interpolation bilinéaire utilisée aujourd'hui par la plupart des navigateurs a été décrite dans un article de 1975, tandis que l'interpolation bicubique, privilégiée par les éditeurs d'images professionnels, a été introduite par Robert Keys en 1981. Les outils modernes d'agrandissement fondés sur l'IA utilisent des réseaux de neurones convolutifs entraînés sur des millions de paires d'images pour « inventer » des détails plausibles lors de l'agrandissement, produisant des résultats que les méthodes mathématiques plus anciennes ne peuvent tout simplement pas égaler.