Étiquette : Référencement

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.

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.

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 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…

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.

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.

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é.

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.

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).

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.

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.

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 :

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.

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 :

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

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.

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 ».

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.

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 :

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.