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 ?
Publiez votre annonce sur Graphiste.com et recevez une quinzaine de devis.
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.
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.
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.
pour tous vos projets graphiques
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.
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
