Optimiser ses images pour le web

Illustrer ses textes avec des images optimisées est un principe de base en rédaction web. Cette optimisation est indispensable pour le référencement SEO. Elle accélère le chargement des pages, les rend plus attirantes pour les internautes et facilite l'analyse des contenus par les moteurs de recherche. Comment optimiser les images présentes dans vos articles avant de les publier sur un blog ou de les livrer à un client ?

Où trouver des images pour vos articles ?

Utiliser des images de qualité pour vos articles est essentiel pour capter l'attention des lecteurs et enrichir votre contenu. De nombreuses sources, gratuites ou payantes, offrent d'innombrables images adaptées à chaque besoin. Savoir où chercher permet de donner vie à vos articles et d'améliorer leur attrait visuel.

Faites vos propres photos pour illustrer du contenu interne

Vous pouvez obtenir vos propres images en prenant personnellement des photos ou en faisant appel à des professionnels. Cette option est à considérer si vous présentez des éléments de votre environnement direct dans les articles ou contenus publiés. Un rédacteur web qui doit créer du contenu sur des produits, prestations en cours de réalisation, décors, et événements d'une entreprise dont il est un employé peut opter pour cette solution.

Si vous choisissez cette option, assurez-vous d'utiliser un matériel adapté. C'est indispensable pour obtenir des photos d'excellente qualité adaptée à une utilisation sur le web. Les images présentées doivent aussi absolument être pertinentes par rapport à la thématique globale du site internet du client, quelle que soit leur origine.

Téléchargez sur des banques d'images

De nombreux sites gratuits ou payants proposent de nombreuses photos classées par thématiques, ce qui permet de trouver rapidement celles dont vous avez besoin pour un article. Shutterstock, Unsplash, Pixabay, Getty Images ou encore iStock font partie des banques d'images les plus populaires sur le web. Elles vous aident à obtenir des photos et illustrations pour un usage sous l'une des licences d'exploitation suivantes :

•  libre de droits,
• droits gérés,
• usage éditorial,
• creative commons.

La licence libre de droits vous offre la possibilité d'utiliser l'image de façon libre et illimitée sur internet. Elle peut être employée pour un contenu créé à titre commercial, promotionnel ou privé. Vous ne pouvez cependant pas prétendre à son utilisation exclusive ni la transmettre ou donner à un tiers.

La licence de droits gérés vous permet d'exploiter l'image à titre commercial, promotionnel ou privé, de façon exclusive. Vous ne pourrez l'utiliser qu'une seule fois (chaque réutilisation est facturée) et vous n'avez pas le droit de la donner ou transmettre à quelqu'un d'autre. Il en est de même pour la licence à usage éditorial, à la différence que celle-ci n'autorise pas l'usage à but promotionnel, commercial ou privé.

Les licences « creative commons » autorisent pour leur part un usage libre et illimité des photos, à condition de respecter certaines règles spécifiques.

Dans une banque d'images, choisissez de préférence des illustrations qui ne sont pas largement utilisées sur la toile. Elles contribueront à renforcer l'authenticité du contenu sur les sites web de vos clients.

Renommez les fichiers des images

Pour aider les moteurs de recherche à analyser facilement une image durant leur exploration d'un site, vous devez bien la nommer. De manière générale, les images prises par un appareil photo portent un nom peu significatif tel que « IMG200320220002 ». Remplacez ce nom par un titre plus explicite, qui offre la possibilité de savoir de quoi il s'agit à peu près. Utilisez 3 à 5 mots (incluant des mots-clés idéalement) séparés par des traits d'union et ne contenant ni accent ni caractères spéciaux ou majuscules.

Renseignez l’attribut ALT

L'attribut ALT est un élément très important pour optimiser les images. Cette balise <img> permet de renseigner un texte descriptif et dont le contenu s'affiche lorsque l'élément graphique ne se charge pas. L'attribut ALT est indispensable pour un bon référencement des images. Son contenu est lu par les robots des moteurs de recherche.

Le texte descriptif doit être précis et compréhensible, avec une longueur comprise entre 6 et 10 mots. N'oubliez pas d'y mettre des mots-clés sans faire du bourrage. Évitez les caractères spéciaux et accents pour faciliter la lecture par les algorithmes des moteurs de recherche.

Au-delà du SEO, l'attribut ALT offre aussi la possibilité aux malvoyants de connaître le contenu de l'image grâce aux liseuses d'écran. Il favorise ainsi l'accessibilité des sites web et améliore l'expérience utilisateur.

Ajoutez une balise title

La balise title permet d'ajouter des informations complémentaires à celles de l'attribut ALT et du nom de l'élément visuel. Elle ne contribue pas directement au référencement de l'image, même si les moteurs de recherche utilisent son contenu pour avoir une meilleure compréhension du contenu. Lorsque la balise title d'une image est renseigné, un texte est affiché chaque fois qu'un internaute passe sa souris au-dessus de l'élément graphique.

Réduisez les dimensions et le poids des images

Les dimensions et le poids d'une image affectent directement la vitesse de chargement du site internet qui l'héberge, ainsi que son affichage. Charger sur une page web une illustration de plus de 2000 pixels de large n'a que peu d'intérêt, puisque la majorité des écrans a une capacité inférieure. Cela ne fera que rendre l'affichage inadapté avec des dépassements de la largeur de l'écran. La navigation sur le site sera alors compliquée, ce qui nuira à l'expérience utilisateur. Des dimensions de 1200 x 630 pixels sont un bon standard à suivre pour le contenu d'un blog.

Concernant le poids des images, il ne doit pas dépasser une taille de 100 ko. Une taille de 200 ko au plus convient pour une image en pleine page. Si les photos que vous désirez utiliser dépassent ce poids, servez-vous d'un outil de compression pour réduire leur taille. Assurez-vous que la compression soit sans perte de qualité, car les images floues ou dégradées repoussent les internautes.

Photoshop, ImageOptim, FileOptimizer et Optimizilla sont des outils pouvant être utilisés pour obtenir d'excellents résultats. Ils permettent la compression des images sans perte de qualité. Si vous utilisez Wordpress, de nombreux plugins sont accessibles dans la bibliothèque d'extension pour vous aider à compresser automatiquement les images.

Renseignez le contexte de l’image si besoin

Le contexte d'une image se définit à travers la légende qu'elle porte ou le texte qui l'entoure. Comme la balise title, il n'a aucun impact direct sur le référencement naturel. Elle offre cependant la possibilité de donner des détails sur l'illustration, ce qui est le plus souvent très apprécié par les internautes (gain en termes d'expérience utilisateur).

Pour bien rédiger une légende d'image, exprimez-vous dans un style naturel tout en apportant des précisions sur le contexte :

• occasion à laquelle la photo a été prise,
• lieu,
• moment de la journée,
• identité des personnes sur une image et de ce qu'elles font.

Assurez-vous également que ces informations soient un peu différentes de celles renseignées dans l'attribut ALT de la photo.

Choisissez correctement le format de l’image

Vous avez le choix entre trois principaux formats : JPEG, PNG, GIF. Le format JPEG convient parfaitement pour les photos et il est très léger. Il offre une très grande liberté en ce qui concerne les possibilités de compression. Il prend aussi en charge plus de 16 millions de couleurs.

Le format PNG est plus indiqué pour les logos, ainsi que les illustrations qui contiennent du texte ou différentes strates de couleurs uniformes. Les images sont d'excellente qualité. Ce format est aussi à privilégier si vous souhaitez utiliser des visuels à fond transparent. Il en est de même pour le format GIF qui gère aussi la transparence et a une palette de 256 couleurs. Son utilisation convient cependant spécifiquement pour les visuels animés.

En dehors de ces 3 formats conventionnels, vous pouvez aussi essayer Webp qui favorise une compression plus élevée qu'avec JPEG et PNG. C'est un format créé par Google, qui fonctionne sur la grande majorité des navigateurs web moderne, avec ou sans perte de qualité des images. La transparence et l'animation sont aussi disponibles avec le format Webp.