Moov’Up

Tuto : comment optimiser les images pour le web ?

Tuto : comment optimiser les images pour le web ?

Cette semaine, on vous propose un tuto simple. Quelques conseils et des outils pour améliorer les performances de chargement de votre site web en optimisant les images.

Tout le monde en est conscient, aujourd’hui, la performance de votre site web est une priorité. Vous ne pouvez pas vous autoriser à la mettre de côté. Et ce n’est pas prêt de changer, comme les nouveautés sur les Core Web Vitals l’indiquent.

Influer sur le code n’est jamais chose facile. Influer sur votre serveur peut entraîner un surcoût. Influer sur les images ne coûte pas grand-chose, sauf un peu de temps et une certaine rigueur.

Lister les images trop lourdes ou trop grandes

PageSpeed Insights le fait très bien. Lancez une analyse, une fois celle-ci terminée, rendez-vous dans la partie Opportunités. L’outil vous signale directement les images trop lourdes ou les images trop grandes par rapport à la taille affichée.

Optimiser des images mal dimensionnées

images mal di

Exemple de résultats pour images mal dimensionnées

Téléchargez simplement les images signalées. Ensuite, redimensionnez-les à la taille de leur emplacement. Pour cela, vous pouvez passer par l’inspecteur d’éléments.

Clic droit > Inspecter > Sélecteur d’éléments

sélecteur éléments inspector

Grâce à cet outil, vous voyez en direct la taille d’affichage de l’élément en passant votre souris dessus.

taille de l'image affichée

Il ne vous reste plus qu’à redimensionner les images à la taille indiquée. Pour cela, vous pouvez utiliser des logiciels comme Gimp, Photoshop, Paint ou des outils en ligne comme celui proposé par IloveImg.

Optimiser des images trop lourdes

Lorsque vos images sont redimensionnées, vous pouvez les compresser. Vérifiez que PageSpeed ne vous signale pas d’autres images trop lourdes. Si c’est le cas, téléchargez-le. Ensuite, deux solutions : utiliser un plugin ce qui vous fera gagner un temps précieux ou le faire manuellement.

Pour cela, sélectionnez les images à compresser et rendez-vous sur le site Compress JPEG ou un autre. Chargez vos images dans l’encart prévu à cet effet et cliquez sur compresser. Une fois la compression terminée, téléchargez les images une à une ou en une fois avec le bouton prévu à cet effet.

Quel est le format idéal pour une image sur mon site ?

Une fois, l’image à la bonne taille, il est nécessaire de s’intéresser à son format. En règle général, on privilégie le format JPEG en 72 dpi, idéal pour un affichage web. Si vos images sont en PNG, vérifiez que celui-ci est réellement nécessaire.

Un logo en PNG peut se comprendre (pour ne pas avoir de fond), une image de couverture ou de slider en png n’a aucun intérêt. N’utilisez le format PNG que si vous ne souhaitez pas afficher le fond de vos images. Pour des icônes ou logo sans background, il est même recommandé d’utiliser le format SVG.

Depuis peu, Google recommande l’utilisation de format web nouvelle génération comme le format WEBP ou WEBPage.

images nouvelles génération format WEBP

C’est un format relativement optimisé (25 à 30% plus petit que les images JPEG), mais il n’est pas compatible avec tous les navigateurs, donc faites attention. Le logiciel XNConvert est très efficace pour qui veut convertir ses images en WEBP, l’outil en ligne Convertio.co également (limité à 10 images par jour en gratuit).

 

Comme vous l’avez compris, ce n’est pas très compliqué d’optimiser les images de son site web. Le plus dur, c’est de trouver le temps de le faire. Si vous n’avez pas le temps, vous pouvez trouver de nombreux plugins pour le faire. Certains sont gratuits pour une utilisation sur des petits sites, d’autres fonctionnent au forfait, à vous de faire votre choix.

A noter : personne n’a été rémunéré pour cet article.

 

Vous pourriez lire également ... SEO

Une fiche produit SEO performante

Point d’entrée essentiel sur un site e-commerce, la fiche produit se doit d’être parfaitement optimisée pour se positionner en référencement naturel sur vos requêtes longue traine. Contenu, structure, liens,  mise en forme, gestion dans le temps, tous les critères d’une bonne fiche produit sont passés en revue pour une fiche produit qui performera auprès des moteurs de recherche.

Lire la suite >

En cliquant sur "Accepter", vous nous autorisez à déposer des cookies lors de votre navigation. En savoir plus

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.

Fermer