Découvrez toutes les techniques pour réduire le poids d’une image et ainsi diminuer le temps de chargement de vos pages web. Un critère essentiel pour Google et les autres moteurs de recherche. Dans cet article, nous allons voir comment optimiser ses images pour le web.
Une image vaut mille mots, ce qui est l’une des raisons pour lesquelles les images sont si importantes dans l’univers du webmarketing. Sur internet, vos clients ne peuvent toucher les produits qu’ils sont susceptibles d’acheter. Dans de nombreuses situations, ce sont les images qui vont fortement influencer leur décision.
Une image peut notamment transmettre une émotion, une preuve de qualité ou encore, décrire l’histoire d’un produit.
Il va donc sans dire que vos images doivent être parfaitement nettes et de haute résolution.
Ceci dit, tout a un prix. Les images en haute définition peuvent avoir des tailles de fichier très lourdes. Rien de pire pour plomber le temps de chargement d’un site web. Une page lente, c’est un taux de rebond élevé et donc un signal négatif pour les moteurs de recherche.
De ce fait, il est essentiel de trouver un bon équilibre entre taille et qualité d’image.
Les 3 principaux formats de fichier
Nous allons nous concentrer sur trois formats de fichier les plus utilisés pour optimiser ses images pour le Web :
- GIF – c’est l’acronyme de Graphics Interchange Format. Il s’agit d’un format qui détient plusieurs images qui s’enchainent les unes après les autres donnant naissance à une courte animation qui tourne en boucle.
- JPG – également appelé JPEG, est le type de fichier le plus populaire pour les images sur le web. Il offre de bonnes possibilités de compression d’image, ce qui permet de diminuer le temps de chargement des pages.
- PNG – il permet, tout comme le format GIF, le détourage d’images. Là où le format GIF enregistre 256 couleurs, le PNG en détient 16.7 millions, ce qui offre un excellent rendu de nuances et dégradés. Cependant, même si au contraire du GIF, il de détient d’une seule image, le PNG pèse lourd.
Chaque type de fichier a ses propres forces et faiblesses. Il est très important de les connaître et de les garder à l’esprit. Ainsi, vous pourrez choisir en fonction des différentes situations, le format qui convient le mieux.
Pourquoi réduire le poids d’une image ?
Comme nous venons de le voir dans l’introduction, la réduction du poids d’une image est essentielle pour le référencement naturel de votre site web.
Cela dit, optimisation ne veux pas forcément dire, qualité irréprochable.
En effet, plus l’image est de haute qualité, plus elle a tendance à être lourde. Ce qui induira une augmentation du temps de son chargement du média, donc une ouverture de page plus lente. Voilà pourquoi nous parlons d’équilibre entre qualité et poids des images.
Pour réduire le poids d’une image ou photo, il faut coupler un certain nombre d’optimisations tels que la redimension et la compression.
Sur une page riche de visuels, l’optimisation de vos images peut radicalement réduire le temps de chargement de votre page web.
Avec un temps de chargement rapide, vos visiteurs passeront plus de temps sur votre site internet. De plus, votre taux de rebond (taux de visiteurs quittant votre site sans avoir parcouru d’autres pages) devrait s’améliorer, ce qui est un signe positif pour les moteurs de recherche.
De ce fait, réduire le poids de vos images et photos améliore votre classement sur les résultats de Google.
Comment réduire le poids d’une image ?
Pour optimiser ses images, il existe plusieurs solutions efficaces.
Dans un premier temps, nous allons voir comment procédé avec les logiciels accessibles sur le web.
Ensuite, nous verrons comment réduire le poids d’une image avec Photoshop.
Pour terminer, nous ferons le tour des plugins WordPress d’optimisation d’images.
Logiciels d’optimisation d’image
Compressor :
Compressor prend en charge les formats JPEG, PNG, GIF et SVG.
Ce logiciel intuitif permet de se rendre compte de la différence entre l’image d’origine et celle compressée.
Vous pouvez réduire de 90% la taille des images.
Jpeg.io :
Ce logiciel propose une interface minimaliste qui permet de convertir les 9 formats d’image les plus utilisés en JPEG hautement optimisé.
Jpeg.io couvre les JPG, PNG, GIF, SVG, BMP, EPS, PSD, TIFF et WEBP.
Il suffit de faire glisser votre image dans le dropspace pour la faire convertir en JPEG progressif.
Compresser JPEG :
Compresser JPEG vous permet de sélectionner jusqu’à 20 images .jpg ou .jpeg de votre appareil.
Vous pouvez télécharger vos images compressées séparément ou toutes d’un seul coup, groupées dans une archive ZIP.
Aussi, il vous est possible de convertir les formats, de PNG vers JPG, JPG vers PNG et SVG vers PNG.
TinyJPG et TinyPNG :
Tiny fait partie des outils de compression les plus utilisés. Il disponible en ligne et sous forme de plugin.
TinyJPG et PNG utilisent des techniques de compression intelligentes avec perte pour réduire la taille du fichier image. Chaque image téléchargée est analysée pour appliquer le meilleur encodage possible.
Optimiser ses images avec Photoshop
Parce qu’on n’est jamais mieux servi que par soi-même, réduire le poids d’une image manuellement reste la solution la plus efficace. Vous pourrez, en fonction de chacune de vos images et photos, plus ou moins accentuer l’optimisation.
Photoshop vous offre la possibilité de recadrer vos images, de modifier leur taille, réduire leur qualité et aussi changer leur format.
Pour ce faire, lorsque vous avez ouvert votre photo ou image sur Photoshop suivez les étapes suivantes :
- Cliquez sur MAJ + CTRL + ALT + S « une fenêtre s’ouvre qui vous donne accès à plusieurs commandes ».
- Si vous voulez modifier le format de votre fichier, commencez par choisir le format souhaité.
- Cochez la case « Optimisé ».
- Réglez la qualité de l’image de 0 à 100.
- Redimensionnez votre fichier media à la taille adaptée.
Vous pourrez vous rende compte de la dégradation de la qualité de l’image. L’objectif étant d’alléger le plus possible le media sans pour autant que ce soit visuellement perceptible.
De plus, même si l’idée est d’optimiser vos images et photos au cas par cas, vous pouvez créer des scripts pour effectuer des traitements par lot, afin d’optimiser un dossier d’images en quelques minutes.
Plugins pour réduire le poids de vos images
Compress JPEG et PNG images :
Ce plugin optimise automatiquement toutes vos images en s’intégrant aux services de compression d’images populaires TinyJPG et TinyPNG.
Après avoir téléchargé une image sur votre site WordPress, chaque image redimensionnée est téléchargée sur le service TinyJPG ou TinyPNG. Vos images sont analysées pour appliquer les meilleures optimisations possibles.
En fonction du contenu de vos images, une stratégie optimale est choisie. Le résultat est renvoyé sur votre site WordPress et remplacera l’image d’origine par une image plus petite.
En moyenne, les images JPEG sont compressées de 40 à 60% et les images PNG de 50 à 80% sans perte de qualité visible.
ShortPixel Image Optimizer :
ShortPixel est un plugin d’optimisation d’image léger, facile à utiliser, qui compresse toutes vos images et documents PDF en un seul clic.
Vos nouvelles images sont automatiquement redimensionnées et optimisées en arrière-plan.
Il est également compatible avec n’importe quelle galerie, plug-in de commerce électronique.
BJ Lazy Load :
Ce plugin est un peu particulier, il n’optimise pas vos images mais modifie la manière dont elles sont chargées.
BJ Lazy Load permet d’économiser la bande passante de votre site web en mettant en place un chargement paresseux. Ainsi, vos pages chargent plus rapidement.
Ce plugin remplace toutes vos images de publication, miniatures, gravatar et iframes par un espace réservé. Il charge le contenu à mesure que le visiteur fait défiler la page. Fonctionne aussi avec les widgets de texte.
Puisqu’il fonctionne avec les iframes, il couvre également les vidéos intégrées de YouTube, Vimeo, etc.
Si vous avez des images dans des modèles personnalisés ou si vous souhaitez charger paresseusement d’autres images dans votre thème, vous pouvez passer ce code HTML via un filtre :
<?php $img_html = ‘<img src= »myimage.jpg » alt= » »>’; $img_html = apply_filters( ‘bj_lazy_load_html’, $img_html ); echo $img_html; ?>