En effet, illustrer un site avec des images, c’est plus qu’une bonne idée ! Qu’elles servent simplement d’illustration ou qu’elle représente le fruit de votre travail, votre site n’en sera que plus agréable à parcourir.
En revanche, il est certain qu’à notre époque, votre visiteur est de moins en moins patient, et si votre page prend trop de temps à charger, il constatera assez rapidement que votre site ne fonctionne pas bien, et ira rapidement voir ailleurs, compte tenu de la compétition qu’il y a sur la toile. Aussi, votre visiteur le plus sensible sera certainement Google, car son algorithme scrute la qualité des sites web et il enverra le vôtre au fin fond de son moteur de recherche, si la qualité n’est pas au rendez-vous, puisqu’il cherche à offrir à ses utilisateurs la meilleure expérience web possible !
Les erreurs les plus courantes
On m’appelle bien souvent pour régler des problèmes de lenteur de sites. Et 75% des fois, c’est parce que les images n’ont pas été traitées correctement. Bien souvent, elles ont été insérées telles qu’elles sont sorties de l’appareil photo ou de la banque d’image, sans égard à leur taille, leur format ou leur compression. Un autre cas est celui ou toutes les images ont été insérées en PNG, peu importe qu’il s’agisse de logo ou de photo, et sans égard à la notion de transparence de l’image.
Alors je vous propose ici de vous expliquer le vocabulaire et de vous donner les notions de base et les outils nécessaires qui vous permettront d’optimiser vos images comme des pros, sans toutefois entrer dans des détails techniques superflus qui je suis sûr, ne vous aideront pas plus.
Tout d’abord, les types de fichiers (si vous connaissez déjà ça, passez cette section et allez voir plus bas !):
Sur le web, qu’il s’agisse d’un site WordPress, Drupal, Joomla, HTML ou quoi ou qu’est-ce, la règle est la même et se limite à 3 grandes catégories d’image:
Alors quand et pourquoi utilise-t-on tel ou tel format ?
Format JPG (JPEG)
Le format le plus communément utilisé pour toute image standard est le JPG. C’est un format qui permet de compresser considérablement les images sans trop les altérer, dans la mesure où l’on les sauvegarde avec une compression de 8, ce qui équivaut pour certains logiciels à “Qualité: Élevé” ou encore 60.
Définition:
« Format de fichier graphique permettant des taux de compression impressionnants, mais au détriment de la qualité de l’image : la compression se fait avec perte d’information. L’extension de fichier correspondante est JPG. Ce format ne supporte pas la transparence contrairement au GIF et au PNG ».
Format PNG
Le format PNG est non destructeur, et offre 9 niveaux de compression à l’image. Néanmoins, on l’utilise généralement lorsque l’on souhaite avoir des transparences dans l’image, bien souvent pour des logos, ou par exemple lorsque l’on souhaite afficher une image sur un fond en particulier, sans avoir forcément un cadre rectangulaire ou carré autour de l’image.
Définition:
« Le terme PNG, qui est l’acronyme de Portable Network Graphics, désigne un format d’image libre de droits, optimisés pour l’affichage à l’écran (et particulièrement pour le web), développé afin de proposer une alternative libre au format GIF (format propriétaire).
À la différence d’autres formats, tels que le format JPG, le format PNG est dit “non destructeur”, c’est-à-dire qu’il ne provoque pas de dégradation de l’image. PNG utilise jusqu’à 9 niveaux de compression. Une autre de ses spécificités est de gérer la transparence (ce qui explique qu’il est employé dans les pages HTML pour créer des effets de superpositions d’images).
À la différence du format GIF, le format PNG ne peut pas afficher des images animées. »
Format GIF
Le format GIF, quant à lui, possède les mêmes propriétés que le PNG, dans la mesure où il accepte les transparences. En revanche, il est beaucoup plus destructeur puisque sa palette de couleur se limite à 256 tonalités, alors que le PNG peut en gérer jusqu’à 16 millions. Mais, si parfois on est bien content de pouvoir l’utiliser, c’est lorsque l’on veut qu’une image soit animée. Certes, ça n’arrive pas souvent, en fait de moins en moins, mais il vaut mieux alors connaitre son existence lorsque le besoin s’en fait sentir !
Définition:
« Extension correspondant à un format d’image très utilisé qui permet un bon affichage, mais qui est limité à 256 couleurs. Il utilise une technique de compression sans perte et permet l’utilisation de couleurs transparentes. Il est couramment utilisé pour les barres d’outils et les icônes et convient mieux que le format JPEG pour obtenir des images nettes ». « Le GIF animé est un fichier GIF comprenant plusieurs images qui permettent d’obtenir une animation par affichages successifs en boucle. Le nombre de répétitions de la boucle peut être limité pour éviter un phénomène d’irritation de l’internaute. Le GIF animé fut le premier format graphique utilisé pour la création d’animations visuelles dans le domaine de la publicité Internet ».
Format WebP: Le champion toutes catégories !
C’est le dernier né, et il est de plus en plus utilisé sur le web !
Le format WebP a été développé par Google en 2010, et il possède un excellent rapport Qualité/Compression. De plus, il prend en charge la transparence, les images animées et les images à plage dynamique élevée. Il utilise un algorithme de compression basé sur la prédiction qui exploite les similitudes entre les pixels adjacents pour compresser les données de l’image.
Au final, le format WebP est généralement plus petit que les formats d’image traditionnels tels que JPEG et PNG, ce qui peut entraîner des temps de chargement de page plus rapides.
Voilà donc le minimum qu’il y a à savoir concernant les différents formats d’images pour le web!
Pourquoi une image trop lourde ? Et comment l’optimiser pour le web
Maintenant, il reste à comprendre ce qui fait qu’une image est trop lourde ou, disons, non-optimisée. Alors, ne lâchez pas, c’est la partie la plus importante de cet article !
Les types d’outils pour le traitement des images
Pour traiter les images, il existe différents outils de gestion. Le choix dépend de la quantité d’images, des moyens et du temps que vous souhaitez y consacrer. Ces outils sont:
- LES LOGICIELS
- LES SITES DE TRAITEMENT EN LIGNE
- LES PLUG-INS WORDPRESS
Notion de base: Le poids d’une image
Tout d’abord, un peu de technique, car, il est essentielles de connaitre les 2 paramètres qui influent sur le poids d’une image, à savoir:
- SA TAILLE
- SA COMPRESSION
1- Comprendre la taille d’une image dans l’univers du web
Dans le merveilleux monde du web, quand on parle de la taille d’une image, l’unité est le pixel (px) ! Bien souvent, les gens parlent en dpi, en cm ou en pouces … autant de concept qui sont étrangers aux navigateurs.
C’est facile à comprendre: Votre écran d’ordinateur lit des pixels et donc, la taille de votre écran se mesure en pixels également.
Supposons qu’il fasse 1400px de large par 900px de haut. Et bien si vous intégrez une image qui fait 1000px de large, elle couvrira presque tout votre écran. Vous saisissez ? Par conséquent, lorsque vous avez pris une photo avec votre super Canon Rebel XXX et que vous avez exporté votre image qui mesure 3500 pixels pour l’intégrer sur votre site web ÇA NE SERT À RIEN !… sauf alourdir le temps de chargement de votre page ?
Il faut donc, avant d’insérer une image dans un site, s’assurer que sa taille ne dépasse pas celle d’un écran moyen. Pour ma part, je trouve qu’une taille de 1000px de large pour une photo horizontale est généralement suffisante.
2- Comprendre la notion de compression d’une image
Lorsque l’on compresse une image en format JPG, on altère aussi sa qualité, à savoir les dégradés et les nuances de couleurs. Alors l’idée est de trouver le bon taux de compression pour trouver le meilleur rapport poids / qualité. On peut aussi l’alléger en la débarrassant d’informations inutiles (qu’il s’agisse de prévisualisation, de données exif ).
Les outils d’optimisation
Voici les solutions disponibles pour aboutir à des images optimisées. Choisir le bon taux de compression est la recette du succès.
Pour compresser un jpg, on peut utiliser différents logiciels. Les professionnels utilisent en général Photoshop. Mais là encore, attention, car dans Photoshop, on peut sauvegarder des jpg de 2 manières différentes: Il y a « Enregistrer sous … » (Save as … ») et « Enregistrer pour le web … » (« Save for web … ») Les mots parlent d’eux même: Si c’est pour du web, utilisez « Enregistrer pour le web … » (« Save for web … ») et appliquez une compression de qualité « haute » qui correspond à un facteur de 60. Ainsi, votre image se retrouvera vierge de toute information superflue, ce qui la rendra d’autant plus légère. Ce taux de compression est tout à fait acceptable, pour son rapport diminution de poids / qualité de l’image.
Évidemment, vous allez me dire que tout le monde n’est pas un pro de l’image, et que posséder Photoshop est très loin dans votre liste de priorité !
Soit, tout le monde ne souhaite pas mettre le nez dans Photoshop. Mais que vous soyez sur Mac ou PC, il existe plein de petits logiciels qui feront l’affaire et qui sont bien souvent plus faciles à manipuler. Il vous suffira alors de s’assurer que l’image possède une taille en pixels convenable, et de la sauvegarder dans le bon format et de la bonne manière. L’avantage de cette méthode est de pouvoir gérer les 2 facteurs importants en série, c’est-à-dire la taille de l’image et son taux de compression.
Les sites d’édition d’images en ligne
Pour réduire la dimension de vos images, je vous conseille PICRESIZE.COM ou RESIZEMYIMG.COM, car ils offrent la possibilité de le faire en « batch », c’est-à-dire de retailler plusieurs images d’un seul coup ! Leurs interface est des plus simple et intuitive. De plus, les images pourront sortir compressée, selon différents niveaux de base.
Pour réellement optimiser le poids de vos images, la plateforme en ligne OPTIMIZILLA.COM vous permet de traiter jusqu’à 20 images simultanément, avec un excellent taux de compression vs détérioration. Très simple d’utilisation également !
Les extensions (plugins)
Il en existe plusieurs, les 2 principaux étant: EWWW IMAGE OPTIMIZER et WP SMUSH IT
Pour ma part, j’affectionne plus particulièrement EWWW IMAGE OPTIMIZER, mais les 2 sont bien réputés.
EWWW IMAGE OPTIMIZER, dans sa version gratuite, vous permet quand même de traiter toute image de votre bibliothèque WordPress, à l’unité ou en batch (bulk optimizer mode), en les réduisant leurs poids de manière assez substantielle. Vous pouvez également convertir vos images, par exemple passer de PNG en JPG ou de JPG en WebP. Mais attention dans ce cas en particulier, si vous avez un site multilangue avec WPML par exemple, car il se pourrait que la conversion ne fonctionne pas dans l’autre langue, si vous utiliser une même image pour les 2 langues !
Autre particularité: Come tous les navigateurs ne supportent pas encore ce format, le convertisseur transformera mon-image.jpg en mon-image.jpg.webp, sans effacer l’original, ce qui permettra la lecture quelle que soit la situation. Alors ne soyez pas surpris en retrouvant des images avec des extensions .png.webp ou jpg.webp !
Autre avantage notable, c’est que une fois le plugin installé, à chaque fois que vous importerez une image convenablement préparée, elle sera re-optimisée à son téléchargement. Pour ces raisons, j’installe maintenant systématiquement ce plug-in sur les sites de mes clients !
