Les images sont un excellent moyen de donner à un site web un aspect attrayant et professionnel. Cependant, mal utilisées, elles peuvent avoir un impact négatif considérable sur la vitesse de chargement de votre page. Comparée au texte, une image est souvent un fichier très volumineux. Des images non optimisées peuvent donc sérieusement nuire aux performances de votre page et, par conséquent, à votre référencement.
La bonne nouvelle est que vous pouvez utiliser des images sur votre page sans nuire à votre PageSpeedIl vous suffit de suivre quelques bonnes pratiques simples.
Utilisez les bonnes dimensions d'image
Les photos prises avec un appareil photo ou un téléphone moderne ont souvent une haute résolution. Une photo prise avec un iPhone, par exemple, peut atteindre des milliers de pixels de large. Une résolution plus élevée entraîne un fichier plus volumineux, ce qui allonge le temps de chargement. Cela représente souvent un gaspillage de bande passante pour vos visiteurs, surtout si la photo n'est affichée que sous forme de petite vignette.
Pour résoudre ce problème, veillez à ce que l'image originale soit à peu près à la taille de l'espace disponible sur votre site web. Par exemple, si une photo est affichée en 300 x 200 pixels sur votre site, inutile de télécharger une image volumineuse de 3000 x 2000 pixels. Cela peut vous faire économiser jusqu'à 90 % de bande passante sans perte de qualité d'image. Notre plateforme peut vous aider. Les fonctionnalités automatisées de Clickrank peut analyser votre site Web à la recherche de ces problèmes et vous fournir une liste claire et prioritaire des éléments à corriger.
Images réactives
L'exemple ci-dessus paraît simple, mais compte tenu de la diversité des tailles d'écran actuelles, il peut s'avérer un peu plus complexe. Sur un ordinateur de bureau, vous souhaiterez peut-être afficher une image de 600 x 400 pixels, tandis que sur un téléphone portable, une résolution de 300 x 200 pixels est plus adaptée.
C'est ici que images réactives Entrez. Les images responsives vous permettent d'afficher une image différente selon la taille de l'écran de votre visiteur. Vous pouvez redimensionner l'image selon différents formats, puis utiliser une simple ligne de code pour indiquer au navigateur l'image à utiliser. Ainsi, les écrans plus petits afficheront des images plus petites, ce qui améliorera les performances de la page.
Optimiser les fichiers image
Même avec des dimensions d'image adéquates, il arrive que vos images soient un peu trop grandes. C'est là qu'intervient l'optimisation des images.
- Utilisez le bon type de fichier : Différents formats d'image sont adaptés à différents types d'images. Le JPEG est idéal pour les photos, tandis que le PNG est plus adapté aux graphiques et aux captures d'écran. Le SVG est parfait pour les logos et les icônes.
- Compressez vos images : Vous pouvez réduire la qualité d'une image pour réduire sa taille. En général, réduire la qualité d'une image JPEG à environ 75 % de l'original est quasiment invisible, mais la taille du fichier peut être réduite jusqu'à 85 %. Vous pouvez utiliser des outils en ligne pour compresser vos images.
- Ajouter un texte alternatif : Il s'agit d'une étape cruciale pour le référencement et l'expérience utilisateur. Le texte alternatif est la description d'une image utilisée par les moteurs de recherche pour comprendre votre contenu. Notre outil gratuit Générateur de texte alternatif d'image AI peut vous aider à rédiger une bonne description pour vos images, ce qui est également un excellent moyen d'améliorer votre référencement.
Autres moyens d'améliorer les performances de l'image
Chargement différé des images hors écran
Chargement paresseux Il s'agit d'une technique qui consiste à ne charger une image que lorsqu'elle doit être affichée à l'écran. C'est un excellent moyen d'améliorer la vitesse de chargement d'une page longue contenant de nombreuses images. Le navigateur se concentre ainsi sur le chargement des images visibles en premier, puis charge les autres images à mesure que l'utilisateur fait défiler la page.
Utiliser des formats d'image modernes
Il existe de nouveaux formats d'image, comme WEBP, qui offrent une excellente compression et peuvent être animés. Bien que tous les navigateurs ne les prennent pas en charge, il est conseillé de les utiliser autant que possible.
Utiliser des formats vidéo pour le contenu animé
Les GIF sont souvent utilisés pour les animations courtes, mais ils ne sont pas très efficaces. Les GIF animés plus longs devraient plutôt être chargés sous forme de vidéo. Cela permet d'économiser de la bande passante et d'accélérer la page.
Comment dimensionner correctement une image ?
Il est conseillé de toujours s'efforcer de créer une image originale de taille équivalente à l'espace disponible sur votre site web. Ceci est particulièrement important pour les images principales, qui constituent souvent l'élément le plus volumineux de la page.
Le type de fichier image est-il important pour le référencement ?
Oui. Utilisez un format de fichier adapté à l'image. Le format JPEG est idéal pour les photos, tandis que le format PNG est plus adapté aux graphiques. Notre plateforme peut vous aider. Clickrank.ai peut analyser vos images et vous proposer des suggestions d'optimisation.
Qu'est-ce que le chargement paresseux ?
Le chargement différé est une technique qui retarde le chargement des images jusqu'à leur affichage à l'écran. C'est un excellent moyen d'améliorer la vitesse de chargement d'une page longue contenant de nombreuses images.
Comment ajouter du texte alternatif à une image ?
