Comment redimensionner et recadrer des images pour le web

Redimensionner et recadrer sonnent pareil, mais résolvent des problèmes différents — et bien les utiliser est souvent un gain de vitesse plus grand que la compression seule. Ce guide explique la différence, pourquoi les images surdimensionnées nuisent et comment dimensionner correctement les images pour le web.

Redimensionner vs. recadrer

• Redimensionner (Resizing) change les dimensions de toute l'image en la gardant entière — vous l'agrandissez ou la réduisez.
• Recadrer (Cropping) coupe une partie de l'image pour n'en garder qu'une région — vous changez ce qui est dans le cadre, pas seulement sa taille.

Une photo de profil est un bon exemple : vous recadrez en un carré autour du visage, puis redimensionnez ce carré à la taille d'affichage.

Pourquoi les images surdimensionnées ralentissent les pages

Une photo tout droit sortie d'un téléphone peut faire 4 000 pixels de large. Si elle s'affiche dans une colonne de 800 pixels, le navigateur télécharge cinq fois plus de pixels qu'il ne pourra jamais en montrer, puis les réduit à la volée. C'est de la bande passante gaspillée et une page plus lente pour zéro bénéfice visuel. Redimensionner l'image à peu près à la taille où elle s'affiche est souvent la plus grosse économie de taille de fichier disponible — souvent plus que la compression.

Conservez le rapport d'aspect

Le rapport d'aspect (aspect ratio) est la proportion de la largeur à la hauteur. Redimensionnez les deux dimensions du même facteur et l'image reste sans distorsion ; n'en changez qu'une et elle s'étire ou s'écrase. La plupart des outils « verrouillent » le rapport par défaut — laissez-le verrouillé sauf si vous voulez déformer exprès. Si vous avez besoin d'une forme différente (disons, une bannière large à partir d'une photo verticale), recadrez au nouveau rapport plutôt que d'étirer.

Quelle taille pour les images ?

• Faites correspondre la largeur de l'image à l'espace qu'elle remplit — mesurez le conteneur.
• Pour un affichage net sur les écrans haute densité (Retina), exportez à environ 2× la taille d'affichage, puis compressez.
• N'agrandissez pas — agrandir une petite image ne fait qu'ajouter du flou ; elle ne peut pas inventer du détail.

Mettre le tout ensemble

Un bon ordre d'opérations est recadrer → redimensionner → compresser. Le redimensionneur d'images gère le recadrage et le redimensionnement en une passe avec le rapport d'aspect verrouillé, puis passez au compresseur d'images pour réduire la taille du fichier. Lisez le guide de compression pour savoir jusqu'où pousser la qualité, et les formats d'image expliqués pour choisir d'abord le bon format.