Optimiser les images pour le web

Sur mon site Binette & Jardin, j'ai aussi eu pas mal de problèmes pour les miniatures de Robothumb, sur des boutiques de jardinage en ligne, pour cette même raison.

Depuis hier, je test le service de miniature de miwim, qui semble gommer ce défaut (ne me demande pas pourquoi :-) )

Le principal est bien sûr de réduire la taille de l'image. Ensuite, pour optimiser encore plus, les utilisateurs des dernières versions de Photoshop peuvent faire : Fichier => Enregistrer pour le Web et les périphériques.

Ensuite, il suffit de choisir un pourcentage égal à 60% pour la qualité de l'image, cela réduit la qualité sans que l'oeil humain puisse voir la différence.

Au final, gr‚ce à ces deux petites choses, on peut atteindre une taille vraiment restreinte en Ko.

Je pense que le JPG est un deca en dessous car il ne gère pas la transparence.

La vitesse de chargement est devenue en quelques années un facteur primordial dans l'optimisation du référencement d'une page. D'ailleurs Google propose dans son Google Webmaster Tools > Tools > Performance du Site, un outil qui va vous permettre de connaitre la vitesse de chargement de vos pages et de savoir les modifications à effectuer. Je recommande également Page Speed.

J'ai pu ainsi diviser par 2 le temps de chargement de mon blog en réduisant certaines images, enlevant des publicités (souvent lourde), diminuant le nombre d'articles par page, etc...

Pour ce qui est des images, je conseille le .jpg pour être sur de son coup car il existe encore des navigateurs qui gèrent mal les autres... le .png notamment...

Un petit dicton : alléger pour mieux référencer !

C'est clair que de nos jours, toutes images qui dépasse les 30ko peut devenir problèmatique, d'autant plus que Google pénalise les sites lents depuis quelques mois !

Pensez également à bien remplir la balise ALT et également la balise TITLE utiles pour les navigateurs autres que IE.

Il est vrai que le temps de chargement des images est un facteur important avec les nouvelles règles de Google. Dans mon cas, j'ai du coup optimisé les images que j'affiche, mais la contrepartie c'est que l'on perd quand même en qualité de l'image.

Un autre facteur important est celui de l'hébergeur, plus celui ci est loin, et plus le temps de chargement d'une image est longue... Le mieux est donc d'avoir un hébergeur rapide situé en France (je vous laisse deviner...)

Je pense que pour avoir une bonne comptabilité avec toutes les version de IE et pour avoir de la transparence le GIF est la meilleure extension.

Photofiltre est en effet très bien pour le redimensionnement d'image.

J'utilise photophiltre car il est simple d'utilisation et suffisant pour mon site.

Au début de la création de mon site j'avais mis pleins d'images car je trouvais cela joli et personnalisé et j'avais pas vraiment pensé aux poids des images ainsi qu'aux temps de chargements de ces images et des pages... C'était horrible le temps fou que ça mettait pour charger, comme dit un peu plus haut on a le temps de se couler un Nespresso et bien pour mon site c'était non seulement se couler un Nespresso mais également amplement le temps aussi de sortir le chien en promenade ^^.

J'ai depuis arrangé cela et si je devais ajouter des images je vérifie après que ça charge vite. Par contre j'utilise pas les images en gif et préfère des images figées.

Dans le même genre, il existe aussi un logiciel fonctionnant avec adobe air : il s'agit d'image Sizer, l'avantage, c'est qu'il peut redimensionner à la volée des dizaine d'images en même temps.

Cela dit, lorsque le cms est bien fait, l'image est redimensionnée automatiquement et permet ainsi d'alléger son poids. (wordpress, prestashop etc.)

Intéressant comme petit article ;)

Mas le problème c'est que l'on ne sait toujours pas qu'elle place prend ce facteur, faut que je me note ça dans mes test SEO tiens !
Hop, noté !

Le poids des images et d'une page Internet est effectivement un facteur pour le référencement. Un outil que j'ai utilisé pour notre site de téléphone inversé est smushit.com qui permet de supprimer des informations liées aux images. Même compressées avec les outils cités, on peut encore gagner de précieux Ko. De mémoire, j'ai gagné près de 20 ko sur annuaire inverse.com

J'utilise photoshop et la fonction "enregistrer pour le web" et ça limite pas mal la taille, ne pas oublier aussi que si vous créez des images pour le web, faites le avec une résolution de 72dpi, au delà c'est inutile.

On peut aussi scripter le resize pour traiter des paquets d'images. Mais je vais tout de même tester le logiciel que propose Djolhan parce que je me tourne de plus en plus vers des logiciels tournant sur adobe air !

J'y repense, c'est un sujet intéressant comme je l'avais déjà fait remarqué. Mais c'est surtout un problème pour les sites e-commerce et les blogs car entre les plugin et la multitude de photos cela pose un réel problème sur la vitesse...

Et quand bien même le SEO n'est pas affecté, c'est l'expérience utilisateur qui est franchement compromise...

Photofiltre est très facile à installer, très facile d'utilisation, pas besoin d'avoir de connaissance ! Merci beaucoup.

Je pense qu'il peut être bon de rappeler :

jpg = pas de transparence
gif = nombre peu élevé de couleurs + transparence
png = transparence + degradés

Bonjour Hervé,

Très important de trouver l'équilibre optimisation/qualité des images surtout lorsque l'on se retrouve avec toute une gamme de photos sur une même page Web.

amicalement