Quelles dimensions choisir pour les images d’un site ?

Mesurer l’espace prévu dans votre mise en page

Mesurez la largeur de la zone occupée par l’image sur la page, plutôt que celle de toute la fenêtre. Commencez par les dimensions recommandées par le thème ou le bloc d’image. Si elles ne sont pas indiquées, utilisez l’inspecteur du navigateur ou demandez à la personne qui gère le site de vérifier la largeur affichée sur téléphone et ordinateur. Tenez aussi compte d’une éventuelle vue agrandie ou d’un zoom.

Pour une image affichée sur 720 pixels de large, comparez des versions de 720 et 1440 pixels. La plus grande peut paraître plus nette sur un écran à forte densité, mais vérifiez si les détails supplémentaires justifient son poids. Partez d’un original assez grand : agrandir une source de 900 à 1440 pixels ne restitue pas les détails manquants.

Des points de départ selon l’emplacement

Une couverture de 2400 pixels ne convient pas automatiquement à chacun. Un téléphone peut demander plus petit ou un autre cadrage. À l’inverse, le zoom produit peut nécessiter un fichier distinct plus grand que la carte habituelle.

Distinguez pixels et poids

Les dimensions décrivent la grille, par exemple 1200 × 800. Le poids décrit les données stockées ou transférées, en Ko ou Mo. Deux images de mêmes dimensions peuvent peser très différemment selon les détails, le format et la compression.

Le pixel CSS mesure la taille visible dans la mise en page. Sur un écran à haute densité, un pixel CSS peut utiliser plusieurs pixels physiques. Une image nette peut donc nécessiter plus de pixels que sa largeur affichée.

Partez du placement. Une photo affichée à 600 pixels CSS n’a généralement pas besoin de la même source qu’une photo plein écran. Un écran à haute densité de pixels peut bénéficier de plus de pixels que la largeur CSS ; l’intérêt dépend du contenu et de l’augmentation du poids du fichier.

Préservez les proportions

Dans l’outil de redimensionnement, verrouillez les proportions et saisissez une largeur de 1200 pixels pour un original de 3000 × 2000. La hauteur devient automatiquement 800. Il n’est pas nécessaire de calculer et saisir les deux dimensions. Vérifiez la forme des visages et des cercles.

Pour une miniature carrée, recadrez plutôt que d’écraser une photo large. Utilisez le recadrage en gardant le sujet visible sur petit écran. Agrandir ne recrée pas des détails jamais capturés.

Livrez les tailles adaptées

Le balisage adaptatif permet au navigateur de choisir un fichier. srcset basé sur la largeur et sizes décrivent les largeurs disponibles et l’emplacement ; ils ne créent pas les fichiers. Voir le guide MDN des images adaptatives.

Vérifiez si votre CMS produit déjà variantes et balisage. Pour un site statique, exportez les fichiers puis référencez-les dans la page. Ajouter trois fichiers ne suffit pas : le code de la page doit permettre au navigateur de choisir la bonne version.

Fixez un objectif de poids pour les images

Testez des images représentatives et toute la page. Douze cartes produits n’ont pas le même budget qu’un portfolio avec une photo détaillée. Aucun seuil unique en kilo-octets ne garantit vitesse ou qualité.

1. Inspectez à la taille réellement affichée.
2. Comparez des dimensions réduites et un format plus efficace.
3. Vérifiez le poids du fichier téléchargé et les détails visibles.
4. Testez sur mobile avant de réutiliser le réglage.

Distinguer couvertures, produits et miniatures

Si le sujet d’une couverture large disparaît sur mobile, préparez un cadrage spécifique au lieu de déformer l’image. Un zoom produit peut demander un grand fichier séparé, inutile pour chaque petite fiche. Une miniature carrée se recadre ; elle ne se crée pas en écrasant une photo horizontale.

Notez pour chaque emplacement le ratio, la largeur maximale affichée, les largeurs à tester et les détails indispensables. Revérifiez après un changement de thème. Si le téléphone reçoit toujours le plus gros fichier, examinez la sélection responsive : exporter une petite version supplémentaire ne sert à rien si la page ne l’utilise pas.