5 conseils pour optimiser les images pour le Web sans perte de qualité

L'expression séculaire "une image vaut mille mots" est souvent utilisée dans les entreprises de marketing pour illustrer l'importance d'une image dans la vente d'un produit avec succès. En effet, les clients s'appuient beaucoup sur les illustrations du produit (pour comprendre la qualité, la couleur et d'autres spécifications d'un produit) plutôt que sur le contenu écrit. Les taux de visite de votre site Web peuvent augmenter ou diminuer considérablement, en fonction de la qualité de ses images. Il va donc sans dire que les images que vous fournissez sur votre site Web doivent être de haute résolution et nettes. Cependant, il y a un hic.

Les images de mauvaise qualité exportées de manière incorrecte ont tendance à paraître ternes sur une page Web et les images de très haute qualité ralentissent le chargement d'un site et, par conséquent, dans les deux cas, vous finissez par perdre l'engagement de vos utilisateurs. Les recherches montrent que 53 % des personnes quittent un site mobile si le chargement du site prend plus de 3 secondes. Les sites Web qui prennent trop de temps à charger ont également tendance à souffrir de taux de rebond élevés, ce qui conduit finalement Google à détester votre site Web. Ceci, à son tour, affecte considérablement votre classement SEO.

Donc, comme vous le voyez, pour augmenter vos taux de conversation et maintenir vos classements SEO ainsi que les performances du site Web, il sera de la plus haute importance de réduire le temps de chargement de votre page. Comme les images représentent une part importante du temps de chargement d'un site Web. Il devient essentiel de trouver un équilibre parfait entre la qualité de l'image et la taille du fichier image pour améliorer le temps de chargement des sites Web et, par conséquent, améliorer le référencement.

Il existe certaines astuces et techniques que vous pouvez utiliser pour optimiser vos images pour le Web afin que ces espaces vides et ces photographies haute définition à chargement lent ne fassent pas fuir vos visiteurs de frustration. Jetez un coup d'œil à ces cinq méthodes de premier ordre pour optimiser vos images afin de vous assurer que chaque graphique est beau, net et agréable à regarder.

1. Enregistrez les images dans l'espace colorimétrique approprié

Les ordinateurs utilisent deux espaces colorimétriques pour afficher les images ; RVB et CMJN. RVB, qui signifie rouge, vert et bleu, est l'espace de couleurs par défaut utilisé par les appareils numériques tels que les appareils photo et les ordinateurs. En plus de cela, vous rencontrerez également un autre profil de couleur CMJN (qui signifie cyan, magenta, jaune et noir) qui est généralement utilisé dans les imprimantes. Si vous souhaitez utiliser ces images pour votre site Web, il sera essentiel de convertir les couleurs en RVB afin de rendre l'image vive et lumineuse.

Vous pouvez utiliser un logiciel comme Illustrator ou Adobe Photoshop pour convertir l'image CMJN en RVB. Par exemple, si Photoshop est installé sur votre système, accédez simplement à l'option "Image" dans votre barre de menus et sélectionnez le menu déroulant "Mode" et optez pour la couleur RVB. Ensuite, visitez la section Fichier pour enregistrer le fichier. Vous remarquerez instantanément que les couleurs semblent plus brillantes et éclatantes une fois que vous avez terminé l'édition.

2. Compressez les tailles de fichiers

La qualité de l'image dépend en grande partie de facteurs tels que la taille finale du fichier et les paramètres de compression. De plus, vous devrez également vous assurer que les images sont nettes et non pixélisées. Lors de l'enregistrement de l'image sur le Web, assurez-vous que la taille du fichier est inférieure à 2 Mo (2048 kilo-octets) afin de maintenir des vitesses de chargement de page rapides.

Avec les paramètres de compression corrects, vous pourrez obtenir une bonne qualité d'image avec une taille de fichier optimale. Généralement, pour éviter la pixellisation, vous pouvez essayer d'enregistrer le fichier avec un niveau de compression d'image de 70 à 80 % ou les points de couleur individuels. Cependant, vous devez garder à l'esprit que la quantité de compression varie en fonction d'un certain nombre de facteurs qui impliquent le format de l'image d'origine et la taille du fichier. Vous pouvez utiliser des outils gratuits comme Imagify si vous souhaitez compresser davantage la taille du fichier.

3. Utilisez le bon format de fichier

Il existe principalement quatre types de fichiers principaux que vous pouvez utiliser pour enregistrer les images et les graphiques du Web : PNG, GIF, JPG et SVG. Chacun de ces formats a ses inconvénients, ses avantages et son cas d'utilisation prévu, et vous devrez connaître le type d'image spécifique avant de commencer à formater ces images.

Tout d'abord, vous devez vérifier si votre fichier est une image raster ou vectorielle et enregistrer le fichier en conséquence. Les images raster sont généralement capturées avec un appareil photo ou des scanners créés avec des programmes basés sur les pixels. Ces types d'images ont un nombre fini de pixels et perdent rapidement leur qualité lorsque vous essayez de les mettre à l'échelle dans un format plus grand. Formats PNG, JPEG et JPG mieux adaptés aux images raster.

D'autre part, les graphiques vectoriels sont créés avec le logiciel vectoriel et peuvent être dimensionnés à l'infini (cela sans perte de qualité). Les formats de fichier SVG et GIF conviennent mieux aux images vectorielles, mais peuvent également être enregistrés au format JPG ou PNG. Cependant, dans ce dernier cas, vous risquez de perdre la possibilité de redimensionner votre graphique à l'infini.

4. Exporter plusieurs tailles d'image

Comme les appareils mobiles ont des écrans de résolution plus élevée que leurs homologues d'ordinateurs de bureau typiques, les utilisateurs préfèrent généralement utiliser des appareils mobiles pour afficher le contenu numérique. Ces écrans haute densité dotés de la technologie HiDPI, Retina ont plus de 200 pixels par pouce (PPI) alors que la norme pour la plupart des ordinateurs de bureau est de 72 PPI. Si quelqu'un visualise une image 72 PPI sur son appareil mobile au lieu de la visualiser sur un ordinateur, elle ne sera pas aussi nette qu'une image enregistrée avec plus de pixels.

Voici un moyen efficace de vous assurer que la qualité de votre image est adaptée aux navigateurs mobiles et de bureau :

Exportez votre image aux échelles @2x et @3x, c'est-à-dire que la version révisée de votre image sera 2x (200%) ou 3x (300%)

la taille d'origine. Cela permettra au navigateur Web mobile de l'utilisateur d'afficher automatiquement l'image en 2x ou 3x de la taille d'origine dans le même espace.

5. Utilisez un texte alternatif pour décrire la source de l'image

Les textes alternatifs, également appelés textes alternatifs ou attributs alt, sont de courtes phrases écrites dans des codes HTML qui donnent des informations sur la source de l'image. Google accorde une valeur relativement élevée aux images de texte alternatif, car ces images servent non seulement à plaire à votre public, mais jouent également un rôle essentiel dans les optimisations SEO de vos sites Web. En effet, vous avez la possibilité d'inclure des textes et des phrases avec les mots-clés SEO pour obtenir un rang élevé dans Google. Par exemple, un code HTML sans texte alternatif apparaît comme https://pexels.com/photo/dog
alors que lorsque le texte alternatif est inclus, il apparaît comme

<img src=http://pexels.com/photo/dog.jpg alt="chien-joue-dans-l'escalier">

Ces textes alternatifs sont également utiles pour les lecteurs de sites Web ayant une déficience visuelle. Le lecteur d'écran lit à haute voix ces textes alternatifs et explique de quoi parle l'image ainsi que la fonction de l'image sur la page. Il aide également les utilisateurs disposant de connexions Internet lentes à comprendre le contexte de la photo et réduit ainsi vos taux de rebond.

Il existe également diverses plates-formes en ligne telles que compressPNG.com, Smush.it, webresizer.com, etc. que vous pouvez utiliser pour optimiser les images de votre site Web sans trop compromettre la qualité de l'image.

Semble être beaucoup de tracas, pourquoi s'embêter?

Eh bien, comme indiqué précédemment, l'impact des grandes images sur le temps de chargement des sites Web sera préjudiciable à votre croissance. Et en plus de cela, vous devez également prendre en compte les répercussions suivantes,

 Google pénalisera les sites Web lents et gourmands en données, en leur donnant une priorité moindre dans les résultats SERP.

 Les images volumineuses occupent une quantité importante d'espace sur le serveur, ce qui finira par vous coûter plus cher.

 Plus votre page Web est grande, plus vos utilisateurs auront besoin de données pour afficher et ajouter à vos taux de rebond (car l'utilisateur avec une allocation de données mobiles restreinte sera sceptique quant à rester trop longtemps sur votre site)

Selon moi, l'optimisation d'image consiste principalement à respecter les utilisateurs de votre site Web. Votre public appréciera forcément une expérience fluide et rapide et sera plus susceptible de revenir sur votre page encore et encore. Et bien sûr, il sera apprécié par Google car les sites à chargement rapide et adaptés aux mobiles sont très appréciés par les moteurs de recherche.

Inutile de dire que votre niveau de compression sera différent selon la complexité de vos images. Ce blog vise à vous fournir les stratégies de base afin que vous puissiez effectuer les optimisations essentielles en un minimum de temps. Cependant, il existe de nombreuses informations disponibles sur Internet et si vous souhaitez approfondir vos connaissances, tapez simplement dans votre moteur de recherche "optimisation d'image pour le Web sans compromis sur la qualité" et plongez dedans.