Comment présenter au mieux vos images en ligne

Quel que soit le type de site Web que vous possédez, il est probable que votre contenu soit un mélange de texte et d'images. Pour les photographes, artistes et autres créatifs, les images de votre site Web constituent probablement la partie la plus importante de votre contenu et il est donc essentiel de savoir comment les présenter correctement.

Bien sûr, vous pouvez continuer et télécharger des photos et des graphiques via le tableau de bord WordPress sans plus réfléchir, mais si vous voulez vous assurer que votre site Web se charge rapidement, est facile à lire et optimisé pour les moteurs de recherche, vous feriez bien de lire ceci petit guide des meilleures pratiques en matière d'utilisation d'images sur votre site Web.

Enregistrement et téléchargement d'images

Bien que WordPress ait permis de télécharger des images volumineuses directement depuis votre ordinateur et de les afficher automatiquement pour s'adapter à la largeur de votre blog, nous vous déconseillons de télécharger des images non traitées.

Tout navigateur Web est capable d'afficher des images à une taille plus petite qu'elles ne le sont réellement si cela est indiqué dans le code, mais cela n'entraîne pas de réduction de la taille réelle du fichier. Une image de 500 ko affichée à 50 % de sa largeur et de sa hauteur totales fera toujours 500 ko. Les blogueurs qui ne sont pas avertis avec HTML et WordPress peuvent bien supposer que parce que leurs images n'apparaissent pas en grand à l'écran, cela signifie qu'elles seront rapides à télécharger, mais ce n'est pas toujours le cas.

Pour vérifier la taille de votre image, faites un clic droit ou un contrôle-clic sur une image dans votre blog et choisissez afficher/ouvrir l'image dans le menu (la formulation variera légèrement selon le navigateur que vous utilisez). Si l'image qui s'ouvre est beaucoup plus grande que celle que vous voyez sur votre blog, cela signifie que vos images ne sont pas correctement dimensionnées.

Si vous avez un blog riche en images et que vous ne redimensionnez pas vos images avant de les télécharger, la taille combinée de votre page Web pourrait être inutilement grande.

Cela vaut la peine de prendre quelques minutes supplémentaires pour redimensionner et compresser vos images avant de les télécharger. Cela peut facilement être fait dans Photoshop ou tout autre logiciel de retouche d'image que vous utilisez. Vous pouvez également utiliser des outils en ligne gratuits comme PicMonkey et l'optimiseur d'image de Dynamic Drive.

Le redimensionnement manuel des images vous donne un contrôle total sur la compression et réduira considérablement votre temps de téléchargement, mais si vous le souhaitez, vous pouvez également choisir d'utiliser les images redimensionnées que WordPress génère automatiquement à chaque téléchargement. Lorsque vous insérez une image dans un message, vous avez la possibilité d'insérer des images de taille normale, grande, moyenne ou miniatures. Vous pouvez modifier ces tailles en fonction de la conception de votre blog dans Paramètres > Médias . Sachez que si vous choisissez cette méthode, vos images originales en taille réelle pourront être téléchargées gratuitement par tous à partir de votre site Web - ce n'est pas la meilleure option pour les photographes et les illustrateurs !

Optimisation des images et convivialité

En plus de vous assurer que vos images sont correctement dimensionnées et optimisées pour le temps de chargement de la page, vous devez également vous assurer qu'elles sont correctement balisées pour le référencement (optimisation pour les moteurs de recherche). Le référencement permet aux moteurs de recherche de trouver et d'indexer plus facilement votre site et un site utilisant de bonnes techniques de référencement est susceptible d'apparaître plus haut dans les pages de résultats des moteurs de recherche par rapport à un site non optimisé.

Une discussion complète sur le référencement va au-delà de la portée de cet article (de nombreux thèmes WordPress sont de toute façon compatibles avec le référencement dès la sortie de la boîte), mais l'optimisation de vos méta-informations d'image est un moyen simple de donner un coup de pouce à votre référencement sur site et peut aider les internautes à trouver votre site via la recherche d'images Google et d'autres moteurs de recherche basés sur des images.

Le balisage correct de vos images est également important pour la convivialité, en particulier si les images illustrent des informations importantes. Dans le cas où une image ne se charge pas ou ne peut pas être vue (soit en raison d'une connexion Internet lente, parce que les images sont désactivées, soit pour les utilisateurs malvoyants), fournir une description textuelle alternative est indispensable.

1. Nom du fichier

Tout d'abord, lorsque vous enregistrez vos images, assurez-vous qu'elles portent un nom de fichier descriptif. Laisser vos images nommées IMG_013445.jpg ou quoi qu'elles soient lorsqu'elles sortent de votre appareil photo ne donnera aucune indication aux moteurs de recherche sur ce qu'elles représentent. Utilisez des mots-clés descriptifs appropriés séparés par des traits d'union, par exemple children-playing-ocean.jpg

2. Texte alternatif

Lorsque vous téléchargez votre image via le Media Uploader, WordPress propose plusieurs champs pour les descriptions de fichiers. Bien que ceux-ci puissent être laissés vides (et de nombreux blogueurs le font pour gagner du temps), plus vous remplissez de champs, mieux c'est pour le référencement et la convivialité. le plus important d'entre eux est le texte alternatif, abréviation de "texte alternatif".

Il s'agit du texte qui s'affiche lorsque les images sont désactivées ou ne peuvent pas être affichées pour une autre raison, il doit donc agir comme une description de ce qu'est l'image. Les moteurs de recherche lisent également ce texte et l'utilisent pour décider de quoi traite la page et où placer votre site dans les listes. Si vous êtes un photographe de mariage basé au Texas, par exemple, vous voudrez vous assurer que le texte alternatif de toutes les images de votre blog comprend beaucoup de texte descriptif, y compris des mots clés tels que "photographe de mariage" et "photographie de mariage Texas". Cependant, sachez que, comme pour le texte de votre blog, il est important de ne pas trop insérer de mots-clés dans les descriptions de vos images.

Il peut être tentant de copier et coller le même texte alternatif dans toutes vos images pour gagner du temps, mais idéalement, chacune de vos images devrait avoir un texte alternatif unique qui la décrit correctement.

3. Titre de l'image

Le titre de l'image est similaire au texte alternatif mais a un objectif légèrement différent. Plutôt que de fournir des informations alternatives à l'image, le titre doit fournir des informations supplémentaires . Le titre de l'image est le texte « info-bulle » qui apparaît dans une fenêtre contextuelle lorsque vous survolez une image. Ce texte est important à la fois pour la convivialité et le référencement et doit fournir des informations rapides et pertinentes sur l'image ou sur son lien.

Le titre de l'image doit être légèrement différent du texte alternatif et, encore une fois, doit être unique pour chaque image.

4. Légende de l'image

Une légende est un texte qui s'affiche généralement sous l'image et fournit une description supplémentaire ou un texte de soutien. L'utilisation de légendes est facultative, mais elles peuvent être utiles pour fournir des informations supplémentaires sur votre image ou citer la source si vous utilisez des images d'un autre site. Considérez la légende comme une étiquette d'information dans une exposition de galerie d'art.

Liaison d'images

Par défaut, lorsque vous insérez une image dans une page ou un article, WordPress la liera à une nouvelle page contenant uniquement l'image. Il n'y a aucune raison réelle à cela et cela peut même être dommageable pour votre site en termes de référencement.

Cela peut également être un gros problème d'utilisabilité - si un utilisateur survole votre image et voit qu'il s'agit d'un lien, il peut très bien supposer qu'il renvoie à une page contenant des informations utiles. Cliquer sur ces pages contenant uniquement des images est une perte de temps pour le visiteur et peut même vous faire perdre des visiteurs.

Pour résoudre ce problème, sélectionnez simplement "Aucun" dans le champ "URL du lien" lorsque vous téléchargez une image dans WordPress, à moins que vous ne souhaitiez réellement la lier à une page spécifique. Si vous faites cela, assurez-vous d'utiliser le titre ou la légende de l'image pour indiquer où l'image renvoie.

Emplacement des images

En plus de vous assurer que vos images sont optimisées pour le référencement et conviviales, il est également important de réfléchir à la manière dont elles s'intègrent dans votre texte pour des raisons esthétiques et de lisibilité.

Vous préférerez peut-être utiliser des images en ligne (plus petites que vos colonnes principales pour que le texte les entoure), des images pleine largeur ou une combinaison des deux. Ce que vous devez éviter, c'est d'utiliser des images autonomes qui ne sont pas en pleine largeur, ou une série d'images de largeurs variables, car cela semble peu professionnel et peu attrayant.

Pour ce faire, vous devez vous assurer que vos images de portrait ont la même largeur que vos images de paysage. Gardez un œil sur la hauteur de vos images - si elles sont trop hautes, elles risquent de déborder sur des écrans de résolution plus petite. Cela obligera les utilisateurs à faire défiler pour voir l'image complète, ce qui devrait être évité. Si vos images sont trop grandes pour être affichées en pleine largeur au format portrait, vous pouvez créer un collage de deux images portrait ou plus côte à côte.

Les images en ligne peuvent apporter un peu de variété à votre contenu et aider à briser de grands murs de texte. Ils sont également une bonne option pour les images plus petites ou étroites qui ne conviennent pas pour être affichées en pleine largeur.

Lorsque vous utilisez des images en ligne, encore une fois, il est préférable de décider d'une largeur définie pour la cohérence visuelle. Cela ne doit pas dépasser la moitié de la largeur de la colonne de texte, car des images plus larges comprimeront trop le texte et le rendront difficile à lire.

Les images en ligne doivent toujours être alignées à droite plutôt qu'à gauche du texte, afin de ne pas briser la marge de gauche et de réduire la lisibilité.

Embellissez votre blog avec des images

L'utilisation d'images est importante pour créer un blog intéressant et visuellement attrayant et elles sont encore plus vitales lorsqu'il s'agit de commercialiser votre entreprise créative.

Suivez les conseils que nous avons couverts dans cet article pour des images bien optimisées et bien présentées et votre site Web sera non seulement beau, mais se chargera également rapidement, sera agréable à lire et sera plus attrayant pour les moteurs de recherche. Bonne édition !