Redimensionneur d'images

Redimensionner une image est le moyen le plus efficace d’en réduire le poids, et le seul de respecter une exigence au pixel près : un aperçu de 1200 × 630 pour les réseaux sociaux, une icône de 512 × 512, une bannière de 1920 pixels. Cet outil redimensionne jusqu’à 20 images à la fois, dans votre navigateur, à une taille précise ou à un pourcentage de l’original.

Comment ça marche

Déposez des fichiers JPG, PNG ou WebP. Chacun est décodé avec createImageBitmap en appliquant l’indicateur d’orientation EXIF : une photo prise en portrait au téléphone est donc redimensionnée telle qu’elle s’affiche, et non telle qu’elle a été enregistrée. Deux modes sont proposés :

• Taille exacte prend une largeur, une hauteur ou les deux, en pixels. Avec les proportions verrouillées, il suffit de saisir une seule dimension pour que l’autre soit déduite des proportions propres à chaque image ; si vous saisissez les deux, c’est la largeur qui l’emporte. Déverrouiller les proportions permet de fixer les deux indépendamment, ce qui étire ou écrase l’image : c’est parfois voulu, mais le plus souvent non.
• Pourcentage applique le même facteur d’échelle à toutes les images, de 1 % à 400 %.

Lorsque la réduction dépasse la moitié, l’image est d’abord réduite de moitié par étapes successives avant le rééchantillonnage final ; une seule forte réduction ignore trop de pixels source et laisse des bords crénelés. Le résultat est encodé par défaut dans le format d’origine, ou en JPEG, PNG ou WebP si vous le choisissez. La sortie JPEG utilise une qualité fixe de 92 % et aplatit la transparence sur un fond blanc. Les fichiers sont téléchargés sous le nom name-resized.jpg, .png ou .webp.

Les images sont traitées l’une après l’autre plutôt qu’en parallèle, car décoder plusieurs grandes photos en même temps peut saturer la mémoire d’un téléphone. Les métadonnées ne sont pas conservées : la sortie est constituée de pixels neufs, sans EXIF, sans données GPS ni profil colorimétrique. Le SVG n’est pas accepté, puisqu’une image vectorielle n’a pas de taille en pixels fixe à modifier.

Agrandir

Dépasser 100 % n’ajoute aucun détail. Le navigateur interpole entre les pixels existants : une photo de 400 × 300 agrandie en 1600 × 1200 n’est qu’une version moins nette, légèrement floue, de la petite. L’agrandissement sert à respecter une dimension minimale imposée ou à produire du pixel art (qui exige un filtre au plus proche voisin que cet outil ne propose pas), mais une image destinée à l’impression ou à un bandeau principal doit partir d’un original plus grand. S’il n’en existe pas, restez modeste : 150 % passe généralement, 400 % rarement.

Choisir les dimensions

Visez la plus grande taille à laquelle l’image sera affichée, en tenant compte des écrans haute densité. Une colonne de 600 pixels de large sur un écran 2× demande une image de 1200 pixels pour être nette, et pas davantage. Quelques cibles courantes :

Pour un emplacement au ratio fixe comme 1200 × 630, le redimensionnement seul ne suffit pas à y faire entrer une image d’un autre ratio : ne déverrouillez les proportions que si une légère déformation est acceptable, et sinon recadrez d’abord dans un éditeur.

Équivalent en ligne de commande

L’option -resize d’ImageMagick accepte le même type de spécifications, et le suffixe > ne réduit que les images plus grandes que la cible :

convert photo.jpg -auto-orient -resize 1600x photo-resized.jpg     # width, keep ratio
convert photo.jpg -auto-orient -resize '1200x630!' preview.jpg     # exact, ignore ratio
mogrify -auto-orient -resize '50%' *.png                           # in place, by percent

Pour aller plus loin

Servir des tailles différentes selon les écrans avec srcset et <picture>, ou dessiner des images mises à l’échelle sur un canvas, est traité dans les fondamentaux de HTML5. Une fois les dimensions réglées, le compresseur d’images contrôle le poids du fichier avec un curseur de qualité ou une cible en Ko, et le convertisseur image vers PDF transforme une série de pages redimensionnées en un seul document.