Optimiser les images pour le web

Optimiser les images pour le web

Qui n'a jamais visité un site ou le temps de chargement des images était hallucinant ? A tel point qu'il était possible d'aller se faire couler un Nespresso pour patienter.

Alléger le poids des images

Une chose importante à retenir lorsque l'on monte un site Internet, c'est la vitesse à laquelle les pages vont se charger. Plus ce sera rapide, plus les visiteurs et les moteurs de recherche apprécieront.

Bien souvent, vous avez besoin d'images pour illustrer vos pages de site ou vos articles de blog. Certains d'entre vous vont acheter leurs photos sur des sites spécialisés, d'autres vont utiliser celles prises avec leur appareil-photo numérique. Et là, lorsque vous transférez vos photos sur l'ordinateur, bien souvent le poids est supérieur à 2 Mo.

Les uploader sur votre site sans diminuer leur taille, donc leur poids, c'est se tirer une balle dans le pied. Dans la majorité des cas, la photo mesure 3200 x 2400 pixels. Aujourd'hui, quasiment aucun écran ne peut afficher une image de cette taille sans ascenseur vertical et horizontal. Vous l'avez compris, le confort n'est pas au rendez-vous.

Une lenteur d'ouverture pénalisante

Depuis que je gère le portail Infinisearch, je suis confronté à ce problème. J'utilise le service de Robothumb pour la génération automatique des vignettes à partir de l'URL du site. J'ai constaté à plusieurs reprises, et plus particulièrement sur les sites utilisant des sliders en jQuery, que les vignettes créées sont incomplètes.

Exemple de site où les images ne sont pas totalement chargées

Pour avoir échangé par mail avec le responsable de Robothumb, celui-ci m'expliquait que le robot restait environ 7 secondes sur le site afin de s'assurer que la vignette soit la plus propre possible. Donc lorsque le visuel généré est incomplet, cela veut dire que le site met plus de 7 secondes à s'afficher en totalité. C'est tout simplement beaucoup trop long. La raison est toute simple : les images sont trop lourdes !

Utiliser un outil gratuit pour le traitement d'images

Une fois que vous avez intégré ces paramètres, vous êtes fin prêt pour vous occuper de redimensionner vos images. Pour cela, je vous conseille d'utiliser le logiciel gratuit Photofiltre (utilisateurs PC). Sur Mac, Apercu devrait largement faire l'affaire ;) Tout le monde n'a pas les moyens de s'offrir Photoshop :-)

Une fois le fichier ouvert dans le logiciel, vous redimensionnez l'image et n'oubliez pas de choisir 72 pixels/pouces pour la résolution. Les images destinées à s'afficher sur un site n'ont pas besoin de la même résolution qu'un fichier destiné à l'impression. Pour terminer, vous l'enregistrez au format GIF, JPG ou PNG. Pour la qualité, ma préférence va au dernier cité.

Vous pourrez constater que vos images s'afficheront bien plus rapidement sur votre site ;)

Catégorie Tutoriels - Écrit par le 26/01/2011 - Article lu 2 301 fois - 18 commentaires

18 réflexions sur ce billet

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 :-) )

Écrit par Ostéopathe du site http://www.osteopatheparis15.fr
Le 27/01/2011 à 16h26

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 !

Écrit par Marc
Le 07/02/2011 à 22h46

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...)

Écrit par stephanie du site http://www.artojardin.com
Le 10/02/2011 à 16h09

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.

Écrit par Elise du site http://www.elunity.net
Le 15/02/2011 à 11h14

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.)

Écrit par Hervé
Le 20/02/2011 à 23h57

Merci Djolhan pour le lien d'ImageSizer.

Je ne connaissais pas et je vais sans aucun doute l'utiliser ;)

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 !

Écrit par evenstood du site http://www.cava49.org
Le 11/03/2011 à 00h51

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.

Écrit par nesk du site http://www.nesk.fr
Le 17/03/2011 à 20h52

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

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

Écrit par Lionel
Le 06/04/2011 à 15h20

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

Les commentaires de ce billet sont fermés

Haut de page