Dans la communication, les images sont très importantes et elles le sont d’autant plus si le message que vous voulez transmettre doit être percutant, clair et incisif.
Cette prémisse est valable aussi bien pour la presse que pour le web, et nous allons nous concentrer sur cette dernière partie, car la communication s’est principalement déplacée vers le web, des sites web aux réseaux sociaux, et la plupart des informations sont véhiculées par ce moyen, qui est beaucoup plus instantané.
Il est important de soigner la communication, tant dans le message que dans le choix des images, en effet, il arrive souvent que les gens s’attardent d’abord sur l’image et ensuite sur le message. C’est pourquoi il est conseillé de les choisir avec soin et de s’assurer qu’ils peuvent être lus facilement.
Habituellement, pour la création d’une brochure ou d’un site web, vous vous appuyez sur les images de photographes spécialisés qui, en plus de fournir des photos de qualité, livrent normalement deux types d’images, celles pour la presse et celles pour le web. Oui, c’est vrai, deux types d’images, mais pourquoi ?
La réponse est très simple : les images que vous préférez pour le web doivent avoir une résolution inférieure à celles utilisées pour l’impression, car elles sont affichées à l’écran. En optimisant la qualité des images, nous veillons à ce qu’elles puissent être facilement téléchargées et visualisées, même dans les situations où la connexion n’est pas optimale.
Pourquoi optimiser les images ?
Il est judicieux d’optimiser les images afin de faciliter l’affichage du contenu et d’assurer une bonne qualité en termes de performances et de vitesse de chargement du site.
Il peut arriver de tomber sur des sites lents, et l’une des causes peut être le poids des images, qui ne sont souvent pas optimisées correctement.
L’attention portée à ce détail permet d’augmenter les performances du site. Oui, un site visuellement beau favorise la navigation par rapport à un site sans images ni éléments graphiques, mais il est bon de faire une sélection des images à inclure et de concentrer notre attention sur des messages précis, en utilisant des photographies pour renforcer un concept.
Que signifie l’optimisation ?
L’optimisation des images pour le web a deux significations :
- Évaluer au préalable le nombre d’images à inclure sur un site ou une page. En effet, une solution pourrait consister à insérer un nombre réduit d’images afin de faciliter le chargement de tous les contenus en éliminant celles jugées superflues. La seconde est étroitement liée à la première, et consiste à réduire la qualité des images. Cela signifie qu’il faut réduire le poids et permettre un chargement rapide.
- Réduire le trafic de téléchargement des données, puisque la plupart de celles-ci sont constituées d’images. Il n’existe pas de normes ou de directives, mais il y a un certain nombre de précautions qu’il est utile de suivre dans ces situations, afin de ne pas utiliser un contenu trop lourd.
L’optimisation signifie donc réduire le poids de l’image (octets et ppp), l’image idéale pour le web doit avoir une résolution de 72 ppp (points par pouce) et être en mode couleur RVB. Une image à 300 ppp a une résolution excessivement élevée pour le web et ne peut être vue et appréciée que sur papier et non sur le web. En outre, il est bon d’optimiser, afin de ne pas télécharger des fichiers qui peuvent alourdir notre site et entraîner un chargement lent du contenu ;
Réduction de la taille (pixels) : ici aussi, il est important de trouver la bonne taille, car les images sont généralement trop grandes pour ce qui est réellement nécessaire, il est donc préférable d’essayer d’optimiser ce paramètre également. En général, les images en ligne ont tendance à avoir une largeur d’environ 1200 pixels (avec une hauteur proportionnelle, surtout pour les messages), ou au maximum le format full HD est utilisé, qui a une largeur de 1980 pixels.
Il faut souligner qu’il est toujours bon de redimensionner les images, mais il est essentiel de ne pas modifier leurs proportions ;
le bon format de fichier (extension/compression), il existe plusieurs formats adaptés au web, que nous allons détailler dans les paragraphes suivants. Chaque image peut être compressée afin de prendre moins de place que l’original. Les formats les plus couramment utilisés sont le jpeg et le png.
Les formats d’image adaptés au web (images matricielles)
Les images matricielles sont des images composées d’une grille qui forme un échiquier, dont chaque élément est appelé pixel.
Dans ce contexte, il est également essentiel d’identifier le bon format de fichier.
Il en existe différents types, mais examinons-les en détail. Il existe essentiellement 3 formats utilisés sur le web : JPEG, PNG ou GIF, et il est conseillé de choisir le bon format pour chaque besoin.
JPEG
Le format JPEG est le plus célèbre, le plus répandu et le plus utilisé. Il est souvent utilisé pour les photographies, les illustrations et les bannières. La caractéristique de ce type de fichier est qu’il génère une forte compression de l’image, ce qui réduit considérablement le poids du fichier généré.
Les contenus superflus sont éliminés, ce qui entraîne une réduction de l’échelle des couleurs, plus proche d’une réduction de la qualité de l’image.
Il est évident qu’une plus grande réduction entraîne une plus grande compression et une vitesse de chargement des images plus rapide.
PNG
format souvent utilisé à la place du jpeg dans les cas où il est nécessaire d’avoir un fond transparent, généralement utilisé pour les logos, les icônes, etc. Dans ce cas également, le fichier est compressé selon la méthode sans perte, ce qui rend l’image plus légère. Même si la compression est réduite et que la qualité est diminuée, l’information originale n’est pas altérée, c’est pourquoi ce type d’image a un poids plus important que le format jpeg.
L’une des principales caractéristiques de ce format est qu’il permet aux transparents de rester flous, ce qui donne des images plus élaborées.
GIF
de la même manière que le format png, ce type conserve également la transparence, et peut être une alternative au format précédent, surtout lorsqu’il s’agit d’images avec une échelle de couleurs simplifiée, car ils supportent une échelle d’un maximum de 256 couleurs, il n’est donc pas recommandé pour les images avec des nuances et des tons pertinents.
Utilisé aux débuts du web, puis tombé en désuétude au fil des ans, il est récemment revenu en vogue, notamment pour la possibilité de créer des animations amusantes et impressionnantes. Il s’agit d’une série d’images qui se succèdent dans un ordre rapide, créant un effet de mouvement ; une autre caractéristique est sa répétition en boucle.
Conseils pour l’optimisation d’images
Si vous êtes un débutant, on compte essayer de clarifier les choses pour vous : si vous voulez partager une photo de vous en vacances, vous pouvez l’enregistrer au format jpeg ; si vous voulez publier une photo de vous sans fond ou un logo avec un fond transparent, alors le png est le meilleur format pour vous ; si vous voulez poster une animation amusante, alors utilisez le gif.
Optimisation des images vectorielles – SVG
Les images vectorielles sont créées à partir de vecteurs qui composent des formes à travers des nœuds qui définissent ensuite l’image. L’utilisation de vecteurs permet de maintenir la qualité de l’image même si le format est augmenté ou réduit, elle permet de créer des images avec un poids réduit et elle est également plus facile à travailler que d’autres formats.
Ce n’est pas encore un format largement utilisé, surtout parce qu’il n’est pas encore pris en charge par tous les navigateurs, ou en tout cas ne s’affiche pas toujours correctement.
Comment optimiser les images ?
Il existe plusieurs sites web qui vous permettent d’optimiser les images directement en ligne. Voici un bref aperçu des principaux d’entre eux :
- ImageOptimizer, que vous pouvez utiliser en ligne ou télécharger et installer sur votre PC. La version en ligne vous permet de télécharger l’image et de l’optimiser, en définissant la taille de l’image et la qualité d’enregistrement, tout en conservant le format de fichier original.
- TinyPNG, qui vous permet de réduire la qualité et la taille de vos images afin qu’elles soient optimisées pour le web, est particulièrement adapté au traitement des formats png.
En plus de ces sites, il existe également des plugins pour wordpress qui vous permettent d’optimiser les images directement lors de leur téléchargement sur votre site, mais aussi les images déjà téléchargées.
Nous tenons à préciser que ceux que se sont que quelques-uns des nombreux plugins disponibles (les plus connus), et voici une prémisse : souvent l’installation de plusieurs plugins peut entraîner des ralentissements du site ou une baisse des performances.
- EWWW Image Optimizer, vous permet d’optimiser les images que vous allez télécharger mais aussi celles déjà téléchargées sur votre site.
- WP Smush, qui fonctionne également de la même manière que le précédent, vous permet d’optimiser les images en cours de téléchargement mais aussi celles qui ont déjà été téléchargées.
Outre les applications web et les plugins, il existe également des programmes qui vous permettent de le faire. Nous allons rester focus sur celui que nous utilisons le plus et qui est notre pain quotidien : Photoshop.
Comme généralement nous utilisons cet outil pour redimensionner des images, voici un petit guide étape par étape qui vous permettra d’optimiser vos images en toute simplicité.
- une fois l’image ouverte dans photoshop, nous passons à son redimensionnement selon nos besoins
- Après avoir redimensionné l’image, enregistrez-la pour le web. Un panel s’ouvre avec une série d’options, nous fixons celles qui nous intéressent, du format à la qualité.
- sauvegarder, le fichier résultant est maintenant optimisé.
Conseils
Voici quelques conseils à garder à l’esprit, il est bon de télécharger des images qui ne sont pas trop grandes et ne dépassent pas si grands formats un poids de 200-300 kb, si vous pouvez rester en dessous de ces valeurs encore mieux !
Conseil : optimisation des images pour Google
Un autre aspect à ne pas sous-estimer lorsque l’on veut optimiser son site et ses images est lié au fait que la vitesse de chargement influence le lecteur, qui s’il doit attendre trop longtemps risque d’abandonner la page, mais la vitesse est aussi un facteur que Google prend en compte lors de l’indexation de votre site. Surtout du point de vue du référencement, c’est un facteur très important.
Outre cette fonctionnalité, il en existe une autre qui ne doit pas être sous-estimée : une fois les images téléchargées, il est important de leur donner un titre et une balise ALT, cette dernière étant le texte qui apparaît si, pour une raison ou une autre, l’image ne doit pas être téléchargée, et qui est utilisé par les robots des moteurs de recherche pour indexer les images.
En conclusion
Ce que vous venez de lire est une série de conseils sur la façon d’optimiser les images pour le web. Il y a beaucoup d’éléments différents à prendre en compte, mais une fois que vous les avez compris, tout est très simple !
