À retenir
- Servez une image aux dimensions proches de son affichage et conservez une qualité suffisante pour le sujet.
- WebP et AVIF peuvent réduire le poids, mais le bon format dépend du besoin de transparence, de compatibilité et de fidélité.
- Le texte alternatif décrit l'information utile de l'image. Il ne doit pas devenir une liste de mots-clés.
Deux repères pour lire ce guide
Une image responsive est une image proposée en plusieurs dimensions afin que le navigateur choisisse un fichier adapté à l'écran.
Le chargement différé est le report du téléchargement d'une image située hors de la zone visible jusqu'au moment où elle devient utile.
Le plan d'action le plus simple
- Mesurez les dimensions réellement affichées avant de redimensionner les originaux.
- Générez des variantes modernes et gardez un fichier de secours lorsque le contexte l'exige.
- Contrôlez le résultat visuel, le poids transféré et le texte alternatif dans la page finale.
Optimiser une image consiste à servir le plus petit fichier qui reste net dans son contexte. La méthode fiable combine les dimensions affichées, un format adapté, une compression contrôlée et un chargement cohérent avec la position de l'image.
Commencez par la taille réellement affichée
Une image responsive est une image proposée en plusieurs dimensions afin que le navigateur choisisse un fichier adapté à l'écran. Envoyer la même photo très large à tous les téléphones gaspille des données, mais réduire l'unique original peut rendre l'image floue sur un grand écran.
Le guide web.dev sur les images responsives présente les attributs srcset et sizes. Ils permettent d'annoncer plusieurs variantes sans dupliquer visuellement le contenu.
Exemple hypothétique : une photo affichée sur toute la largeur d'une carte mobile n'a pas besoin du même fichier qu'un visuel de couverture sur un écran large. Les deux versions peuvent partir du même original propre.
Choisissez le format après comparaison
WebP et AVIF sont adaptés à de nombreuses photographies. JPEG reste un secours courant. PNG garde son intérêt pour certains visuels qui exigent de la transparence ou des contours particuliers. Le nom du format ne garantit pas à lui seul la qualité.
| Type d'image | Point à contrôler | Décision pratique | | --- | --- | --- | | Photo de réalisation | détails et textures | comparer WebP et AVIF à taille égale | | Logo ou pictogramme | contours et transparence | privilégier SVG ou un format sans artefacts | | Capture d'interface | texte fin | vérifier la lisibilité avant le poids | | Image de partage | cadrage social | préparer un format proche de 1200 par 630 |
Exportez deux ou trois variantes, ouvrez-les à leur taille d'affichage et gardez la plus légère qui ne montre pas de défaut gênant.
Ne fixez pas un poids universel
Une limite unique ne tient pas compte du contenu. Une illustration simple se compresse davantage qu'une photo de matière, de cuisine ou de chantier. Le poids doit être évalué avec la page entière et la connexion du public visé.
La documentation Google sur les bonnes pratiques pour les images recommande surtout un contenu pertinent, des images de qualité placées près d'un texte utile et des textes alternatifs descriptifs. Elle ne fournit pas une taille magique qui ferait mieux classer une page.
Écrivez un texte alternatif utile
Le texte alternatif est une description qui remplace l'image lorsqu'elle ne peut pas être perçue. Il explique l'information utile sans répéter une liste de mots-clés.
Pour une photo décorative, un attribut alt vide peut être correct. Pour une réalisation, décrivez ce qui permet de comprendre le sujet. « Terrasse en bois terminée devant une maison » est plus utile que « terrasse bois artisan Perpignan pas cher ».
Chargez chaque image au bon moment
Le chargement différé reporte les images situées plus bas dans la page. Il évite de télécharger immédiatement des médias que le visiteur ne voit pas encore. En revanche, l'image principale visible au premier écran ne doit pas être traitée comme une image secondaire.
Indiquez aussi largeur et hauteur. Le navigateur peut ainsi réserver la bonne place avant la fin du téléchargement et limiter les déplacements de mise en page.
Contrôlez le résultat dans la page finale
Un fichier peut sembler correct seul puis être recadré ou agrandi par la feuille de style. Testez donc la page sur plusieurs largeurs. Vérifiez :
- la netteté du sujet principal ;
- le cadrage sur mobile et ordinateur ;
- l'absence de texte illisible dans l'image ;
- le texte alternatif dans le HTML final ;
- les dimensions et le poids réellement transférés ;
- la stabilité de la mise en page.
Le service de création de site vitrine inclut ce travail dans le rendu global. Le guide sur les photos de chantier aide à choisir les prises de vue avant leur optimisation. Pour une page existante, la demande de devis permet de signaler les images qui posent problème.
À retenir
- Redimensionnez à partir de l'usage réel, pas d'un chiffre copié ailleurs.
- Comparez visuellement plusieurs formats et niveaux de compression.
- Réservez le chargement différé aux images qui ne sont pas immédiatement utiles.
Une routine simple avant publication
Conservez l'original, créez les variantes nécessaires, regardez-les dans la page, puis mesurez la page complète. Cette routine protège la direction artistique tout en évitant que des fichiers inutilement lourds ralentissent le parcours.
Sources officielles pour vérifier et approfondir
La sélection et la vérification des sources suivent notre politique éditoriale.
