Conseils graphiques Sites web

Comment optimiser vos images pour le web ?

Publié par Jérôme Dajoux

Dans tout projet web, les images ont un rôle important à jouer. Seulement voilà, il est fréquent que celles qui devaient apporter une valeur ajoutée à un site lui nuisent finalement plus qu’elles ne lui profitent.

Besoin d'un graphiste ?
Trouvez gratuitement un graphiste qualifié et disponible !

Déposez votre annonce

Vous êtes graphiste ? Créer un compte gratuitement

En effet, en misant sur de jolis visuels en haute résolution, il y a un risque important d’altérer les performances d’un site Internet et donc d’offrir une expérience mitigée aux utilisateurs, ce qui peut se traduire par des difficultés à les convertir et/ou à les fidéliser.

Par conséquent, pour disposer d’un site web performant sans négliger le design visuel, il est primordial d’optimiser vos images pour le web. Nous vous présentons dans cet article les différentes étapes pour y parvenir.

 

1. Bien choisir le format de vos images

Credit : Pagecloud

Dès lors que vous avez créé vos images, vous n’êtes pas sans savoir qu’il est possible d’enregistrer votre travail dans un grand nombre de formats différents.

Aussi, sachez dès à présent qu’il n’existe pas un format qui permet réellement d’optimiser vos images pour le web puisque tous ont des avantages mais aussi des inconvénients.

Commandez un logo personnalisé
à l'un de nos 30 000 graphistes professionnels
Pour toutes les entreprises et tous les budgets

Commander mon logo

Pour autant, mieux vaut privilégier les formats suivants :

Le format le plus utilisé est incontestablement le JPEG puisque c’est lui qui semble offrir le meilleur rapport entre la qualité de l’image et la taille de cette dernière. Toutefois, il ne conviendra pas pour toutes vos images puisqu’il ne fonctionne pas pour les images ayant un arrière-plan transparent.

Bon à savoir
Afin d’optimiser pour le web des images en JPEG, il est pertinent de les exporter en mode progressif. Sous Photoshop, ce paramètre est disponible dès lors que vous enregistrez pour le web une création graphique.

Ainsi, lors du chargement instantané de la page web, ce n’est pas version « définitive » de l’image qui est chargée, ce qui évite tout ralentissement malvenu.

Le format PNG sera principalement adapté pour des images disposant d’un arrière-plan transparent ou contenant peu de couleurs. Il ne nécessite pas d’ajustement spécifique pour l’export.

 

2. Redimensionner vos images avant de les télécharger sur votre site

 

Particulièrement vrai si vous travaillez à partir de photographies brutes, les images téléchargées sur votre site seront souvent bien plus grandes qu’il ne le faut. Or, cela signifie qu’elles vont occuper plus d’espace sur votre serveur et surtout qu’elles vont ralentir le chargement de vos pages web.

C’est pourquoi avant même de les télécharger sur votre site, il est primordial que ces images soient redimensionnées. Si vous connaissez la taille désirée, il vous suffit de les redimensionner à celle-ci avec un outil comme Photoshop, Paint ou Photofiltre.

Attention
En revanche, si vous ne savez pas quelle sera la taille d’affichage sur votre site, le bon compromis est de redimensionner votre image en définissant une largeur de 2048 pixels et une résolution de 240 DPI.

 

3. Compresser vos images pour réduire leur « poids »

Le format choisi et le redimensionnement effectué, ne vous reste plus qu’à compresser votre image pour qu’elle soit moins lourde. Bien évidemment, l’idée est de réduire le « poids » du fichier sans altérer la qualité de l’image.

Ceci est très simple à réaliser dès lors que vous disposez du bon outil.

Si vous avez suivi nos conseils jusque-là et que toutes vos images sont en JPEG ou PNG, l’outil de compression TinyPNG fait figure de référence puisqu’il est simple à prendre en main, efficace et surtout gratuit.

 

4. Mettre en œuvre la technique du flou ou le lazy loading

Credit : css-trick

Si après avoir pris soin d’optimiser vos images pour le web, celles-ci sont encore trop volumineuses et ralentissent la vitesse de chargement de vos pages, il vous est possible de mettre en œuvre deux techniques qui vont donner l’apparence d’un chargement plus rapide :

  • La technique du flou. Elle consiste à charger dans un premier temps une image plus petite afin que l’internaute ne soit pas face à une page vierge durant le chargement de l’image en taille réelle.
  • Le lazy loading. Il consiste à ne charger que les éléments visuels présents sur la partie de la page affichée à l’écran de l’internaute. Au fur et à mesure du défilement sur la page, d’autres éléments sont téléchargés.

Si votre site web repose sur un CMS, des plug-ins permettent de mettre en pratique ces techniques assez aisément. L’optimisation des images pour le web est une étape clé si vous désirez pouvoir compter sur un site Internet performant. Aussi, sélectionner le bon format, redimensionner vos images et les compresser doit devenir une habitude.

Notre conseil
D’ailleurs, pour un site sous WordPress, ces étapes peuvent être automatisées si vous le désirez en utilisant un plug-in comme Kracken.io ou Imagine.

 

 

Maintenant que vous savez comment optimiser vos images pour le web, ne reste donc qu’à faire concevoir votre charte graphique, votre flyer ou votre logo sur Graphiste.com

Laissez un commentaire