Les dernières études que j’ai pu lire confirment bien l’importance d’avoir un site qui performe en SEO d’autant plus s’il est dédié au e-commerce. Celà passe par tout un tas de paramètres comme la réponse serveur, le nombre de js et la taille des css etc… mais on oublie que la plupart du temps le facteur le plus important reste la taille des images.

En tant que Directeur Artistique Web et Graphiste de formation, je suis encore sidéré de voir le nombre d’images inutilement lourdingues qui plombent littéralement la durée d’affichage sur un site web. Vous pensez que les gros du e-commerce ou les sites leaders sont exemplaires ? Détrompez-vous !

Alors oui, vous me direz qu’une image dégueulasse ne donne pas envie d’acheter et que c’est pour celà que l’on trouve des images si lourdes sur la plupart des acteurs. Mais quand vous savez qu’après 1 seconde passé sur votre site, le taux de transformation dégringole de manière nette, il est primordial de s’y intéresser. Je vais vous montrer qu’on peut garder une qualité d’image acceptable avec un gain de poids colossal !

Voici quelques exemples :

-Je prends un géant de la lingerie sur internet (domaine ultra-concurrentiel) et tombe sur une page catalogue et voici ce que je constate : des dizaines d’images non optimisées. Si chaque image fait 200ko celà peut paraitre peu mais multiplier celà par le nombre de références et la page peut être lourdingue à charger. Voilà ce que donne une optimisation :

Franchement, vous voyez une réelle différence ? Pourtant la deuxième pèse à peine 100ko soir un gain de près de 50 % !

Autre exemple chez un géant de la cuisine :

Quand j’ai vu que ses images s’affichaient ligne pas ligne, je n’ai pu m’empêcher de passer la money page sur GT métrix et voilà le résultat sans appel !

Le score est catastrophique, surtout que les images sont utilisées en full qualité pour s’afficher en vignettes ! En ce qui concerne le test image en lui même, l’optimisation donne un résultat tout aussi probant :

J’ai calculé qu’en optimisant toutes les images de cette page, on gagnerait 3,5 mo ! Et vous n’allez pas me dire que celà n’aura pas d’impact sur le taux de transfo : bien sûr que si !

Surtout à l’heure où les gens consultent à partir de devices mobiles, il est primordial d’avoir un site rapide et le levier numéro 1 concerne l’optimisation de vos images !

Alors comment faire ? S’il y a bien des sites en ligne qui permettent par un tour d’opti automatique de réduire le poids, je vous le déconseille fortement et le meilleur outil pour celà est Photoshop. Si vous ne le possédez pas, investissez ou faites appel à un ami qui l’utilise. C’est le plus performant pour ce qui est de garder un ratio qualité/poids optimal.

Tout d’abord faites bien la distinction entre 2 types d’images :

-1/Les images de type « bitmap » qui utilisent beaucoup de nuances et de dégradés ce sont celles qui sont le plus délicat à optimiser (photos, dessins en couleurs etc…).

-2/Les images de type « aplat » : classiquement les icônes, les boutons, ou oeuvres graphiques…

1/Pour le cas des bitmaps, il faut utiliser la fonction de photoshop « enregistrer pour le web ». Le meilleur format d’export reste le « jpeg » pour une image fixe. Jouez sur le curseur tant que vous ne voyez pas de différences flagrantes avec l’image d’origine. Par expérience, quand on descend sous les 45 % ça commence à piquer les yeux.

Il en va de soit qu’il va falloir aussi resizer à la taille voulue dans votre template de site web, surtout pas d’images resizées  en force avec du code !

2/Pour les images « aplats », il faut privilégier ici l’export en .png ou .gif qui ont le mérite de garder les contours « nets » même sur de grosses optimisations contrairement au .jpeg qui va « flouter ». Ici vous pouvez vous faire plaisir et vous allez voir que vous pourrez avoir des « placards de couleurs » qui ne pèseront que quelques ko ! :). Vous pouvez jouer sur le nombre de couleurs, le tramage etc… De plus, le .png et le .gif permettent de garder votre fond « transparent ».

Petite astuce : on peut même encore optimiser des .png avec le filtre ‘isohélie’ qui permet de réduire le nombre de couleurs (très utile si vous êtes contraints d’utiliser ce format pour des photos).

Voilà, donc maintenant retournez sur votre site et vous savez ce qu’il reste à checker 😉

NB: j’ai volontairement gardé une qualité d’image élevée sur cet article pour pouvoir juger les différences de compressions d’images évidemment !

Article sur le même sujet : http://css-ig.net/articles/optimiser-images-web