Les images sont l’une des raisons majeures de la lenteur du temps de chargement des sites Web, qui ont un effet négatif sur l’expérience utilisateur. Pour assurer un meilleur temps de chargement et une meilleure ergonomie, assurez-vous de réduire la taille de vos fichiers d’images.
Le format et la taille des images d’un site Web ont un impact majeur sur la vitesse de la page, et donc sur le classement dans les moteurs de recherche. Si vous voulez améliorer l’expérience utilisateur et la visibilité de votre site Web, vous devez vous concentrer sur la compression des images. Dans ce guide compact, nous vous montrerons comment faire !
A découvrir également : Comment améliorer le référencement naturel de son site web au Maroc?
Plan de l'article
Les formats d’image et leur utilisation
Il existe de nombreux formats de fichiers différents pour les images, qui conviennent à une variété d’applications différentes. Pour les images utilisées sur le web, cependant, vous ne traitez essentiellement que des formats jpeg, gif et png.
Le meilleur format d’image est considéré comme JPG (Joint Photographic Experts Group). Il est utilisé par la plupart des appareils photo numériques, sur Internet et parfois sur papier. Le principal avantage de ce format est qu’il peut être plus compressé que les autres formats d’images.
Lire également : Comment choisir les bons mots-clés pour votre tremplin numérique SEO
PNG (Portable Network Graphic) est également bien adapté pour une utilisation sur Internet. La compression de ce format de fichier fonctionne différemment de celle du format JPG, car la plupart du temps, seule la quantité de couleur de l’image est réduite. Pour certaines photos, il se peut que vous regardiez la version compressée. PNG est également capable de supporter des transparents, par exemple un logo avec un fond transparent peut être facilement intégré sur un site web s’il s’agit d’un PNG.
Les images en format GIF peuvent être animées, ce qui lui donne un avantage majeur sur JPG et PNG. Cependant, il ne peut afficher que 256 couleurs.
Pourquoi compresser des images pour le web ?
Les images sont un excellent moyen de rendre votre site Web plus illustratif et attrayant pour vos utilisateurs. Cependant, les images en particulier risquent d’augmenter la taille du fichier de votre site Web, ce qui ralentira les temps de chargement et aura un impact négatif sur l’expérience utilisateur. Les visiteurs n’auront pas la patience d’attendre que la page se charge, et quitteront rapidement votre site.
Heureusement, il existe des moyens simples et sans perte pour compresser les images pour le web.
Compression d’images avec Optimizilla & Co.
Si vous ne voulez pas installer un programme supplémentaire, vous pouvez éditer les images directement en ligne. Il existe plusieurs outils disponibles pour cela sur Internet, tels que Compressjpeg ou Optimizilla. Dans Compressjpeg, jusqu’à 20 JPG peuvent être téléchargés par glisser-déposer, et les fichiers sont ensuite automatiquement compressés. Ceux-ci peuvent ensuite être téléchargés individuellement ou sous forme d’archive ZIP.
Optimizilla a essentiellement les mêmes fonctions, mais peut faire un peu plus. L’optimiseur en ligne utilise une combinaison des meilleurs algorithmes d’optimisation et de compression pour réduire les images JPEG et PNG à la taille minimale possible tout en maintenant le niveau de qualité requis.
Un autre outil de compression d’images très utile est TinyPNG. TinyPNG utilise des techniques de compression pour réduire la taille de vos fichiers PNG. En réduisant sélectivement le nombre de couleurs dans l’image, moins d’octets sont nécessaires pour stocker les données.
Compression d’images avec Photoshop
La façon la plus professionnelle d’éditer ou de compresser des images est considérée comme étant avec Adobe Photoshop. Le programme d’édition d’images offre une variété de possibilités qui peuvent parfois vous faire perdre la notion des choses. Néanmoins, la compression d’images pour le web est très facile à faire avec Photoshop. Ouvrez l’image que vous voulez éditer et, si nécessaire, ajustez la taille en allant dans l’option de menu « Image> Taille de l’image » puis dans « Fichier> Enregistrer pour le web ». Il y a beaucoup de façons d’ajuster la taille, le format de fichier, la qualité et la compression de l’image.
Les images au format PNG ou GIF peuvent être enregistrées ici en plus de JPEG, en fonction de ce qui est nécessaire. Le seul inconvénient de l’utilisation de Photoshop est probablement que le programme n’est pas bon marché. Cela n’en vaut vraiment la peine que pour les personnes qui ont souvent besoin d’éditer des images et pour qui les autres fonctionnalités du programme sont intéressantes.
Compression d’images avec des outils gratuits
Si vous voulez compresser des images rapidement et facilement, vous pouvez utiliser des outils gratuits qui sont relativement explicites. L’un d’eux est le logiciel gratuit IrfanView, qui est disponible pour Windows et Mac. Cela permet non seulement de réduire la taille des images individuelles, mais aussi de les empiler directement sur plusieurs d’entre elles.
IrfanView est essentiellement un visualiseur d’images qui peut lire et convertir tous les formats d’images populaires. En plus des formats standard tels que JPG, GIF, PNG ou TIF, IrfanView supporte également RAW et ICO. Le programme peut compresser les images et modifier les dimensions ou la profondeur des couleurs.
En outre, les images éditées peuvent être immédiatement dotées d’un filigrane pour les protéger des droits d’auteur. IrfanView offre différentes options de compression d’images. Pour modifier la taille directement en pixels ou en pourcentage, sélectionnez la boîte de dialogue « Enregistrer », puis sélectionnez le format de fichier et le niveau de compression. Une autre possibilité est ce qu’on appelle la conversion par lots, dans laquelle de grandes quantités d’images peuvent être traitées en même temps. Ceci peut être utilisé, par exemple, pour ajuster la taille de l’image, convertir les images dans un autre format de fichier et ajuster la compression.
Conseils supplémentaires pour optimiser vos images pour un temps de chargement plus rapide
- En règle générale, vous devriez utiliser uniquement des images qui ont été optimisées pour une utilisation sur Internet. Les photos et les graphiques de haute qualité doivent être en format JPEG et les graphiques de moins de 10 x 10 pixels doivent être en format GIF.
- Indiquez la taille d’image correspondante dans le code source : si un navigateur doit calculer seul les dimensions des graphiques, cela peut entraîner un temps de chargement plus long. La taille spécifiée doit correspondre à la taille originale de l’image stockée sur le serveur. Vous pouvez également définir la sortie de la taille de l’image avec CSS.
<img src= »example.png » width= »300″ height= »200″/>
- Supprimer les méta balises et les données EXIF : si vous utilisez des images de votre propre appareil photo ou smartphone, par exemple, elles contiennent beaucoup d’informations supplémentaires telles que l’emplacement, la caméra utilisée et autres données. Vous pouvez supprimer ces informations supplémentaires avec un outil comme TinyPNG pour économiser de l’espace de stockage.
- Si le contenu d’une page contient beaucoup d’images, vous pouvez réduire le temps de chargement en utilisant un réseau de diffusion de contenu (CDN), ce qui signifie que les images sont transférées sur un serveur externe pour être disponibles plus rapidement.
Conclusion
Les images non compressées sont encore une raison courante pour les temps de chargement longs des sites Web, mais la compression des images est vraiment facile. Si vous n’avez pas besoin d’intégrer fréquemment des images sur votre site Web, vous pouvez utiliser un programme en ligne tel qu’Optimizilla.
Si vous avez besoin d’options de personnalisation supplémentaires pour la compression, vous devriez installer un programme qui offre plus de fonctionnalités, mais dans la plupart des cas, les outils gratuits sont suffisants. L’utilisation de Photoshop n’a de sens que pour les utilisateurs professionnels qui ont besoin de fonctions supplémentaires ou d’édition d’images. Comparez les coûts et les avantages possibles pour trouver le bon outil pour votre site web !
