Pourquoi faut-il optimiser les images sur votre site internet ?

Les sites internet sont de plus en plus graphiques. Nous voulons tous mettre des super images (ou photos) sur nos sites afin de rendre nos pages visuelles et agréables à parcourir. Les connexions internet sont de plus en plus rapides, nous sommes de plus en plus nombreux à avoir la fibre.

Et puis l’ami Google vient imposer ses règles… C’est la version mobile de votre site qui est analysée pour définir votre position. Ce qu’on appelle le mobile-first.

Le BA BA sur les images

La résolution des images

Sur internet, la consultation s’effectue sur un… Ecran ! D’un écran à l’autre, la qualité rendue ou même le réglage peut altérer une image d’un utilisateur à l’autre. À la différence d’une impression papier, ou plus le grain est fin, plus la qualité est visible, sur le web, il n’est pas pertinent d’intégrer des images supérieures à 72 DPI (Dot Per Inch, ou point par pouce). Cette mesure reste importante pour un tirage photos, une numérisation.

Pour fait simple, on parle plus communément de pixel.

Dot => Point => Pixel

La taille des images

Le format se définit sur le standard des tailles d’écrans, qui sont de plus en plus grands. Actuellement, la taille standard doit s’approcher d’un format de 1920 x 1080 px en 72 DPI (la résolution donc)

On utilisera donc un ratio proche de ce format pour redimensionner la taille de ses images. Et en utilisant un ratio, on obtient la taille d’une image 1/2 Colonne, 1/4 colonne…

La plupart des thèmes que nous utilisons pour les sites web nous offrent également la possibilité de configurer la largeur maximale d’écran.

Le poids des images

Le poids d’une image se mesure en ko (pour kilo octet) et parfois en Mo (Méga octet).

Faisons simple, plus le poids d’une image est élevé, plus il faut de temps pour que l’image s’affiche sur une page web.

Selon le choix de l’hébergement mutualisé, la taille de stockage peut être limitée.

Le format des images

Parmi les plus courants, il y a le format jpeg, le gif (image animée), le svg (image vectorielle), le png (image avec transparence) et depuis peu, le format WebP (Encore une idée de Google !).

Le png étant le format le plus lourd. Le jpeg celui qui va le plus souffrir de perte de qualité, le svg n’est pas supporté partout (problème de sécurité) et le format WebP semble prometteur en réduisant le poids d’une image sans déprécier sa qualité. C format n’est pas supporté par tous les navigateurs, surtout des versions anciennes (Chrome, IE, edge… notamment).

L’optimisation des images

C’est devenu monnaie courante, on vous l’a dit, vous l’avez lu : vous devez optimiser les images de votre site.

Les performances d’un site et le temps de chargement des pages sont devenues une de nos priorités. Nous sommes tous d’accord : Quand un site est trop lent, l’utilisateur quitte le site et il va visiter le suivant. Il n’a pas envie d’attendre ne serait-ce que 5 secondes pour voir votre page s’afficher. Et encore, je suis large. En général, à 2,5 secondes, vous l’avez déjà perdu.

Redimensionner les images, à quoi ça sert ?

Gagnez quelques secondes à quelques millisecondes en temps de chargement de vos pages web.

À quoi cela sert-il d’intégrer une image qui fait 5000px x 3000 px pour un affichage de 640p x 480 px ? Si ce n’est à perdre du temps. Souvent, les personnes qui font leur site eux-mêmes pensent justement que c’est perdre du temps que de redimensionner une image. C’est perdre du temps une fois, c’est sûr. Et puis, l’image se redimensionne automatiquement.

Une image de cette taille a en moyenne un poids de 1 à 2 Mo (gloups^^). Sachant que, bien souvent, vous avez plusieurs images sur une même page, imaginez le temps qu’il faut pour que la page s’affiche.

Bref, faites au mieux. Utilisez des outils pour vérifier la taille de vos images. Si vous utilisez Firefox, faites un clic droit sur l’image, puis sélectionner « informations sur l’image »

Même si c’est quelques pixels, ça se prend ! Et ça vaut « vraiment » le coup d’ajuster au mieux la taille d’une image.

Le nom de vos images, c’est bon pour le SEO

Vous avez tous des dossiers de photos : de vos enfants, de vos voyages, de … Ok ! Peut-être au début vous ne les avez pas renommées, classées. On l’a tous fait ! Jusqu’au jour ou on se retrouve avec quelques centaines d’images qui s’appellent IMG_0001, IMG_0002, IMG_0003 … et C’est la même pour chaque format.

Maintenant, nous avons aussi nos sites internet et nous aimons tellement partager nos plus belles images. Comme nous avons été victimes de IMG_000xX, nous savons comment renommer une image : un clic droit (ou la touche F2) et renommer.

Pour le web, c’est la même chose. Les moteurs de recherche référencent les images des sites web. Les robots de crawl (ou crawleur) ne savent pas encore interpréter les images, ils vont collecter le nom de l’image pour la référencer.

Pour cela, quelques petites règles de bon sens :

1. Pas d’accent, pas de ponctuation quand on nomme une image. Par exemple, capture d’écran peut empêcher l’affichage d’une image selon le navigateur de l’utilisateur (voire un client potentiel !),
2. Pas d’espace, utiliser le tiret (du 6 !!!) pour combler les espaces,
3. Eviter les stopwords : le, la, des, en, et… ,
4. Rester simple, synthétiser. Par exemple, nommer votre image « plage-banyuls-PO.jpeg » plutôt que « la-plage-de-banyuls-est-la-plus-belle-des-PO-occitanie-france1280x124.jpeg ». C’est du déjà vu, malheureusement… Donc simple, synthétique.

En résumé, glissez une expression de mots clés en relation avec l’image et la thématique ! Et en respectant les préconisations ci-dessus.

La balise « alt » ou texte alternatif

Un texte alternatif, par définition, s’affiche lorsqu’une image n’est pas affichée. Concernant les images d’un site, la balise « alt » a plusieurs fonctionnalités, toutes aussi importantes les unes que les autres :

1. Les robots de crawl vont collecter cette information afin de comprendre ce que représente le visuel qui lui est associé. Comme je l’ai mentionné plus haut, les robots ne savent pas encore lire les images. Tôt ou tard, l’IA (Intelligence Artificielle) trouvera une solution pour aider le bot à interpréter les images. Le robot utilise l’information renseignée dans la balise alt pour assimiler ce contenu à son contexte : la page (ou l’article).
2. Les lecteurs visuels, pour les personnes malvoyantes notamment, vont lire le contenu de la balise alt à l’utilisateur. De la même manière que les bots, le lecteur ne sait pas lire une image.
3. C’est bon pour le SEO. Ou plutôt, ce serait se priver de quelques points positifs dans la grille de référencement des moteurs de recherche.

Évidemment, quand il s’agit d’un picto, une icône out toute autre miniature, inutile de renseigner le texte alternatif.

Ce point est abordé de manière très concrète dans la checklist des bonnes pratiques du web, du site Opquast.

Comment optimiser les images

L’optimisation est différente de la taille de l’image. C’est une sorte de surcouche qu’on apporte à l’image afin de la rendre plus « légère », ou surtout plus rapide à charger.

Pour cela, il existe nombreux outils de compression qui font le job pour vous.

Outil gratuit d’optimisation des images en ligne

J’ai l’habitude de travailler avec compressor.io. Simple d’utilisation, rapide, efficace et gratuit ! Gratuit jusqu’à 10 Mo par jour, ou 50 images. La compression est prédéfinie sur Lossy, qui convient parfaitement au web. Possibilité de personnaliser le taux de compression.

Accédez au site https://compressor.io/. Cliquez sur « select files » ou glissez/déposez vos images à optimiser. Téléchargez, c’est terminé !

L’affichage du poids de l’image avant /après est assez intéressante.

À noter que les images ne sont pas stockées sur les serveurs de l’outil. Elles sont supprimées dès que vous fermez la page du navigateur. Compressor est en anglais.

Parmi les outils gratuits en ligne les plus connus, il y a également TinyJPG et TinyPNG, représenté par un panda inspirant qui croque un bambou (<3). Ces deux sites, auparavant spécifiques à chacun des formats, ne font plus qu’un. Ils sont maintenant en capacité de traiter : JPEG, PNG et WebP. Optimisation des images gratuite en ligne, avec d’autres fonctionnalités intéressantes comme un plugin pour Photoshop, un accès à l’API (pour les développeurs) et un analyseur de page, qui analyse les images sur la page et le temps de chargement gagné si vous optimisez vos images. Tinyfy est en anglais.

Imagify propose également un outil d’optimisation d’images en ligne disponible pour tous les sites, que ce soit un WordPress, Joomla!, Prestashop….. Imagify permet de supprimer les données exif de vos photos, et conserve l’image originale sur ses serveurs, disponible depuis le compte client que vous aurez créé au préalable. Ainsi, vous pouvez réutilisez la version originale de vos images, à tout moment.

Comme Tinyfy, imagify vous propose un analyseur de page et vous préconise les images à optimiser. Il fait même le job pour vous, et vous propose de récupérer les images optimisées. Imagify est en français.

Vous pouvez tester gratuitement Imagify.La version gratuite vous permet d’optimiser 20 Mo d’images par mois. Les tarifs sont vraiment abordables et le service est vraiment qualitatif. Imagify est aussi une extension populaire pour gérer la compression des images d’un site WordPress.

Optimiser les images de son site WordPress avec Imagify

Imagify est également disponible pour s’intégrer à votre site WordPress. Cette extension fait partie de ma boite à outil. Développé par Wpmedia, une équipe qui se soucie réellement d’accélérer les pages de vos pages, puisqu’ils ont également développé WpRocket !

Imagify s’installe en quelques minutes sur votre site WordPress. Rendez-vous dans Extension > Ajouter > Taper « imagify » dans la barre de recherche. Au cas où, vérifiez la compatibilité avec votre version de WordPress. Installez, puis activez l’extension. Créez votre compte, récupérez votre clé de licence, même pour la version gratuite. Coller la clé dans l’extension et commencez à optimiser vos images. Pour chaque image optimisée, vous pouvez visualiser le ratio avant/après.

Vous aurez aussi la possibilité de définir le taux de compression qui vous semble le plus adapté : Normal, agressif ou ultra. Tout est très bien expliqué, pour vous faciliter le travail.

Imagify permet de créer une version WebP de toutes vos images.

Vous disposez d’un volume de 20 Mo mensuel, pour la version gratuite. Le tarif est très abordable, c’est le même que la version en ligne.

Optimiser les images de son site WordPress avec WP Smush

WP Smush, anciennement Smush.it, est probablement l’outil de compression le plus utilisé sur WordPress, avec plus d’un million de téléchargement. C’est un freemium : une version gratuite et une offre premium à $90/an.

En plus de compresser le poids de vos images, il vous permet :

• de convertir vos png au format jpeg
• de configurer le Lazy load*, pour gagner encore des millisecondes sur le temps de chargement de vos pages.
• de définir le taux de compression

Facile à configurer, de manière intuitive, ce plugin gère les formats suivants : Jpeg, png, gif, svg et même les iframes, quand il s’agit de l’option Lazy Load.

lazy load est une fonctionnalité qui permet de (télé)charger les médias uniquement si le visiteur atteint le niveau de la page ou votre image est positionnée.

Produit de la Société WPmudev, qui propose de nombreux autres plugins qui visent la performance, le SEO, la sécurité, … Bref, une panoplie d’outils bien utiles sur un site WordPress.

Il existe moultes extensions pour optimiser les images de votre site. Je ne les connais pas toutes, et il me semble inopportun de présenter une liste d’extension que je n’ai pas testé au préalable.

Optimiser les images de son site, c’est bon pour la planète !

Dans cet article, vous avez pu voir pourquoi et comment il est important d’optimiser les images de son site web :

• Gagner en temps de chargement des pages, notamment sur mobile
• Référencement des images
• Accessibilité numérique
• Optimiser les images sans perte de qualité

Les images, comme tous les contenus de votre site, sont stockées sur un serveur, dans un datacenter. les datacenters consomment beaucoup d’énergie pour fonctionner : énergie (électricité), climatisation pour éviter la surchauffe, réseau pour faire circuler l’information.

Chaque fois que vous optimisez un contenu en poids et en taille, vous réduisez l’espace alloué sur le serveur.

Cela vous semble peut être superficiel. Ou peut être que cela vous rappelle la légende du colibri.

Un autre point, bien souvent oublié : la connexion internet. Aujourd’hui encore, il reste des zones blanches où la connexion est très mauvaise. Cela concerne une minorité de population en France.

Cela peut être le cas si votre site a une portée internationale, il existe encore des zones blanches partout sur la planète. La fibre n’est pas déployée partout, le débit n’a pas le même flux partout.

Chaque petit point d’optimisation peut contribuer à rendre l’expérience utilisateur meilleure.