Optimiser les images pour le Web - Le guide ultime

En matière de marketing Web, il existe de nombreux aspects à considérer : la vitesse, le référencement, le taux de conversion, le taux de rebond et bien d'autres choses encore. Nous nous concentrons normalement uniquement sur l'aspect performance, mais aujourd'hui, nous voulons aborder d'autres façons d'optimiser les images pour le Web. La taille des fichiers est bien sûr très importante, mais le référencement et les médias sociaux jouent également un rôle important dans les performances de votre site Web et votre taux de conversion.

Ci-dessous, nous discuterons de trois domaines dans lesquels vous pourrez optimiser les images pour le Web :

1. Comment optimiser les images pour une meilleure performance Web
2. Comment optimiser les images pour le référencement
3. Comment optimiser les images pour les médias sociaux et pour un meilleur engagement et taux de clics (CTR)

1. Optimiser les images pour la performance

Afin d'optimiser les images pour la performance, un certain nombre d'actions peuvent être réalisées comme la mise à l'échelle, la compression, l'utilisation d'images responsives, l’utilisation d'un CDN et le choix du bon format de fichier.

Mise à l’échelle

Lorsqu’il s'agit de travailler avec des images, partir des bases peut être très important, et nous parlons notamment de la façon dont les images se mettent à l’échelle. La plupart d'entre vous ont probablement vu la recommandation suivante dans Google Pagespeed Insights à un moment ou un autre lors de l’exécution d’un test de vitesse : suggestion d'optimisation : "En compressant et en ajustant la taille de... vous pouvez économiser 5,8 Ko (51%)".
Cette recommandation fait référence à l’optimisation de vos images par le navigateur avec CSS. Par exemple, il est possible que l'image que vous téléchargez a une largeur de 500px, mais la colonne dans laquelle elle a été placée ne fait que 400px de large. Il en résulte que votre image est réduite à 400px de large afin qu'elle corresponde à la taille de la colonne. Cela peut être un problème pour beaucoup de plateformes CMS telles que WordPress, car les développeurs de thèmes ont tendance à réduire les éléments des thèmes responsives à l'aide du CSS.

Dans l'exemple ci-dessous l'image aurait dû être dimensionnée à 356px x 285px.Il s'agit d'un extrait de l'inspecteur de code de Chrome :

Compression

Dans quelle mesure un site Web est constitué d'images ? Selon HTTP Archive, 62% des octets moyens par page sont composés d'images. L'une des meilleures façons d'optimiser vos images est de profiter de la compression d’image intelligente.
46% des experts estiment que la priorité numéro une devrait être l’optimisation des images ! – Web Perf Advice
Ajoutons que pour les photos, les JPG sont à privilégier en temes d'optimisation par rapport aux PNG. D'une manière générale les PNG sont plutôt associés aux illustrations.

Plusieurs outils gratuits sont disponibles en ligne, par exemple :

• JPEGMINI : JPG
• IMAGERECYCLE : JPG et PNG
• TINYPNG : JPG et PNG

Images Responsive

Les techniques d'images responsive, comme les attributs HTML srcsetet et sizes, permettent de diffuser différentes images mises à l'échelle en fonction de la taille de l'affichage. Ces attributs étendent les éléments img et source afin de fournir une liste d’images disponibles avec leurs tailles. Les navigateurs peuvent ensuite utiliser ces informations pour choisir la meilleure image à utiliser. Les deux attributs font partie de la spécification HTML et peuvent être utilisés séparément ou conjointement.

Voici un exemple typique d'utilisation d'une image non-responsive.
<img src="/responsive-images-car.jpg" alt="responsive images car" width="640" height="434">

Voici un exemple avec les nouveaux attributs responsive.
<img src="/responsive-images-car.jpg" alt="responsive images car"
srcset="/responsive-images-car-160.jpg 160w, /responsive-images-car-320.jpg 320w, /responsive-images-car-640.jpg 640w, /responsive-images-car-1280.jpg 1280w"
sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

Si vous utilisez WordPress, cela fait maintenant partie du noyau depuis WP 4.4, donc vous n'avez pas à vous soucier de les ajouter. Le plugin d'activation du cache de KeyCDN est entièrement compatible avec les attributs srcset et sizes.

Image CDN

L'utilisation d'un réseau de distribution de contenu comme KeyCDN, ou ce que nous appelons également image CDN, peut être l'un des moyens les plus faciles et les plus rapides d’accélérer la livraison de vos images. La raison principale à cela est que ce système diminue la latence de chargement en proposant les images à partir d'un POP le plus proche possible de l’utilisateur. Il permet également un contrôle supplémentaire sur la mise en cache de vos images ainsi que sur la protection contre le hotlinking.
Nous avons effectué des tests avec un image CDN et il s’est avéré que le temps de téléchargement total de nos images avec un CDN activé a diminué de 75,58% en moyenne ! Le TTFB (Time to Fist Byte) et les temps de téléchargement du contenu ont été les deux facteurs les plus impactés par la mise en œuvre du CDN.

Vous trouverez une procédure (en anglais) sur Max CDN avec l'utilisation du plug in CDN édité par Regular Labs.

Formats de fichier – PNG, JPEG, WebP, SVG

L'une des dernières façons d'optimiser les images pour la performance Web est d'avoir une bonne stratégie concernant les formats de fichiers que vous utilisez. Les PNG et les JPEG sont les formats de fichiers les plus utilisés sur le Web pour les images. Cependant, il existe deux autres formats que vous devriez également envisager : WebP et SVG. Ce sont de loin les formats qui permettent de réduire le plus la tailles des fichiers d’image.

WebP
WebP est un format d'image développé par Google qui assure une compression supérieure des photos. En fait, ils utilisent eux-mêmes WebP sur des sites Web comme YouTube. Nous avons effectué un test dans WordPress avec 5 grandes images JPG afin de démontrer à quel point la compression a effectivement lieu et la différence de taille significative entre les fichiers .jpg et .webp. 

Voici un lien vers un convertisseur JPG en WebP en ligne.
Et si vous rencontrez des difficultés avec ce format, un convertisseur de WebP en JPG en ligne.

Ci-dessous un test réalisé par Key CDN :

Sous GTMetrix on visualise que WebP a entraîné une diminution de 77% de la taille de la page.

SVG
SVG (Scalable Vector Graphics) permet d'afficher des graphiques vectoriels dans le navigateur. Ils sont couramment utilisés pour les logos d'entreprise, comme le logo de KeyCDN que vous voyez en haut de ce site. Les fichiers SVG ont une très petite taille de fichier, ils peuvent être mis à l'échelle sans perte et sans augmenter la taille du fichier et ils peuvent être animés ou modifiés avec JavaScript. Un autre avantage des images SVG est qu'elles peuvent être compressées par GZIP.
Lorsque vous souhaitez utiliser des SVG, vous pouvez les inclure comme vous pourriez le faire avec d'autres images, comme dans l'exemple ci-dessous.

<img src="/circle.svg" width="100" height="100">

Cependant, cela peut être un peu plus délicat si vous utilisez un CMS comme WordPress, car ce type de fichier n'est pas autorisé pour des raisons de sécurité. 
Vous pouvez utiliser un plugin gratuit comme SVG Support ou Add Full SVG Support pour vous permettre de télécharger des SVG dans la bibliothèque multimédia WordPress.
Remarque : les SVG peuvent ne pas être compatibles avec d'autres plugins WordPress.

2. Optimiser les images pour le référencement

En matière d’optimisation des images pour le référencement, il y a beaucoup de choses que vous pouvez faire, comme choisir le nom de vos images de façon stratégique, utiliser le bon texte alt, des sitemaps, et veiller à ce qu'elles soient correctement indexées dans les moteurs de recherche.

Nom des fichiers images

Lorsque vous nommez vos images, vous devez toujours garder à l'esprit que les robots des moteurs de recherche et les crawlers vont les analyser. Vous ne pouvez pas vous attendre à ce qu'un algorithme informatique soit parfait ou devine ce que représente votre image. C'est pourquoi il est conseillé de nommer vos fichiers image de façon à décrire le contenu de votre publication ou avec un mot clé sur lequel vous vous concentrez.
Par exemple, l'image ci-contre est nommée : "optimiser-image-site-internet.jpg". C'est le sujet de notre publication. Et utilisez toujours des traits d'union lorsqu'il y a plusieurs mots. Le robot de Google voit les traits d'union comme un séparateur. N'utilisez pas d’underscore, sinon Google lira tout comme un seul mot.

Attribut "Alt" de la balise des images

L’attribut "alt" décrit l'image et son but au sein de la page. En général, il s’agit d’un texte court mais descriptif. Observez dans l'exemple ci-dessous le contenu de l’attribut alt que nous avons choisi. Dans beaucoup de cas, il sera similaire au nom du fichier que vous choisissez.
<img src="/optimiser-image-site-internet.jpg" alt="optimiser image site internet"/>
Le texte de l’attribut "alt" est également utilisé par les lecteurs d'écran, les navigateurs utilisés par les personnes aveugles et malvoyantes, pour leur décrire ce qui se trouve sur l'image. Chaque image sur un site Web devrait avoir un texte alt. Google y accorde également une grande importance pour déterminer comment votre image se classe et pour la lier au contenu de votre page. Si vous utilisez un CMS, il existe un champ pour entrer le texte Alt lorsque vous téléchargez votre image. Sinon, vous pouvez simplement les inclure dans votre HTML comme indiqué ci-dessus.
Un dernier point difficile à quantifier, mais il est probable que Google se sert du critère d'alimentation (correcte, peu soignée, voire pas du tout) de la baliste "alt" (parmi de nombreux autres critères), pour déterminer si votre site est correctement administré.

Voici par exemple où se situe la zone "alt" dans l'éditeur JCE :

Attribut Title de la balise des images

L'attribut Title n'est pas requis par Google. Cependant, un débat a récemment eu lieu dans le petit monde des référenceurs. Une personne a effectué un test avec le mot "plinkyploppitypippity" dans l’attribut title et a laissé l’attribut alt vide. Quelques jours plus tard, elle a constaté que Google avait indexé son image pour ce terme précis.
Maintenant, il y a d’autres choses à considérer avant de revenir en arrière et d'ajouter des titres à toutes vos images. Tout d'abord, Google accorde une priorité absolue au texte alt. Donc si vous utilisez les deux, l'attribut Title pourrait ne pas être important. Une deuxième chose à considérer, c'est qu'elle a utilisé le terme «plinkyploppitypippity» dans le contenu de son article. Il est donc possible que Google ait associé le contenu de sa publication à l'image afin de l'indexer.
En cas de doute, vous pouvez ajouter la balise Title. Mais ne vous attendez pas à voir des gains incroyables.

Sitemap pour images

Les sitemaps d’images fournissent des informations qui permettent à Google d’identifier des images qui pourraient ne pas être prises en compte autrement (comme les images que votre site utilise via du code JavaScript) et vous permettent d’y renseigner des images que vous souhaitez que Google explore et indexe. Les sitemaps ne sont pas obligatoires si votre site Web est configuré correctement, mais en les utilisant, ils peuvent également vous aider à résoudre des problèmes de diagnostic avec votre site et à approfondir vos données.

Vous pouvez vérifier si vos images sont indexées en regardant les données du sitemap dans Google Search Console ou en utilisant l'opérateur de recherche de site dans Google. 
1. Dans Google Search Console, cliquez sur "Exploration" puis sur "Sitemaps".
2. Ensuite, cliquez dans l’onglet "Images" et vous pouvez voir le nombre d'images indexées sur le total soumis, pour chacune de vos sitemaps.

Indexer les images

Lorsque Google trouve vos images, vous voudrez certainement qu'elles soient indexées correctement. Une façon d’arranger cela et d’utiliser un fichier de sitemap tel que décrit ci-dessus. Vous pouvez aussi vous assurer que les paramètres de votre serveur et/ou CDN sont configurés correctement. Les moteurs de recherche vérifient le fichier robots.txt à la racine du site. Si le fichier est présent, ils suivront les instructions qu’il contient. Mais si aucun fichier n'est présent, ils analyseront tout.
Voici un fichier robots.txt typique qui permet tout. En règle générale, cela suffit pour que vos images puissent être analysées.

User-agent: *  
Disallow:

1. La première ligne définit la chaîne à laquelle s'applique la règle. "User-agent: *"s’appliquera à tous les robots, tels que Googlebot, Bingbot, etc.
2. La ligne suivante définit quel chemin peut être indexé. "Disallow: "indique au moteur de recherche d'indexer tout.

Lorsque vous utilisez un CDN, il y a d’autres choses que vous devez activer. Étant donné qu'un CDN copie vos données, vous devez le dire à Google. Vous pouvez le faire en ajoutant un en-tête canonique qui permet à Google de savoir que le contenu du CDN est une copie. Une fois que vous ajoutez rel="canonical" à l'en-tête HTTP, vos images seront indexées normalement car le robot d'exploration saura qu'elles ne sont qu'une copie et non du contenu en double.

3. Optimiser les images pour les médias sociaux

En ce qui concerne l'optimisation des images pour les médias sociaux, il existe beaucoup de choses à faire pour améliorer votre CTR et votre engagement, comme vous assurer d'avoir configuré les tags open graph META de Facebook, les cartes Twitter, les pins Pinterest et les Snippets Google. Il est également important de dimensionner vos images correctement.

Balises META Facebook Open Graph

Les balises META Facebook Open Graph contrôlent la façon dont votre contenu apparaît sur Facebook. Lorsque vous partagez une publication sur Facebook, les balises indiquent à Facebook ce qu'il faut définir comme URL, titre, description et l'une des parties les plus importantes, comme image. Découvrez ci-dessous un exemple de publication sur notre page Facebook à partir d'un blog.

Il existe de nombreuses méta-propriétés que vous pouvez utiliser, mais celles présentées ci-dessous sont les plus importantes.

<meta property="og:url" content="https://www.keycdn.com/blog/resource-hints/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Resource Hints - What is Preload, Prefetch, and Preconnect?" />
<meta property="og:description" content="Check out how you can use resource hints and directives such as preload, prefetch, and preconnect, to speed up delivery of assets on your websites." />
<meta property="og:image" content="https://blog.keycdn.com/blog/wp-content/uploads/2016/03/resource-hints.png" />

Celles-ci peuvent facilement être ajoutées à n'importe quel site statique manuellement ou si vous êtes sur un CMS comme WordPress, Yoast est un excellent plugin gratuit qui peut ajouter ces balises pour vous automatiquement. Assurez-vous simplement qu'elles sont activées dans les paramètres sociaux du plugin.

Taille d'image recommandée : Une taille d'image recommandée qui fonctionne bien pour Facebook est 1.200x630px. Avec le plugin Yoast dans WordPress, vous pouvez configurer manuellement les propriétés Open Graph. Ceci est utile si votre thème WordPress utilise une taille unique pour une image importante et que vous souhaitez qu’elle soit correctement affichée dans Facebook.

Cartes Twitter

Les cartes Twitter fonctionnent de la même façon que les tags Open META graph Facebook. Ils sont utilisés pour afficher un aperçu d’un tweet. Il existe quatre types principaux de cartes Twitter :

La carte récapitulative : Titre, description, vignette et compte Twitter associé.
La carte récapitulative à grande image : semblable à une carte récapitulative, mais avec une image mise en évidence.
La carte d'application : une carte pour détailler une application mobile avec téléchargement direct.
La carte multimédia : une carte pour fournir des contenus vidéos / audio / média.
Voici un exemple de quelqu'un ayant tweeté une URL d'un blog. 

le lien goo.gl/1NXz5Z renvoie vers la page du blog avec son image principale.

Il existe différentes propriétés ‘’ par type de carte Twitter. Voici un exemple de code pour une carte récapitulative avec une grande image.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="Sometimes there is confusion about how a CDN handles images and so in this post we show you the best practices for indexing images in SERPs." />
<meta name="twitter:title" content="CDN SEO: Indexing Images in SERPs" />
<meta name="twitter:site" content="@keycdn" />
<meta name="twitter:image" content="https://blog.keycdn.com/blog/wp-content/uploads/2015/10/cdn-seo-indexing-images.png" />
<meta name="twitter:creator" content="@keycdn" />

Ces balises peuvent facilement être ajoutées à n'importe quel site statique manuellement ou si vous êtes sur un CMS comme WordPress, Yoast peut ajouter ces tags pour vous automatiquement. Assurez-vous simplement qu'elles soient activées dans les paramètres sociaux du plugin.

Taille d'image recommandée : une taille d'image recommandée qui fonctionne bien pour Twitter est 1024x512px. Encore une fois, dans le plugin Yoast de WordPress, vous pouvez configurer manuellement les propriétés ‘meta name’

Epingles enrichies Pinterest

Pinterest affiche ce qu’on appelle des épingles enrichies. Il existe actuellement 6 types d’épingles enrichies : application, film, recette, article, produit et lieu. En réalité, ils utilisent les métadonnées Open Graph comme Facebook. Donc, si vous avez déjà ces balises sur votre site, vous ne devriez pas être perdu. Cependant, vous devez les appliquer pour utiliser des épingles enrichies.
1. Accédez au valideur d’URL Pinterest
2. Validez une URL de votre site. Toute URL contenant des métadonnées Open Graph.
3. Cliquez sur "Appliquer" si tout est configuré correctement.

Une fois avoir cliqué sur « Appliquer », vous devriez recevoir un courrier électronique dans les minutes qui suivent. Ensuite, les données des épingles enrichies commenceront à apparaître sur Pinterest. 

Google+ Snippets

Google+ utilise des microdonnées Schema.org comme moyen principal d'extraire des données pour leurs snippets. Mais Google+ utilise également les métadonnées Open Graph comme Facebook et Pinterest. Donc, si vous avez déjà ces tags sur votre site, cela peut vous intéresser. 

En résumé

Comme vous pouvez le voir, il existe de nombreuses façons d'optimiser les images pour le Web. Ce n'est pas toujours une question de performance Web. Mais en ce qui concerne le marketing, la vitesse, le référencement et les médias sociaux jouent tous un rôle important dans la réussite de votre site et/ou de votre marque sur le Web. Avez-vous d'autres astuces d'optimisation d'image que nous avons peut-être manqué ? N'hésitez pas à nous laisser un commentaire ci-dessous !

L'auteur : un expert à votre service

Nom : Jean-Charles Gautard

Consultant, formateur et intégrateur web depuis plus de 10 ans, je mets mon expertise digitale au service des professionnels amorçant leur transformation digitale. A la recherche d'une stratégie digitale avec le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-nous

Articles qui devraient vous intéresser

Comment nommer les images pour un site internet

Ce petit article a pour but de recenser les bonnes pratiques en matière de nom des images afin de : garantir un...

Performances de votre site Joomla : le guide ultime d'optimisation

Optimiser son site Joomla pour un affichage rapide des pages et une bonne réactivité de l'interface est devenu une...