Aujourd'hui, je vous parle d'un aspect fondamental pour améliorer la performance de votre site web et offrir une expérience utilisateur de qualité : le poids de vos images. Vous vous demandez peut-être pourquoi ce sujet est si important.
Laissez-moi vous expliquer.
Lorsque les images sont trop lourdes, elles ralentissent le chargement des pages, ce qui peut frustrer les visiteurs et les pousser à quitter votre site avant même qu'il ne soit complètement affiché.
Google et autres moteurs de recherche privilégient les sites qui se chargent rapidement. Si votre site est lent à cause de grandes images non optimisées, il pourrait être pénalisé dans les résultats de recherche. En optimisant vos images, vous aidez non seulement vos visiteurs, mais vous améliorez aussi la visibilité de votre site sur Google.
Une vitesse de chargement rapide améliore l'expérience globale de vos utilisateurs. Un site rapide est agréable à utiliser et contribue à la satisfaction des visiteurs, ce qui peut augmenter les conversions et la fidélité.
Les images optimisées consomment moins de bande passante. C’est particulièrement important pour les utilisateurs mobiles qui ont des forfaits de données limités. En optimisant les images, vous offrez une meilleure expérience même pour les visiteurs avec des connexions plus lentes.
Allégez le poids des ressources de votre site est aussi une approche responsable d’un point de vue environnemental.
→ Chez Luneos, nous sommes spécialisés dans la
création de sites écoresponsables ! 🌿😉
Avant de télécharger les images sur votre site, il est important de les redimensionner aux dimensions exactes nécessaires. Utiliser des images plus grandes que nécessaires ralentit le chargement. Généralement, on conseille de choisir des images en format paysage et de les resizer pour qu’elles ne dépassent pas les 1920 pixels.
L’idéal est d’avoir une image qui ne dépasse pas les 100 ko. Nous utilisons des outils comme https://squoosh.app/ et https://compressnow.com/fr/ pour cette tâche, afin de rendre les fichiers plus légers tout en maintenant une bonne qualité.
✌ 2 types de compressions possibles :
Pour optimiser le chargement des pages et améliorer le référencement de votre site, il est essentiel d'utiliser les bonnes pratiques HTML concernant les images. Voici quelques recommandations :
Lorsque vous intégrez des images dans votre code HTML, spécifiez toujours les dimensions (largeur et hauteur) des images. Cela aide à réserver l'espace nécessaire pendant le chargement, évitant ainsi les décalages de mise en page.
✅Exemple de balise d'image avec dimensions spécifiées :
<img src="path/to/your-image.jpg" width="600" height="400" alt="Description de l'image">
Utilisez des noms de fichiers descriptifs et pertinents pour vos images. Cela aide non seulement à organiser vos fichiers, mais améliore également le référencement (SEO) de votre site. Les moteurs de recherche peuvent comprendre et indexer votre contenu plus facilement.
Pour nommer les images, quelques bonnes pratiques sont à respecter :
✅Exemple de noms de fichiers d'images :
L'attribut alt (texte alternatif) est crucial pour l'accessibilité et le référencement. Il fournit une description de l'image aux moteurs de recherche et aux utilisateurs qui utilisent des lecteurs d'écran.
✅Exemple d'utilisation de l'attribut "alt" :
<img src="path/to/tour-eiffel-coucher-de-soleil.jpg" width="1200" height="800" alt="La Tour Eiffel au coucher du soleil">
Pourquoi procéder à l’optimisation des images de son site internet ?
Quel format adopter ?
Redimensionnement préconisé :
Outils de compression :
Bonnes pratiques HTML :
