Quelle taille donner aux images d'un site web ?

La réponse courte

Regardez à quelle largeur l'image apparaît sur la page, en pixels CSS, puis exportez-la au double de cette largeur. Une colonne d'article de 760 pixels de large demande une image d'environ 1520 pixels. Une fiche produit affichée à 280 pixels demande environ 560 pixels. Un arrière-plan qui couvre tout l'écran demande 1920 pixels pour les ordinateurs portables courants et jusqu'à 2560 pour les grands écrans de bureau.

Le redimensionneur ci-dessous le fait en une étape : choisissez Pixels, tapez la largeur, laissez Hauteur vide et gardez Conserver les proportions activé. Redimensionner une série de photos de téléphone d'environ 4000 pixels à 1600 réduit en général chaque fichier de 80 à 90 %, avant même toute compression supplémentaire.

Tailles conseillées par type d'image

Ces tailles couvrent les cas courants des blogs, des boutiques en ligne et des sites d'entreprise. C'est la largeur qui compte le plus ; la hauteur découle des proportions choisies. Les poids visés supposent du JPG ou du WebP avec une qualité d'environ 75 à 85.

Les images Retina et 2x expliquées

Les téléphones récents, beaucoup d'ordinateurs portables et la plupart des Mac ont des écrans haute densité, où un pixel CSS est dessiné avec deux ou trois pixels physiques. Une image exactement aussi large que sa zone d'affichage paraît floue sur ces écrans. Doubler la largeur (2x) la rend nette ; passer à 3x alourdit beaucoup le fichier pour une différence que peu de gens remarquent, 2x est donc le plafond habituel.

Si votre site ou votre plateforme gère les images adaptatives (l'attribut srcset, que WordPress et la plupart des solutions de boutique en ligne ajoutent automatiquement), exportez une grande version en 2x et laissez le système créer les copies plus petites. Sinon, une seule image à 2 fois la plus grande largeur d'affichage est le meilleur compromis.

Pour une bannière pleine largeur, cela fait environ 2560 pixels sur ordinateur. Sur un téléphone, la même zone mesure environ 400 pixels CSS de large : une configuration adaptative y servirait donc une version d'environ 800 à 1200 pixels.

Proportions et redimensionnement sans déformation

Les proportions (ou format, ratio) sont le rapport entre la largeur et la hauteur. Le 16:9 est la forme panoramique des vidéos et de la plupart des bannières, le 3:2 la forme native de nombreux appareils photo, le 4:3 celle de la plupart des appareils photo de téléphone et le 1:1 le carré, courant dans les grilles de produits. Garder les mêmes proportions pour toutes les images d'un même type donne des pages soignées.

Redimensionner change seulement la taille, jamais la forme, tant que les proportions sont conservées. Avec Conserver les proportions activé, le redimensionneur fait tenir l'image dans la largeur et la hauteur que vous tapez, elle n'est donc jamais étirée. Si vous avez besoin d'une forme exacte, par exemple 1200 x 630 pour une image de partage ou un carré pour un produit, recadrez d'abord avec l'outil de recadrage, puis redimensionnez.

N'agrandissez pas les petites images. L'agrandissement ajoute des pixels sans ajouter de détails : le résultat est plus lourd et plus flou. C'est pourquoi Ne pas agrandir les petites images est activé par défaut.

Étape par étape pour un site classique

• Mesurez : ouvrez la page, faites un clic droit sur la zone de l'image et choisissez Inspecter, ou consultez la documentation de votre thème pour connaître la largeur du contenu.
• Recadrez aux proportions que vous utilisez pour ce type d'image, si l'original a une autre forme.
• Redimensionnez au double de la largeur d'affichage avec le mode Pixels.
• Choisissez le format de sortie : WebP pour les fichiers les plus légers si votre plateforme l'accepte, sinon JPG. Gardez le PNG pour les logos et les graphismes avec transparence.
• Compressez si le fichier dépasse encore le poids visé, puis mettez-le en ligne et vérifiez la page sur un téléphone.

Erreurs fréquentes

• Mettre en ligne l'original de l'appareil photo et laisser le navigateur le réduire. Le fichier de 4000 pixels doit quand même être téléchargé en entier, ce qui ralentit la page et dégrade le score Largest Contentful Paint (LCP).
• Réduire l'image uniquement avec les attributs HTML width et height. Ils fixent la taille d'affichage, pas le poids du fichier. Il faut quand même les indiquer, car ils réservent la place et évitent les décalages de mise en page.
• Utiliser le PNG pour des photos. Une photo enregistrée en PNG est souvent 5 à 10 fois plus lourde que la même photo en JPG ou en WebP.
• Mélanger les proportions dans une même grille, ce qui donne des listes de produits irrégulières.
• Mettre du texte dans les images. Les moteurs de recherche ne peuvent pas le lire et il devient minuscule sur téléphone ; utilisez plutôt du vrai texte par-dessus l'image.

Conseils pour des pages plus rapides

Les images situées sous le premier écran doivent utiliser le chargement différé (lazy loading), pour ne se télécharger que lorsque le visiteur s'en approche en faisant défiler la page ; la plupart des systèmes de gestion de contenu l'ajoutent automatiquement. L'image principale en haut de page doit se charger normalement, car c'est souvent le plus grand élément mesuré par le score de vitesse.

Redimensionnez des dossiers entiers d'un coup : ajoutez toutes les images, réglez la largeur une seule fois et utilisez Tout télécharger en ZIP. La liste affiche les anciennes et les nouvelles dimensions de chaque fichier. Tout se passe dans votre navigateur : même quelques centaines de photos de produits sont traitées sans rien envoyer.