Tailles d'images pour un site web : dimensionnez selon l'emplacement affiché, pas l'écran

Partez de l'emplacement affiché

Mesurez l'emplacement CSS le plus large où l'image s'affiche, pas l'écran. Une image de couverture pleine largeur et une carte de 320 pixels demandent des jeux de sources différents. Si la couverture s'affiche à 1280 pixels CSS sur grand écran, un candidat de 1280, voire 2560 pixels, peut être utile ; la carte doit rester bien plus petite.

Générateur d'images responsives → Créez variantes de largeur, balisage et ZIP en local.

Créez un petit jeu de candidats utiles

Les largeurs doivent suivre la mise en page : par exemple 320, 640, 960, 1280 et 1920 pixels. Ne générez pas toutes les tailles possibles. Le navigateur choisit parmi les candidats, donc chaque fichier doit représenter un palier significatif en octets transférés.

Décrivez la mise en page au navigateur avec sizes

L'attribut srcset liste les largeurs candidates ; sizes décrit la largeur d'affichage de l'image selon les conditions de la fenêtre. Si sizes est absent ou inexact, le navigateur peut télécharger un candidat plus volumineux que nécessaire.

Choisissez le format et la qualité selon le type d'image

Utilisez des formats modernes avec perte pour les photos, et une sortie sans perte pour les graphismes qui l'exigent. Un logo est souvent mieux servi par le SVG. Comparez le texte, les visages, les dégradés et les contours nets à la taille d'affichage plutôt que d'appliquer une même valeur de qualité à toutes les ressources.

Préservez la mise en page et la priorité de chargement

Définissez width et height intrinsèques ou un ratio d'aspect pour réserver l'espace. Donnez la priorité à l'image principale au-dessus de la ligne de flottaison si votre framework le permet, et chargez en différé les images plus bas dans la page. Évitez de placer toutes les images en priorité haute.