Quelles sont les bonnes pratiques pour les images utilisées comme sections principales ?

Question

J'ai une section qui utilise des images comme section principale. Le problème est que l'image est trop grande pour les téléphones mobiles, les tablettes et les ordinateurs de bureau, 1 Mo. Je crains que l'image soit trop grande.

J'aimerais connaître les meilleures pratiques lors de l'utilisation d'images comme arrière-plans pour les sections principales.

Merci pour vos aimables suggestions et commentaires.

Answer 1

En fait, une image de bannière de héros de 1 Mo est trop grande. La section héros d’une page Web est généralement le premier élément visuel que les utilisateurs voient. Une grande image fera attendre longtemps les utilisateurs sans voir le contenu de votre site Web, et ils partiront rapidement.

L'optimisation de ces images est donc importante à la fois pour les performances et l'esthétique. Votre image de héros doit faire moins de 100 Ko.

TinyPNG est un excellent outil. https://tinypng.com

Vous pouvez également utiliser des images réactives pour vous adapter à différents rapports hauteur/largeur. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <source srcset="large.jpg">
  <img src="large.jpg" alt="Hero Image">
</picture>

Si vous utilisez Next.js, vous pouvez utiliser le composant Image https://nextjs.org/docs/pages/api-reference/components/image.

Enfin, vous pouvez utiliser Lighthouse pour tester les performances de votre page Web. https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk