Le guide complet des images sous WordPress

Un article entier sur les images ? Eh oui ! Si le sujet parait extrêmement simple (qu’y a-t-il de plus bateau qu’une image dans un article de blog ?), il y a en fait beaucoup de subtilités à maîtriser.

En effet, à cause de leur poids, les images présentes sur votre blog peuvent amener à des temps de chargement trop longs sur mobile. Par contre, bien utilisées, elles peuvent permettre d’améliorer votre référencement.

Dans cet article, nous allons :

  • passer en revue les caractéristiques des images (format, orientation)
  • voir comment préparer ses images pour les utiliser sur votre site
  • examiner les différents blocs WordPress affichant des images
  • voir comment les moteurs de recherche indexent les images, et comment en tirer parti
  • et enfin, installer plusieurs extensions permettant entre autres d’obtenir facilement de gros gains de performance

Après cela, les images sous WordPress n’auront plus de secret pour vous !

Les différents formats d’images

S’il existe énormément de formats d’images, on les divise généralement en deux familles : image matricielle ou image vectorielle.

Une image matricielle est constituée d’une suite de points : c’est le cas des photographies ou des captures d’écran. Leur principal inconvénient est la perte de qualité quand on les redimensionne.

L’image vectorielle, elle, est bien plus proche du dessin que de la photographie. Son contenu décrit en fait un processus de création : tracer une ligne, un cercle, afficher du texte… Les images vectorielles sont très adaptées à la création de logos et peuvent être redimensionnées sans perte de qualité.

Images matricielles de qualité photographique : JPEG, webp

Les images au format JPEG (Joint Photographic Experts Group) sont les plus répandues. Elles sont produites par la majorité des appareil photos, et permettent d’obtenir une bonne qualité d’image tout en se compressant correctement.

Bassin au palais de Titra Gannga (Indonésie)
La plupart des photographies sont stockées au format JPEG

WebP est un format bien plus récent, développé par Google. Par rapport aux images JPEG, il permet une compression bien meilleure. En effet, il n’est pas rare d’arriver à diminuer le poids d’une image de moitié ! Malheureusement, il n’est pas supporté nativement par WordPress et nécessite donc une extension pour être pris en charge.

J’expérimente actuellement l’une d’entre elles sur ce site; je mettrai cet article à jour une fois que je l’aurai validée.

Autres images matricielles : GIF et PNG

Si vous êtes utilisateur de Facebook, vous n’avez probablement pas échappé aux images animées sur votre flux. C’est l’utilisation principale du format GIF (Graphics Interchange Format). Du côté des blogs, si les GIFs étaient très en vogue à l’époque de Geocities, ils ont fort heureusement quasiment disparu.

Gif animé représentant Pikachu sous une barrière "En construction"
Le bon vieux temps

Pour les images fixes, le standard PNG (Portable Network Graphics) fournit les même fonctionnalités, et est en général meilleur en terme de compression. La principale utilisation de ce format est la compression d’images numériques, telles que les captures d’écran ou les dessins réalisés sur ordinateur.

Les personnages de la série "Happy Tree Friends"
Le format PNG est particulièrement adapté pour les créations numériques. Source : Fandom

Les images vectorielles : SVG

L’utilité principale des fichier SVG (Scalable Vector Graphics) est l’affichage d’icônes. Par exemple, les icônes affichées en page d’accueil de Un blog pas à pas sont initialement au format SVG.

Elles peuvent aussi être utilisées pour égayer un titre, comme on le fait sur notre blog de voyage : un lit pour les hébergements, un appareil photos pour les sites à voir, etc…

Copie d'écran de notre site Endless Travel montrant une icône avant le titre
Ajouter une icône avant les titres permet de briser la monotonie du texte

Une autre utilisation est par exemple l’affichage d’une carte dans un blog de voyage. Nous nous sommes beaucoup amusés à dessiner les itinéraires avec Inkscape; par rapport à Google Maps, le résultat est bien plus lisible et beaucoup rapide à charger.

Itinéraire au format SVG dessiné avec Inkscape

A noter que par défaut, WordPress n’autorise pas l’ajout d’images SVG dans la bibliothèque de médias; il est nécessaire d’utiliser une extension qui sécurise les fichiers. Celle-ci sera présentée en fin d’article.

Quelques chiffres sur les images

Si les images sont un sujet important quand on blogue, c’est principalement à cause de leur poids. Comme on va le voir, si on n’est pas précautionneux, un mauvais usage des images risque de ruiner l’expérience utilisateur sur mobile, à cause des temps de chargement trop longs !

Quelques ordres de grandeur sur la taille et le poids des images

L’appareil photo que j’utilise produit des photos d’environ 5000 pixels de large pour 3200 de haut. Si une telle résolution est utile pour des tirages photo de haute qualité, elle est clairement exagérée pour une utilisation dans une page web. En comparaison, un écran d’ordinateur 27 pouces affiche en général 2560 pixels de large, l’écran de mon PC portable 1920 pixels, tandis que la résolution la plus utilisée pour un portable en 2019 était de seulement 360 pixels de large.

On s’aperçoit bien qu’il est inutile d’utiliser une image aussi large pour au final l’afficher en taille réduite : non seulement le temps de transfert sur un téléphone mobile va exploser, mais en plus le navigateur va devoir perdre du temps à réduire l’image.

Compression des images JPEG et PNG

Les appareils photos produisent des fichiers JPEG qui peuvent être compressés encore d’avantage sans perte d’information visuelle notable – à moins par exemple de zoomer très fortement -. Il est en général possible de diviser le poids d’une image par deux ou trois sans que l’utilisateur ne puisse percevoir la différence. Le même principe est valable pour les images PNG.

A titre d’exemple, j’ai compressé une image avec différents facteurs de qualité (100 étant la meilleure qualité, et 0 la compression maximale). Contrairement aux autres images de cette article, je les ai téléchargé sans réduire leur taille afin qu’on puisse zoomer et les comparer.

Si l’image compressée avec une qualité de 42 présente clairement des défauts telles que les bandes horizontales au-dessus de la fenêtre, l’image compressée avec une qualité de 82 ne présente quasiment pas de différence avec l’originale. Pourtant, son poids a été divisé par plus de trois !

Plusieurs sites proposent d’effectuer cette opération en ligne. Parmi eux, tinyjpg pour le format JPEG et tinypng pour les images en PNG. Il suffit de téléverser une image, et de télécharger la version compressée après un peu d’attente. Cependant, ce procédé est assez fastidieux.

La bonne nouvelle, c’est qu’il existe des extensions WordPress qui se chargent d’effectuer cette compression supplémentaire pour vous, de façon transparente. Je présente l’une d’entre elles à la fin de cette article.

Poids relatif des images sur une page web

Les images sont de loin les éléments qui pèsent le plus dans une page web. Une répartition typique des autres éléments est la suivante :

  • 50 kilo-octets pour les fichiers CSS, qui définissent l’apparence du site
  • A peu près a même chose pour le code HTML décrivant le contenu (comme le texte que vous êtes en train de lire)
  • Si le site utilise des fontes spéciales, elles pèsent aussi une cinquantaine de kilo-octets
  • Enfin, les scripts (petits programmes) utilisée par WordPress et ses extensions pèsent moins de 200 kilo-octets

On arrive donc à 300 ou 400 kilo-octets pour le contenu hors images. À côté de ça, même bien optimisée, une seule photo au format JPEG pèse dans les 200 kilo-octets, soit la moitié !

A titre d’exemple, voici un résumé du contenu d’une des pages de notre blog de voyages, obtenu via Pingdom Tools :

Le grand nombre d’images (une soixantaine !) dans cet article a pour conséquence un poids très important. Ce chiffre doit cependant être nuancé, car il serait bien moindre sur mobile. De plus, grâce à l’extension reSmush.it présentée plus bas, les images ne sont chargées que lorsqu’elles deviennent visibles, et non plus dès que l’utilisateur visualise la page.

Comprendre les images stockées par WordPress

Quand on ajoute une image à la bibliothèque WordPress, il y a en fait plusieurs images qui sont stockées – en général, quatre -. WordPress stocke bien sûr l’image que vous avez fournie dans sa résolution originale. Mais en plus, il génère plusieurs images de taille réduite : en général, une pour les miniatures (images carrées de 150×150 pixels), une de taille moyenne (maximum 300 pixels de largeur et hauteur) et une de grande taille (maximum 1024 pixels pour chaque dimension).

L’intérêt de ces images multiples est de permettre au navigateur de choisir la plus adaptée à la taille de l’écran – en particulier sur un mobile -. Ainsi, la plupart des images seront affichées avec une largeur de 1024 pixels sur la plupart des ordinateurs, tandis que le navigateur utilisé sur un téléphone portable avec un petit écran ne téléchargera que la version de 300 pixels de large. Ce sera autant de données à ne pas transférer !

Il est aussi possible de spécifier une taille quand on insère une image ou une galerie dans un document WordPress. C’est cependant rarement nécessaire, sauf éventuellement dans le cas des captures d’écran, comme on le verra dans la partie consacrée à l’ajout d’images dans WordPress.

Suivant le thème utilisé, les tailles d’images seront parfois différentes de celles indiquées ici. il est possible de les visualiser dans l’écran de configuration Réglages / Médias.

Réglage de la taille des images sous WordPress
Les tailles d’images avec le thème GeneratePress

Format d’image et orientation

Bien que cette partie relève plus de la photographie, il y a deux aspects importants qui vont impacter la façon dont une image est affichée. Il s’agit du format d’image, et de son orientation.

Format d’image : 16/9, 4/3, 3/2…

De façon similaire à un écran de télévision, le ratio entre la longueur et la hauteur détermine si l’image a un aspect plutôt carré ou plutôt allongée.

Les images au format 4/3 et 3/2 se rapprochent d’un carré. Elles sont aussi bien adaptées aux portraits qu’à la photographie d’intérieur, à l’architecture, ou encore pour les photos de cuisine.

Le format 16/9 est plus rectangulaire. S’il est surtout utilisé pour photographier des paysages, il sera aussi utile pour capturer des objets de taille allongée.

Sur un blog, les différents formats peuvent être en général utilisés indifféremment. Un même article pourra comporter des images individuelles en différents formats sans que cela frappe visuellement. Cependant, comme on le verra plus tard, les galeries seront plus esthétiques si elles contiennent des images de proportions similaires.

Orientation : image horizontale (paysage) ou verticale (portrait)

Là encore, l’orientation dépend du sujet. Si les deux orientations peuvent être utilisées dans vos articles, je conseille de limiter l’usage des images au format portrait de grande taille. En effet, sur un écran d’ordinateur, elles ont tendance à occuper beaucoup d’espace verticalement tout en laissant beaucoup de vide sur le côté.

Tresse de piment séché à côté de caractères chinois

Il peut donc être judicieux d’en regrouper plusieurs dans une galerie pour densifier un peu le contenu.

Préparer vos images

Avant d’ajouter vos images à la bibliothèque de média WordPress, je conseille au minimum les redimensionner et de les renommer. Voyons en détail l’intérêt de ces deux opérations.

Redimensionnement

Comme on l’a vu précédemment, les appareils photos actuels produisent des images ayant des résolutions bien plus larges que ce qui est visible sur nos écrans. Il serait donc inutile de les afficher tel quelles. De plus, les hébergeurs limitent en général la taille des fichiers téléchargés. Une tentative d’insérer une image de plusieurs méga-octets se soldera donc probablement par un message d’erreur.

Une première tâche consiste donc à redimensionner vos photos. Dans l’idéal, leur largeur dépend du thème que vous utilisez; cependant, pour ne pas trop se compliquer la vie, une largeur de 1600 pixels est en général adaptée.

Renommage

Si cette étape n’est pas indispensable, elle permet d’améliorer votre référencement par les moteurs de recherche. En effet, avec le texte alternatif dont on parlera plus bas, le nom du fichier est un des seuls moyens pour un programme informatique de savoir ce que contient l’image !

Les caractères spéciaux tels que les points d’exclamation ou les virgules sont à proscrire. De façon générale, je conseille de n’utiliser que des caractères non accentués dans les noms de fichier, ainsi que des chiffres. Pour séparer les mots, plutôt que des espaces, utilisez le caractère souligné _ ou moins -. Ainsi, des noms valides seraient « tarte-aux-pommes-avant-cuisson.jpeg » ou encore « coucher_soleil_krabi.jpg ».

Comprendre les attributs WordPress des images

Soyons francs : comprendre les différents champs utilisés par WordPress dans la bibliothèque des médias est compliqué. Quand on y édite une image, on se retrouve avec pas moins de quatre champs à remplir.

Copie de l'écran d'édition d'une image sous WordPress

On peut donc modifier le texte alternatif, le titre, la légende et la description. Parmi ces quatre champs, il y en a un qui est essentiel, un autre est cosmétique, et les deux autres n’ont pas d’intérêt dans la plupart des cas.

Il ne faudrait pas se mélanger les pinceaux : voyons donc clairement le rôle de chacun.

Texte alternatif

Le texte alternatif est assez crucial, et a plusieurs rôles :

  • Il est affiché à la place de l’image si le navigateur n’arrive pas à la charger
  • Les lecteurs d’écran l’utilisent pour décrire l’image à des personnes aveugles ou malvoyantes
  • Les moteurs de recherche l’exploitent connaître le contenu de l’image

Il en résulte deux bonnes pratiques pour rédiger des textes alternatifs adaptés

  • Pour mieux rédiger votre texte alternatif, je vous conseille de penser à leur but initial : décrire l’image à une personne malvoyante ou aveugle. Est-ce que votre texte décrit correctement l’image pour une personne qui ne peut pas la voir ?
  • Dans vos articles, il faudra donc faire apparaître le sujet de l’article dans les textes alternatifs de plusieurs images. Il ne faut cependant pas tomber dans l’excès et se forcer pour qu’il apparaisse systématiquement !

Prenons le cas de l’image suivante, représentant un cinéma quasiment en ruines à Savannakhet (Laos).

Le cinéma Laochaleun à l’abandon à Savannakhet

Si l’article porte sur la ville de Savannakhet, un texte alternatif pourrait être « Le cinéma Laochaleun à l’abandon à Savannakhet », « Un cinéma en ruines à Savannakhet ». Par contre, un texte alternatif inadapté serait « Patrimoine délaissé à Savannakhet » qui n’est pas assez descriptif.

Titre de l’image

Le titre est affiché dans la bibliothèque des médias. Par défaut, c’est le nom de l’image. A moins d’être perfectionniste, il n’est pas nécessaire de l’éditer – en particulier si le nom de vos fichiers reflète le contenu de l’image -. C’est toujours ça de gagné !

Légende

La légende apparaît sous l’image. Si elle peut être simplement une description textuelle de l’image, il est aussi possible de l’utiliser pour décrire une émotion ou une réaction. Cela dépend de votre style rédactionnel, de l’image elle-même, et de la réaction que vous souhaitez provoquer chez votre lectorat.

Si on reprend l’exemple de l’image précédente, un légende adaptée pourrait être :

  • « Ce qu’il reste du cinéma Laochaleun » – une description visuelle
  • « Les bâtiments délabrés ne manquent pas dans la ville » – une constatation générique
  • « Attention la tête ! » – une exclamation humoristique
  • « Quel dommage de voir tout ce patrimoine laissé à l’abandon ! » – une légende faisant appel à l’émotion

A noter que la légende est optionnelle. Il est possible par exemple possible de l’omettre si l’image a été introduite par le paragraphe précédent.

Description

Ce dernier champ n’aura que peu d’utilité pour la majorité d’entre nous, et n’est en général pas visible dans l’article. Cependant, si vous êtes curieux de savoir à quoi elle sert, examinons ensemble les méconnues pages des fichiers joints !

Pour chaque fichier de la bibliothèque, WordPress génère automatiquement une page correspondante (dont le permalien est visible sous le titre).

C’est d’ailleurs à cette page que correspond l’option « Page du fichier joint », dans le menu de création de lien des images.

Certains thèmes personnalisent l’affichage de cette page en affichant le contenu de la description. A moins d’être un photographe qui veut présenter en détail chacun de ses clichés, cette fonctionnalité ne nous servira pas. Au contraire, ces nombreuses pages vides de contenu réel peuvent être pénalisantes en terme de référencement. C’est pourquoi je présente en fin d’article une extension qui empêche de visiter ces pages, en redirigeant le visiteur vers l’article correspondant.

En résumé

Seuls deux champs sont réellement utiles : la légende et le texte alternatif. Si vous pouvez laisser libre cours à votre imagination en ce qui concerne la légende, soigner le texte alternatif aura des bénéfices en terme de référencement. Alors, au travail !

J’avoue que pendant longtemps, j’ai été de l’école (très répandue) « je copie-colle ma légende dans le texte alternatif ». J’essaye depuis de remplir consciencieusement ce champ, même si c’est une tâche assez mécanique.

La bibliothèque des médias WordPress

On ne va pas se mentir : je trouve que si l’éditeur de blocs est de loin l’avancée majeure des dernières évolutions de WordPress, la bibliothèque des médias est totalement dépassée en terme d’ergonomie. La bonne nouvelle, c’est qu’il est de moins en moins nécessaire de l’utiliser. En effet, la plupart des manipulations sur les images telles que le téléversement d’un fichier ou l’édition des textes alternatifs et légendes peuvent être réalisées directement depuis l’éditeur de blocs.

La bibliothèque des médias WordPress stocke les fichiers que vous avez téléversé. Si on l’utilise surtout pour les images, il est possible d’y stocker aussi des vidéos, des fichiers sons ou même des feuilles de calcul.

Copie d'écran de la bibliothèque de médias de WordPress

Parmi les fonctionnalités utiles, le passage de la visualisation sous forme de liste à une visualisation sous forme de vignette, en cliquant sur les deux premières icônes à gauche de de la barre d’outils. Il est également possible de rechercher un fichier par son nom.

En cliquant sur une image, on passe en mode édition.

Détail d'un fichier joint dans la bibliothèque WordPress

Il est possible de modifier le texte alternatif, le titre, la légende et la description. Il est important de noter que si vous modifiez ces champs pour une image déjà présente dans un document, celui-ci ne sera pas modifié. Il faudra réinsérer l’image pour qu’ils soient pris en compte ! Une autre utilité de cette page est la possibilité de supprimer un fichier, via le lien « Supprimer définitivement » situé en bas à droite de l’écran.

Le bouton « Modifier l’image » permet d’accéder à un nouvel écran fournissant plusieurs fonctionnalités d’édition de l’image :

  • Rotation
  • Retournement (effet miroir)
  • Recadrage
  • Redimensionnement

Si elles peuvent dépanner, cet écran est bien moins ergonomique qu’un outil de bureau dédié; la majorité des utilisateurs n’en auront que très rarement l’utilité.

Les images dans le nouvel éditeur de blocs WordPress (Gutenberg)

De nombreux blocs permettent d’afficher une ou plusieurs images dans vos articles. Passons en revue les différentes possibilités qui s’offrent à vous !

Définition de l’image mise en avant

L’image mise en avant peut être choisie dans l’onglet « Document » de l’éditeur de blocs. La façon de l’afficher est différente suivant chaque thème. Par exemple, sur notre site Endless Travel, j’ai adapté le thème GeneratePress pour qu’elle ait l’apparence suivante :

Image mise en avant sur notre site Endless Travel

Insertion d’une image simple

La façon la plus répandue d’ajouter une image dans un article est l’utilisation du bloc « Image ».

Une manière très simple de procéder est de déposer une image depuis votre ordinateur dans l’éditeur de blocs, ce qui créera automatiquement le bloc.

Si vous préférez utiliser une autre méthode pour choisir l’image (par exemple si elle est déjà présente dans votre bibliothèque de médias), il faut tout d’abord créer le bloc. Choisissez donc le type « Image » dans la liste des types de blocs; l’éditeur affichera trois boutons correspondants à autant de méthodes de sélection de l’image.

La méthode à utiliser dépend de l’endroit où est stockée l’image :

  • Le bouton « Téléverser » permet de choisir un fichier sur votre ordinateur; il est aussi possible de glisser-déposer un fichier sur cette zone pour parvenir au même résultat.
  • Si l’image est déjà présente dans la bibliothèque de médias, vous pouvez l’insérer en utilisant le second bouton.
  • Enfin, vous pouvez utiliser une image sur un site web en saisissant son adresse.

La plupart des blocs contenants des images offrent ces quatre méthodes pour spécifier l’image utilisée.

Après avoir choisi l’image, il est possible de saisir une légende en-dessous.

Les réglages possible sur ce type de bloc sont assez simplistes. Via la barre d’outils, il est possible de lier l’image (à une adresse ou au fichier média correspondant) ainsi que de choisir le centrage horizontal. Dans l’onglet « Bloc », on peut aussi saisir le texte alternatif ou choisir un style arrondi.

Gazebo au jardin botanique de Singapour, avec un style arrondi

Il est aussi possible de modifier la taille de l’image. Si on a rarement à utiliser cette option, elle peut s’avérer utile dans le cas des captures d’écran. Reprenons par exemple la capture d’écran de notre blog de voyage présentée en introduction, qui fait 1210 pixels de largeur. Avec un affichage en grande taille (soit 1024 pixels), l’image obtenue est floue :

Copie d'écran de notre site EndlessTravel montrant une icone avant le titre

Le redimensionnement des textes leur donne souvent cet apparence. Pour pallier à cet effet, il faut forcer la taille de l’image à « Taille originale ».

Ajout d’une galerie d’images

Les galeries d’images permettent de présenter plusieurs images dans un format compact.

Quand on crée une galerie, il vaut mieux qu’elle ne contienne que des images d’un même format; en effet, avoir côté à côté des images d’aspect ou d’orientation différents n’est pas très esthétique. Voici par exemples deux photographies prises à Girona; l’une est au format 3:2 et l’autre au format 16:9. La différence de hauteur est assez inesthétique. Le résultat serait encore bien pire en mélangeant des images au format portrait et paysage !

L’option « Recadrer les images » de la galerie permet de remédier à ce problème, au prix d’une découpe des bords de l’image de droite. Ici, le résultat est plutôt bon, mais le recadrage peut avoir un effet bien moins réussi si les images sont de formats très différents !

Il est possible de créer une galerie sur plusieurs lignes, en paramétrant un nombre de colonnes inférieur au nombre d’images.

Actuellement (sous WordPress 5.4), l’édition des textes alternatifs pour les images d’une galerie est peu ergonomique. En effet, il n’est pas possible de le modifier via les réglages du bloc, et il faut donc repasser par la bibliothèque de médias pour l’ajouter !

Ajouter un bloc mixte média et texte

Une fleur de frangipanier sur les ruines d'un temple à Champassak

Ce type de bloc est un excellent moyen moyen de dynamiser la présentation d’un article sur ordinateur, en brisant un peu l’uniformité. Sur mobile, il sera présenté au format vertical.

L’inconvénient de ce bloc est qu’il faut avoir un contenu assez long, sans quoi la différence de taille entre le texte et l’image est très inesthétique !

Il est cependant possible de recadrer l’image afin que sa hauteur s’adapte à celle de la colonne de contenu. Cependant, le résultat sera souvent décevant.

A noter que malgré son nom, il est possible d’ajouter autre chose que du texte dans la seconde colonne.

Parmi les options intéressantes de la barre d’outils du bloc, on trouve :

  • la possibilité de placer l’image à droite plutôt qu’à gauche
  • la modification de l’alignement vertical

Le bloc média et texte est un parfait exemple des améliorations apportées par l’éditeur de blocs de WordPress : avec l’éditeur classique, créer une telle mise en forme était tout bonnement impossible. Avec cette évolution, c’est désormais trivial !

Création d’une bannière

Une bannière est une image en grande largeur (toute la largeur de l’espace dédié aux poste de blog) ou carrément en pleine largeur, agrémentée d’un texte.

La boucle de Thakhek au Laos

Ce bloc est pour l’instant un peu pauvre en fonctionnalités. S’il est possible de spécifier que l’image d’arrière-plan est fixe quand on scrolle et d’appliquer une teinte de couleur, il manque la possibilité d’ajouter automatiquement certaines informations. Il est par exemple impossible d’afficher les catégories ou étiquettes de l’article, ou encore son auteur, comme le font la plupart des thèmes.

Ce type de bloc est cependant prometteur et j’espère le voir évoluer dans les prochaines versions de WordPress !

Extensions WordPress utiles

Les images étant un point crucial dans l’utilisation de WordPress, il n’est pas étonnant qu’on trouve énormément d’extensions s’y rapportant. Parmi celles-ci, voici ma sélection pour accélérer votre blog, gérer les images SVG, et permettre de renommer un fichier dans la bibliothèque WordPress.

reSmush.it : pour compresser les images de façon transparente

J’ai évoqué plus haut les gains possible en compressant plus fortement les images JPEG et PNG. Beaucoup d’extensions proposent cette fonctionnalité. Après en avoir testé plusieurs, j’utilise désormais reSmush.it Image Optimizer, qui a trois qualités primordiales :

  • Sa simplicité d’utilisation : cette extension se charge de compresser automatiquement toutes les images lors de leur téléchargement dans la bibliothèque WordPress
  • Son efficacité : le taux de compression est bien meilleur que celui de la plupart de ses concurrents. Dans l’ensemble, sur notre blog de voyage, l’espace occupé par les images a été divisé par deux. Quant à Un blog pas à pas, où les images sont plutôt des copies d’écran, les gains sont encore plus importants : 62% de gain, soit autant de données qu’il ne faudra pas transférer !
  • Sa gratuité : certaines alternatives vous limitent à un petit nombre d’images compressées chaque mois. reSmush.it, lui, n’impose aucune limitation.

Par défaut, cette extension utilise un facteur de qualité d’image 92 (0 étant la pire qualité mais avec une compression maximale, et 100 la compression la plus faible possible). Je conseille de diminuer cette valeur à 82. Pour la modifier, rendez-vous sur Médias / reSmush.it et dans les paramètres, remplacez la valeur 92 par 82 puis validez avec le bouton « Enregistrer les modifications ».

Écran de paramétrage de reSmush.it

Si vous avez téléchargé des images sur WordPress avant d’installer l’extension, il est nécessaire de lancer manuellement leur compression. Utilisez pour cela le bouton « Optimiser toutes les images » pour de lancer la compression. L’opération est assez longue, alors soyez patient !

L’autre intérêt de cet écran est d’afficher les statistiques de compression; vous y verrez donc le pourcentage de gain global ainsi que l’espace économisé.

Il est très peu probable que vous remarquiez des dégradations de la qualité des images en utilisant reSmush.it. Cependant, si c’était le cas, il est possible de désactiver la compression pour une image donnée. Il suffit pour cela de se rendre dans la bibliothèque des médias WordPress, d’éditer l’image, et de cocher l’option « Désactiver l’optimisation reSmush.it » tout en bas.

Lazy Load : le chargement des images à la volée

Sous ce nom barbare se cache une extension permettant d’accélérer grandement la réactivité de votre site.

Son principe (« Lazy load » : chargement paresseux) est extrêmement simple. Au lieu de charger toutes les images dès que l’utilisateur visite une page, elle ne les charge qu’une fois qu’elles sont visibles à l’écran. Ainsi, le temps de réponse initial est grandement amélioré.

Tout comme reSmush.it, un des gros avantages de Lazy Load by WP Rocket est sa simplicité d’utilisation. Une fois installé, il suffit d’activer le « lazy load » pour les images dans les réglages de l’extension.

Les options de Lazy Load by WP Rocket

A noter qu’auparavant, j’ai longtemps utilisé une extension similaire, nommée a3 Lazy Load. Cependant, celle-ci occasionnait des bugs étranges qui au final diminuaient la performance de notre site ! Je suis donc passé à Lazy Load by WP Rocket dont je suis totalement satisfait.

SafeSVG : autoriser le téléversement des images au format SVG

Par défaut, WordPress n’autorise pas le téléchargement d’images SVG pour des raisons de sécurité. Vous serez donc confronté au message d’erreur suivant :

Message d'erreur WordPress indiquant l'échec du téléversement d'une image SVG

L’extension Safe SVG permet de télécharger des images dans votre bibliothèque tout en les sécurisant. Son utilisation est transparente; une fois installée, vous ne remarquerez plus sa présence !

Attachment Pages Redirect : rediriger les pages de fichiers joints

L’extension Attachment Pages Redirect est très minimaliste : ne disposant même pas d’un écran de configuration, elle saura se faire oublier une fois l’installation terminée. Mais alors, à quoi bon installer une extension invisible ? Nous avons évoqué précédemment le fait que WordPress crée automatiquement une page pour chaque fichier téléchargé. Cela peut être nuisible en terme de référencement; Attachment Pages Redirect va donc rediriger automatiquement cette page vers l’article correspondant, ce qui va éviter leur indexation par les moteurs de recherche.

Phoenix Media Rename : renommer les fichiers dans la bibliothèque de médias

La bibliothèque de médias WordPress ne propose pas de fonctionnalité de renommage de fichier; c’est pour cela que je conseille de les renommer avant de les téléverser. Si jamais vous avez déjà des fichiers non renommés sur votre blog, l’extension Phoenix Media Rename vous permettra de les renommer, grâce à un champ ajouté tout en bas de la fenêtre d’édition des fichiers.

Champ d'édition du nom du fichier ajouté par Phoenix Media Rename

En résumé

Bien gérer les images dans WordPress a deux bénéfices :

  • Effet positif sur le référencement
  • Augmentation de la vitesse de son blog, et donc amélioration de l’expérience utilisateur sur mobile

Améliorer son référencement grâce aux images

Les images doivent être redimensionnées et renommées avant d’être insérées dans la bibliothèque de médias WordPress.

Le texte alternatif doit décrire l’image. A l’intérieur d’un article, le sujet devra apparaître de façon naturelle dans plusieurs textes alternatifs.

Extensions à installer pour accélérer son site

Installer les deux extensions suivantes va grandement améliorer la performance de votre blog

  • Lazy Load
  • reSmush.it avec un niveau de compression de 82

Les points à vérifier avant de publier un article

Une fois qu’on a terminé de rédiger un article, on n’a généralement qu’une seule envie : presser « Publier ».
Hop, une bonne chose de faite ! Au suivant !

Oui, je sais, ça démange

… Pas si vite !

Il y a une multitude de petit détails qui peuvent nous avoir échappé. Et autant publier un article impeccable dès le début plutôt que d’avoir à l’éditer à nouveau, non ? En particulier si vous avez déjà une petite audience et que vous avez l’habitude d’annoncer vos nouvelles publications dans la foulée sur Facebook ou via une lettre de diffusion…

Une partie de ces vérifications est assez mécanique, comme dans le cas des liens; d’un autre côté, il y a aussi des vérifications plus subjectives en terme de lisibilité ou de référencement.

Voici donc la liste des points que je passe en revue avant chaque publication – et parfois aussi après une grosse modification d’un article existant -.

Se concentrer sur le titre de votre article

Le titre de l’article est la partie qui saute aux yeux de vos lecteurs – que ce soit directement sur votre blog ou encore plus les résultats d’un moteur de recherche -. Il faut donc lui prêter une attention particulière !

Est-ce qu’il reflète le sujet de l’article ? Donne-t-il envie de cliquer sur l’article ? Est-ce qu’il n’est pas trop long ?

Et tant qu’à vérifier le titre, autant jeter un œil au permalien (accessible en cliquant sur le titre de l’article), qu’on a trop souvent tendance à oublier – surtout si on modifie le titre en cours d’écriture ou lors de la relecture -. Est-ce que qu’il reflète encore le titre ? Et est-ce que je l’ai bien raccourci pour supprimer les mots de liaison ?

Titre de l’article et permalien correspondant sous Gutenberg

Vérifier l’onglet « Document »

Je continue mes vérifications dans l’onglet « Document » de Gutenberg. Est-ce que la catégorie est la bonne ? Et les étiquettes sont-elles bien assignées ? Peut-être est-il nécessaire d’en définir de nouvelles.

Si j’utilise les images mises en avant sur le blog, est-ce que j’ai pensé à en définir une ? Et finalement, est-ce que j’ai autorisé les commentaires ?

Passer en revue le plan de l’article

Vous aviez probablement une idée claire du plan de l’article avant de commencer à le rédiger. Il est cependant possible que sa structure ait évolué pendant l’écriture. Il est possible de visualiser uniquement les titres de l’article en cliquant sur l’icône « Structure du contenu », en haut à gauche de l’éditeur.

Aperçu du document sous Gutenberg

Maintenant que l’article est terminé, est-ce que le plan est toujours clair ? La structure est-elle suffisamment hiérarchisée en utilisant des balises h2, h3… pour les titres ? J’ai pour ma part tendance à produire des articles avec une structure trop « plate », comme l’indique l’absence de titre de niveau h3 dans l’aperçu ci-dessus !

Autre interrogation, est-ce que le sujet apparaît dans l’introduction et est repris dans les titres ?

Enfin, c’est le moment de vérifier que tous les titres ont la même structure grammaticale. Par exemple, la copie d’écran ci-dessus, ils commencent quasiment tous par un verbe à l’infinitif.

Évaluer la lisibilité de l’article

Ensuite, je prévisualise l’article, et j’essaye de me mettre à la place du lecteur. Est-ce que le texte n’est pas trop dense par endroits ? Si besoin est, j’aère le contenu en découpant un gros paragraphe en plusieurs parties.

Ajouter des images peut aussi être un bon moyen de soulager un peu les yeux des lecteurs.

Toujours en terme de structure, est-ce que certains éléments ne gagneraient pas à être présentés sous forme de puces ? C’est une question que je me suis beaucoup posée sur ce même article !

Prévisualiser aussi la version mobile

J’effectue également une prévisualisation de la version mobile en utilisant les outils développeur de Firefox. Pas de panique en lisant ces mots, c’est extrêmement simple !

Sous Firefox, lorsque je prévisualise l’article, j’appuie sur la touche F12 pour faire apparaître la barre d’outils développeur. Là, je clique sur l’icône bleue située tout en haut à droite de la barre d’outils, représentant un téléphone et une tablette.

Barre d’outils développeur de Firefox

Cela me permet d’évaluer rapidement la lisibilité qu’aura mon article sur un téléphone.

Prévisualisation de la version mobile d’un article sous Firefox

Si vous utilisez Chrome plutôt que Firefox, la manipulation est la même, mais l’icône se trouve en haut à gauche de la barre d’outils, plutôt que en haut à droite.

Passer en revue les images

Ah, les images… c’est probablement la partie de l’article la plus fastidieuse à vérifier. Pour chacune d’entre elles, il faut passer en revue les point suivants :

  • Tout d’abord, est-ce que le nom de fichier est descriptif ? Si ce n’est pas le cas, mieux vaut le supprimer de la bibliothèque des médias WordPress et réinsérer une version renommée. Autre alternative, utiliser une extension telle que Phoenix Media Rename qui vous permettra d’effectuer le renommage directement sous WordPress
  • Si vous avez comme moi l’habitude de centrer les images horizontalement, est-ce que le centrage est correct ?
  • Est-ce qu’on visualise l’image en haute résolution en cliquant dessus ? C’est-à-dire sous Gutenberg, est-ce que l’image est liée au fichier média ?
  • L’image a-t-elle une légende et un texte alternatif ? Est-ce que le sujet de l’article est présent dans un ou plusieurs d’entre eux ?
Lien vers le fichier média d’une image

Créer et vérifier les liens internes et externes

C’est un aspect souvent oublié – y compris par moi -. Il ne faut pas hésiter à ajouter des liens dans son contenu, qu’ils soient internes (vers votre site) ou externes (vers d’autres sites). Une bonne utilisation des liens peut améliorer votre référencement !

N’hésitez pas à cliquer sur tous les liens de votre article pour vérifier leur bon fonctionnement – les fautes de frappes peuvent en effet aussi s’y glisser ! -.

Certains blogueurs conseillent de faire systématiquement ouvrir les liens dans un nouvel onglet. Si cela peut aider vos lecteurs néophytes en informatique qui ne savent pas le faire via le menu contextuel ou la touche Control, je trouve personnellement cette pratique insupportable. C’est à l’utilisateur de décider comment il veut ouvrir ses liens, et le blogueur n’a pas à lui imposer !

Relire et vérifier l’orthographe

Je repasse ensuite (pour la énième fois) mon texte en revue. Tout d’abord dans l’éditeur, pour voir si le correcteur orthographique n’a pas détecté une faute passée inaperçue. Ensuite, à nouveau, en prévisualisant mon article.

Le problème, c’est qu’à force de relire, on connaît son texte par cœur et on ne fait même plus attention à ce qui est réellement écrit !

Un conseil qui je vois passer assez souvent est de relire son article à haute voix; cela force à se concentrer sur le texte. Ainsi, on remarquera mieux les mots inutiles qui ont pu se glisser, ou les non-sens.

Prévoir les évolutions futures

On y est presque ! Mais tant qu’à faire, autant évaluer tout de suite le travail restant à fournir sur l’article lors des évolutions à venir.

J’utilise d’abord le compteur intégré à Gutenberg pour avoir une idée du nombre de mots de ma publication.

Statistiques du document sous Gutenberg

Mon but est d’arriver autant que possible à des articles d’environ deux mille mots, car la longueur des articles est déterminante dans leur référencement. Inutile pour autant de s’étaler systématiquement; certains articles resteront à jamais courts. Si un sujet peut être traité totalement en moins de mille mots, je ne vois pas l’intérêt de doubler sa taille artificiellement – au risque d’endormir le lecteur et au final, d’avoir un article ennuyeux à lire ! –

Chacun a des habitudes rédactionnelles qui lui sont propres. Certains sont capables de rédiger d’un trait un article de plusieurs milliers de mots. Je préfère pour ma part travailler par itérations successives. Afin de ne pas oublier les évolutions que je souhaite apporter à chaque article, j’ai créé un document Google Docs dans lequel je note mes idées pour les changements ultérieurs : compléments à ajouter, points à vérifier…

En plus de ces compléments à apporter, il est également bon de prévoir une relecture régulière des articles du blog. Sont-ils toujours à jour ? Sur beaucoup de sujet, il y a toujours des précisions à ajouter ultérieurement, des corrections à apporter… Garder ses articles « frais » est une excellente stratégie en terme de référencement !

Une fois l’article publié…

… vous n’en avez pas fini ! Voici encore quelques tâches à effectuer.

Vous pouvez le soumettre manuellement à la Google Search Console. Cet outil fera l’objet d’un article à venir, donc si ça ne vous dit rien, pas de panique ! Votre site sera de toutes façons parcouru régulièrement par Google, qui va donc indexer votre article lors de son prochain passage.

N’hésitez pas à effectuer une relecture directement sur votre portable, même après avoir effectué la prévisualisation conseillée auparavant.

On a déjà évoqué le fait d’ajouter des liens dans l’article. Mais tant qu’on n’y est, est-ce qu’il n’est pas possible de créer un lien depuis ou plusieurs articles existants vers l’article actuel ? Par exemple, lors quand je publierai mon article sur Google Search Console, ce sera l’occasion d’ajouter un lien depuis cet article ! Passez donc rapidement en revue les titres des articles existants pour voir si leur sujet n’est pas proche de celui de votre nouvel article.

Enfin, toujours en ce qui concerne les liens… est-ce que l’article devra apparaître dans un menu ou une page récapitulative (comme la liste des articles par niveau sur Un blog pas à pas) ? Si c’est le cas, autant le faire dès la publication de l’article, pour ne pas l’oublier !

A noter que je n’ai pas encore abordé la thématique du référencement avec Yoast SEO dans cette liste de vérifications. Si vous utilisez cette extension (ou une autre extension WordPress similaire), il est clair que son statut fait partie des choses à vérifier avant toute publication !

Les taxonomies WordPress : découvrir les catégories et étiquettes

Les catégories et les étiquettes sont un moyen simple d’organiser les articles de votre blog sous WordPress.

Ces deux concepts font partie de ce qu’on appelle dans le jargon WordPress des taxonomies – c’est à dire des moyens de regrouper des articles semblables -.

Voyons tout d’abord pourquoi il est important d’utiliser cette fonctionnalité, tant pour vos utilisateurs que du point de vue du référencement par les moteurs de recherche.

Pourquoi structurer son blog en utilisant des taxonomies ?

L’utilisation des catégories et étiquettes permet d’abord de faciliter la vie de vos lecteurs.

En effet, le gros avantage de ces taxomonies est de permettre de trouver facilement des articles similaires, sans passer par la recherche de votre site. Un simple clic sur une catégorie ou étiquette permet d’afficher les articles correspondants. Rien de plus facile !

L’autre bénéfice des taxonomies est d’aider les moteurs de recherche à comprendre la structure de votre site.

Ceux-ci sont friands de liens, qu’ils pointent vers d’autres articles de votre site ou vers l’extérieur. Comme les taxonomies permettent de créer automatiquement un maillage entre articles similaires, c’est autant d’informations supplémentaires à exploiter.

Les catégorie WordPress

La notion de catégorie permet d’organiser (potentiellement hiérarchiquement) les articles du site.

Par exemple, pour un site de cuisine, les catégories pourraient être les suivantes :

  • Recettes
    • Sucré
    • Salé
    • Apéritif
    • Boissons
  • Tour de main
  • Matériel
  • Ingrédients

Suivant le degré de précision souhaitée, la hiérarchie peut avoir une profondeur arbitraire. Par exemple, notre blog de voyage classe les articles de la façon suivante :

  • Destinations
    • Europe
      • France
      • Espagne
    • Amérique du nord
      • États-Unis
    • Asie
      • Chine
      • Laos
      • Thaïlande
  • Pratique
    • Les visas
    • Quel matériel choisir

S’il est possible d’assigner plusieurs catégories à un article, cela présente peu d’intérêt en pratique et peut même prêter à confusion.

Gestion des catégories

Un écran de gestion des catégories est accessible via la barre latérale en suivant Articles / Catégories. Cependant, le plus simple est de travailler directement depuis l’écran d’édition de l’article.

En sélectionnant Document dans la barre de droite, on voit que l’article a initialement la catégorie Non classé.

Réglages d'un document sous l'éditeur de blocs WordPress montrant la catégorie "non classée" sélectionnée
Catégorie par défaut des articles WordPress (non classé)

En cliquant sur Ajouter une nouvelle catégorie, on peut saisir son nom et sélectionner éventuellement une catégorie parente pour créer une hiérarchie. Si je crée par exemple la catégorie Recette, puis la catégorie Salé ayant Recettes comme parent, j’obtiens la hiérarchie suivante :

Réglages d'un document sous l'éditeur de blocs WordPress montrant plusieurs catégories sélectionnées et la fonctionnalité de création d'une catégorie
Création d’une hiérarchie (arborescence) de catégories

Pour affecter cette nouvelle catégorie à votre article, il faut alors décocher les catégories Recette et Non classé pour ne laisser plus que Salé coché.

Bien sûr, si vous désirez par la suite affecter une catégorie existante à d’autres articles, il ne sera pas nécessaire de repasser par l’étape de création : il suffira de cocher directement la catégorie désirée.

Affichage des catégories

La façon dont les catégories sont affichées dans votre blog dépend du thème utilisé. Elles sont souvent présentées en bas de l’article, à côté des étiquettes.

J’ai fait le choix d’afficher plutôt la catégorie sous forme de fil d’Ariane, juste sous le titre. Pour cela, j’utilise l’extension ayant le nom un peu barbare de Breadcrumb NavXT. Elle n’est cependant pas très facile à mettre en place; j’y reviendrai donc dans un article ultérieur.

Certains thèmes permettent aussi d’afficher une page spécifique de présentation de chaque catégorie. C’est cependant une fonctionnalité rarement utilisée. On envisage à terme de s’en servir sur notre blog pour présenter en détail chaque destination.

Une autre possibilité est d’assigner à chaque catégorie une image, par exemple via l’extension Taxonomy Images. Nous avons ainsi défini une image pour chaque continent et pays, ainsi qu’une courte description. Ces données sont ensuite utilisées pour générer automatiquement la page des destinations.

Les étiquettes WordPress

Tout comme les catégories, les étiquettes permettent permettent de regrouper les articles. Les deux différences principales entre ceux deux taxonomies sont les suivantes :

  • il n’y a pas de hiérarchie entre les étiquettes
  • Il est possible (et souhaitable) d’assigner plusieurs étiquettes à un même article

Les étiquettes permettent de grouper les articles suivant un thème donné.

Concrètement, pour un blog de cuisine, on peut avoir envie de les regrouper par mode de cuisson, par occasion, ou encore par type de cuisine. Ainsi, des étiquettes possibles seraient Tarte, Végétarien, Au four, Vite préparé, Sur le pouce, Dîner de fête

Pour un blog de voyage, on peut considérer la géographie de l’endroit, la durée du séjour, le type de visites… Ainsi, on utilise entre autres Montagne, Mer, Ville, Escapade, Week-end ou Architecture comme étiquettes.

Par rapport aux catégories, les étiquettes permettent une classification bien plus souple. Il faut cependant éviter d’en créer trop, ce qui deviendrait vite ingérable.

Mon conseil est de créer une nouvelle étiquette uniquement si elle regroupe un nombre minimum d’articles, par exemple cinq ou plus. En-dessous, cela a peu de sens de les regrouper.

Assigner une ou plusieurs étiquettes à un article

Comme pour les catégories, un écran dédié de gestion est disponible via Articles / Catégories. Mais là encore, il est bien plus confortable de les gérer directement en éditant un article.

Le bloc de gestion des étiquettes est situé directement en-dessous de celui des catégories. Pour créer une étiquette, tapez son nom dans l’espace en-dessous de Ajouter une étiquette et appuyez sur la touche Entrée. Il est possible d’en assigner plusieurs, ou d’en retirer en cliquant sur la croix située à coté de leur intitulé.

Plusieurs étiquettes sélectionnées dans l'éditeur de blocs de WordPress

Par la suite, pour réutiliser une catégorie existante, il suffit de commencer à taper son nom dans le même espace; WordPress affichera alors les catégories commençant par ces caractères.

Affichage des étiquettes

Tout comme pour l’affichage des catégories, c’est le thème utilisé qui décidera de l’emplacement des étiquettes; celui-ci peut être paramétrable.

Utilisation des catégories et étiquettes pour affichage des articles liés

Sur Endless Travel, nous affichons en bas de chaque article une mosaïque présentant un ou plusieurs articles en lien avec l’article courant.

Exemple d’articles liés

Cette fonctionnalité est fournie par l’extension YARPP (Yet Another Related Posts Plugin). Si d’autres extensions similaires existent, je trouve que YARPP est de loin celle qui fournit les résultats les plus pertinents.

En effet, la plupart des autres extensions du même type se contentent de sélectionner les articles dans la même catégorie. Dans le cas de YARPP, il est possible de choisir d’utiliser :

  • Le titre de l’article
  • Son contenu
  • Les catégories
  • Les étiquettes

Cette extension fournit même la possibilité de choisir d’affecter à certains critères un poids plus ou moins important. Après un peu d’expérimentation, j’ai choisi de sur-pondérer les catégories, et de nécessiter au moins une étiquette en commun.

Réglages de l'extension YARPP

A noter que pendant assez longtemps, YARPP a eu assez mauvaise presse; en effet, cette extension a été accusée de ralentir les sites qui l’utilisent. Je n’ai cependant constaté aucun problème de ce type.