Logo Naga Création
compression-des-images-sur-un-site

Comment optimiser les images de mon site ?

par | 24 01 2024

La taille des images est très importante pour la rapidité de chargement de votre site. C’est pourquoi vous devez  systématiquement les optimiser. Avoir de belles images est agréable pour l’aspect visuel du site mais il faut également penser à ses performances. Il est totalement inutile de charger une image haute résolution pour l’afficher sur un écran d’ordinateur ou de téléphone. Le format ne requiert pas une si grande taille et à quoi bon si elle met plusieurs minutes à se charger ? Votre visiteur sera déjà parti de votre site web.

S’il y a une règle à retenir c’est de ne pas dépasser les 100 Ko pour des images standards et 300 Ko pour des images bannières qui prennent toute la largeur de l’écran. Les bannières sont souvent utilisées en en-tête de page. Sachez que pour un bon référencement, Google tient compte de la vitesse des pages lorsqu’il les indexe.

Dans cet article, nous allons voir quels sont les formats à privilégier et quels outils utiliser pour compresser les images sans perdre en qualité.

Le choix du format d’image est le premier pas décisif dans l’optimisation. Découvrons les différents types d’images que vous pouvez utiliser, leurs avantages et leurs inconvénients. Choisir judicieusement entre ces formats peut réduire considérablement la taille de vos fichiers image sans dégrader la qualité visuelle.

Jpeg

Ce format est idéal pour les photos et les images avec de nombreux détails et couleurs. Sa compression est élevée.

Png

Le format png est préférable pour les graphiques, les logos et les images avec transparence. Si vous ne voulez pas de fond, il est idéal. Utilisez le pour vos logos également.

WebP

Ce format est plus récent et offre une excellente compression et qualité, compatible avec la plupart des navigateurs modernes. À ce jour, plus de 90 % des internautes utilisent des navigateurs qui prennent en charge le format WebP.

AVIF

Le format AVIF est une nouvelle extension pour les images qui va remplacer le format WebP. AVIF vous permet d’atteindre des niveaux de compression d’image encore plus élevés, et la qualité des images converties après optimisation de l’image est meilleure qu’avec WebP.

%

C'est l'augmentation du taux de rebond lorsque le temps de chargement d'une page passe de 1 à 3 secondes.

Source : Etude Google

 

Quels outils utilisés pour optimiser les images de votre site ?

La compression est essentielle pour réduire la taille des fichiers images. Des outils en ligne comme TinyPNG ou ImageOptim permettent une compression efficace sans une perte notable de qualité. Vous pouvez également utiliser des logiciels comme Photoshop pour redimensionner vos images.

En complément, utilisez des plugins gratuits pour WordPress, tels que Smush ou Converter for media. Ils permetent de compresser automatiquement vos médias. L’astuce est de trouver le juste équilibre entre la taille du fichier et la qualité visuelle, en évitant une compression excessive qui pourrait dégrader l’apparence de vos images. Pour ma part, j’utilise Converter for média que je trouve très pratique d’utilisation. L’outil compresse vos images en masse puis chaque fois que vous importez un nouveau média, il le réduit automatiquement.

Toutefois, je vous conseille de vous assurer que vos images ne dépassent pas 100 Ko avant de les charger dans votre médiathèque WordPress.

La taille idéale suivant le format

Adaptez la taille des images à leur utilisation réelle sur le site. Par exemple, il n’est pas nécessaire d’avoir une image de 4000 pixels de large pour une zone d’affichage de 800 pixels. Voici quelques lignes directrices générales pour les tailles d’images les plus courantes :

Les images standards

800×500 pixels
Pour le contenu tel que les articles de blog ou les pages de produits

Les bannières

1920×600 pixels
Généralement, une largeur de 1920 pixels est suffisante pour couvrir la plupart des écrans tout en gardant un fichier de taille raisonnable.

Les favicons

32×32 pixels (format carré)

Les icones et les logos

Les icônes et les logos n’ont pas besoin d’être très grands. Une taille de 100 à 300 pixels est souvent suffisante, en fonction de l’endroit où ils sont utilisés.

Il est également important de noter que, avec l’augmentation des écrans à haute résolution (comme les écrans Retina), il peut être nécessaire de fournir des images de taille double pour maintenir une apparence nette. Par exemple, pour une image qui sera affichée à une taille de 500×500 pixels, fournir une image de 1000×1000 pixels garantira qu’elle reste nette sur tous les appareils.

Enfin, l’utilisation de techniques de responsive design, où différentes tailles d’images sont servies en fonction de la taille et de la résolution de l’écran de l’utilisateur, est une pratique de plus en plus courante pour offrir la meilleure expérience utilisateur tout en optimisant les performances du site.

Le lazy loading

Le lazy loading, ou chargement paresseux, est une technique d’optimisation cruciale pour améliorer les performances et l’expérience utilisateur d’un site web. Cette pratique consiste à charger les éléments d’une page web, tels que les images ou les vidéos, uniquement lorsque ceux-ci entrent dans le champ de vision de l’utilisateur, plutôt que de les charger tous simultanément au chargement initial de la page. Cela réduit considérablement le temps de chargement initial, minimise l’utilisation des données pour l’utilisateur et diminue la charge sur le serveur.

Dans un contexte où les images constituent souvent une part significative du poids d’une page, le lazy loading peut avoir un impact majeur. Par exemple, si une page contient une grande galerie d’images, sans lazy loading, toutes les images seraient chargées dès l’ouverture de la page, ralentissant potentiellement le processus. Avec le lazy loading, seules les images en haut de la page seraient chargées initialement. Les autres images se chargeraient progressivement, au fur et à mesure que l’utilisateur fait défiler la page.

Cette technique améliore non seulement la vitesse de chargement des pages mais contribue également à une consommation de ressources plus rationnelle, rendant les sites plus écologiques. De plus, avec l’amélioration de l’expérience utilisateur et la réduction de la bande passante utilisée, le lazy loading se présente comme une stratégie gagnante pour les propriétaires de sites web soucieux de performance et d’efficacité.

optimiser les images sur un site internet

Testez les performances

Utilisez des outils comme Google PageSpeed Insights, GTmetrix ou Lighthouse pour évaluer la performance de vos images et obtenir des recommandations spécifiques.

Une fois les images de votre site web optimisées, il est crucial de tester ses performances pour évaluer l’impact de ces optimisations. Des outils tels que Google PageSpeed Insights, GTmetrix, et Lighthouse offrent une analyse approfondie de la performance de votre site. Google PageSpeed Insights, par exemple, analyse votre site et fournit un score de performance, ainsi que des recommandations spécifiques pour améliorer la vitesse de chargement des pages. Cet outil mesure des aspects tels que le temps nécessaire pour afficher le contenu le plus significatif (First Contentful Paint) et le temps avant que la page ne devienne interactive (Time to Interactive).

GTmetrix va plus loin en fournissant des détails sur le temps de chargement total, le nombre total de requêtes, et la taille totale des pages. Il offre également des aperçus visuels tels que des diagrammes en cascade qui montrent comment les ressources sont chargées. Lighthouse, intégré dans les outils de développement de Chrome, permet une analyse plus technique, avec des audits pour la performance, l’accessibilité, les applications web progressives, et plus.

En utilisant ces outils avant et après l’optimisation des images, vous pouvez obtenir une mesure quantitative de l’amélioration de la performance. Cela vous permet d’ajuster votre stratégie d’optimisation pour atteindre les meilleurs résultats possibles, en assurant un site rapide et réactif, crucial pour une expérience utilisateur optimale et un bon classement SEO.

Temps-de-chargement-du-site-Naga-Créationv

Conclusion

Optimiser  les images de son site est crucial pour sa performance. En choisissant le bon format, en compressant sans perdre en qualité, en redimensionnant intelligemment, en utilisant des CDN, en implémentant le lazy loading et en optimisant pour le SEO, vous pouvez considérablement améliorer la vitesse de votre site et l’expérience utilisateur. Cela nécessite un équilibre délicat entre la qualité visuelle et la performance technique, mais avec les bons outils et techniques, c’est un objectif tout à fait réalisable. Votre site n’en sera que plus attrayant, tant pour les utilisateurs que pour les moteurs de recherche.

Mes prestations

Je vous accompagne dans la création de votre site internet de la première maquette à la mise en ligne. J’interviens sur la conception, le graphisme, la charte graphique, le référencement, la rédaction des contenus et la communication sur les réseaux sociaux.

Inscrivez vous newsletter

Inscrivez-vous àLa newsletter

Faîtes le plein de conseils grâce à la newsletter. Recevez chaque mois des astuces pour votre site web.

Le BLog

Les derniers articles