Les images dans WordPress - Le guide ultime

Optimiser les images dans WordPress a toujours été quelque chose de fondamental. Cela l'est encore plus aujourd'hui, maintenant que les algorithmes de Google prennent en compte la performance des pages web pour référencer les sites internet.

En plus de l’impact SEO, l’expérience utilisateur (UX) est fortement liée au temps de chargement de la page internet. En effet, si celle-ci prend plus de 5 secondes à se charger, le visiteur aura l’impression (et à raison !) que le site est lent. Ainsi, il aura fortement tendance à quitter votre site et à aller voir chez vos concurrents.

Pour répondre à ce problème, est-ce que je vous conseille donc d’utiliser le moins d’images possibles ? Bien évidemment que non ! Toujours en matière d’expérience utilisateur, les images sont une nécessité, car comme l’on dit : « une image vaut mille mots ». Et puis, dans un internet toujours plus rapide et aux contenus toujours plus fournis et aguichants, les visiteurs ne prennent plus forcément le temps de lire l’intégralité d’un « simple » texte, surtout si celui-ci n’est pas assez aéré.

Comme vous pouvez vous en douter, WordPress étant le CMS le plus utilisé en 2018, il existe bien évidemment différentes méthodes et solutions permettant d’optimiser aux maximums les images de son site.

En suivant ce guide, vous allez apprendre à compresser les images pour le web, à utiliser les bons formats d’images, à analyser les performances de votre site, à créer des tailles d’images automatisées et personnalisées pour WordPress, à ordonner vos fichiers médias, ainsi qu’à suivre les bonnes pratiques en matière de SEO. Un joli programme non ?

 

Toutes les solutions proposées sont entièrement gratuites.

 

 

1. Comment optimiser le poids des images sur WordPress ?
2. Les bonnes pratiques SEO
3. Utiliser les bonnes tailles d’images
4. Les custom image sizes (tailles d’image personnalisées)
5. Comment ordonner ses médias WordPress ?

 

 

 

 

 

 

Comment optimiser le poids des images sur Wordpress ?

Comme mentionné en introduction, utiliser des images trop volumineuses sur votre site WordPress ralentira le chargement de vos pages, ce qui amènera des répercussions négatives non-seulement sur l’expérience utilisateur, mais également sur le référencement de votre site.

Le poids des images est lié à plusieurs paramètres :

• Le format d’image (les formats ne compressent pas tous de la même manière)
• Le niveau de compression d’image
• La taille, une image très grande aura tendance à être plus lourde. Ce point sera traité dans le chapitre Utiliser les bonnes tailles d’images.

 

Choisir le bon Format

Les trois formats d’images les plus utilisés sur le web sont :

• JPG – Format compressé, donc moins lourd. Le JPG est LE format préconisé pour le web.
• PNG – Moins léger que le JPG, ce format a l’avantage de gérer la transparence. Il est souvent utilisé pour les logos.
• GIF – Permet de gérer des animations (image par image). Pour une image statique, on privilégiera le JPG ou le PNG.

 

Pour résumer, la règle d’or consiste à tout le temps utiliser le JPG, sauf dans les deux cas suivants :

• Votre image doit gérer la transparence -> Dirigez-vous vers du PNG.
• Votre image doit être animée -> Dirigez-vous vers du GIF.
  
  

Sur WordPress, il existe un plugin permettant de transformer automatiquement les PNG en JPG, dès l’upload du fichier. Celui-ci peut se révéler très pratique si vous avez plusieurs personnes qui font office d’éditeurs sur votre site.

 

 

Et le SVG ? Il n’a pas été cité pour deux raisons :

• Ce n’est pas vraiment un format d’image, mais plutôt un format de données
• Le SVG n’est pas géré volontairement par WordPress (en tout cas pas par la version 4.9), car il pourrait être un vecteur d’attaque.
  
  

Bien que le format SVG ne soit pas géré par WordPress et que je ne l’évoquerai pas plus dans le reste de ce guide, je vais tout de même vous en toucher ici quelques mots.

Le SVG est utilisé pour des graphiques et images vectorielles. Son principal avantage demeure dans le fait qu’il est vectoriel. Cela signifie que même dézoomé, l’illustration qu’il représente n’est pas pixellisée et conserve parfaitement sa netteté. Sur internet, le SVG est couramment employé pour des pictogrammes.

 

Compresser les images

Maintenant que vous connaissez les bonnes pratiques au niveau des formats d’images, passons à la compression. Il existe plusieurs méthodes et outils permettant de compresser une image sans perdre (trop) de qualité.

Si vous utilisez le logiciel Adobe Photoshop, vous pouvez par exemple faire un « Enregistrer pour le web », puis en choisissant le format JPG vous pourrez jongler avec un pourcentage indiquant la qualité de l’image finale. J’aime partir du principe qu’une image de base ne doit pas dépasser les 100ko (sauf exception, par exemple une image prenant toute la largeur de la page).

Si vous n’avez pas l’habitude d’utiliser Photoshop, vous pouvez utiliser l’outil online gratuit TinyJPG. En plus d’être redoutablement efficace, il reste très simple à utiliser. En effet, il vous suffit de glisser vos images et d’attendre qu’il les compresse avant de les télécharger. Le seul point négatif de TinyJPG face à un logiciel comme Photoshop, vient du fait que vous ne pouvez pas régler l’intensité de la compression.

 

 

 

Bien que vous soyez devenu expert en compression d’images grâce aux informations ci-dessus, un oubli peut arriver même aux meilleurs ! Pour résoudre ce problème, il existe des plugins, comme WP Image Size Limit, vous permettant d’interdire l’upload des fichiers trop volumineux sur votre site WordPress. De cette manière, vous êtes assuré que personne ne remplira votre site web avec des images trop grosses.

 

 

Tester les performances de sa page internet

 

Maintenant que vous connaissez différentes techniques et bonnes pratiques en matière d’optimisation du poids des images, il ne vous reste plus qu’à mesurer les performances de vos pages WordPress. Il existe plusieurs outils online permettant de le faire. Bien qu’ils utilisent tous une pondération différente et qu’ils ne se basent pas sur les mêmes critères, il reste tout de même fort pratique de s’en servir pour avoir une idée générale de l’état de la rapidité de vos pages.

L’outil le plus connu, et d’après moi le plus fiable, reste PageSpeed Insights. Pourquoi le plus fiable ? Puisque l’outil appartient à Google, j’aime penser qu’il se base sur les mêmes critères de performances que leurs algorithmes de référencement !

Comment utiliser PageSpeed Insights ? Rien de plus simple, il vous suffit d’entrer l’url de la page dont vous voulez connaître les performances et d’appuyer sur « Analyser ». Après quelques secondes, vous pourrez parcourir le détail de l’audit, autant pour les performances mobile que pour ordinateur.

 

 

 

 

Les bonnes pratiques SEO

Servir des images légères fait bien évidemment partie des bonnes pratiques SEO. Mais elles ne se limitent pas aux performances !

 

Les noms des fichiers

Le nom du fichier image peut être important. Effectivement, si celui-ci n’est pas explicite, votre image n’a que très peu de chance d’être référencée sur Google Images. Pour les fichiers images, les règles de nommage sont les suivantes :

• Nom explicite
• Remplacer les espaces par des « -»
• Éviter les accents et les caractères spéciaux
  
  

Quand vous aurez uploadé votre photo sur WordPress, vous ne pourrez plus modifier son nom facilement. Il est donc recommandé de les nommer correctement avant leur téléversement.

 

Les attributs title et alt

Principalement utilisés pour améliorer l’accessibilité (pour les malvoyants par exemple), ces deux attributs peuvent tout de même être employés par les moteurs de recherche pour le référencement. Alors n’oubliez pas de les remplir correctement.

Contrairement au nom du fichier, vous pouvez utiliser les accents et les espaces à votre guise. Les bonnes pratiques consistent à remplir l’attribut title avec un titre explicite, et l’attribut alt avec une description de ce que contient votre image. De ce fait, le title est souvent moins long que l’attribut alt, Mais n’écrivez tout de même pas un roman dans ce pauvre alt ! Limitez-vous à 25-35 caractères.

Pour vérifier que vos images aient bien leurs attributs spécifiés correctement, il vous suffit de vous rendre dans l’onglet dédié aux médias de WordPress et de les passer toutes en revue. La manipulation est simple, vous cliquez sur la première image, vous vérifiez que tout est bon avant de passer à la suivante en utilisant la flèche en haut à droite.

 

 

 

Utiliser les bonnes tailles d'images

Lors du téléversement d’une image sur WordPress, celle-ci sera déclinée automatiquement en plusieurs tailles différentes.

L’utilité ? Imaginez que vous avez uploadé une image pour un article. Celle-ci peut être autant utilisée pour la miniature de l’article que pour son image principale. Si le système ne permettait pas d’avoir différentes tailles d’images, pour la miniature, WordPress afficherait l’image dans sa taille réelle, ce qui risquerait fortement de l’alourdir en volume et donc de ralentir la vitesse de chargement de la page.

Comme nous l’avons vu précédemment, avoir une page trop lente est néfaste non-seulement pour votre référencement mais aussi pour l’UX. En conclusion, heureusement que le CMS WordPress nous permet de gérer plusieurs tailles d’images.

 

Les tailles d'images par défaut de WordPress

De base, WordPress propose 4 tailles d’images différentes, à savoir :

• Thumbnail – 150px de large et 150px de hauteur, un format carré, il s’agit d’un hardcrop
• Medium – 300px maximum de large et 300px maximum de hauteur
• Large – 1024px maximum de large et 1024px maximum de hauteur
• Full – garde la taille originale de l’image

Si vous le désirez, vous pouvez changer les valeurs de ces tailles d’images. Pour cela, dans le panneau d’administration WordPress rendez-vous dans « Réglages », puis choisissez « Médias ».  Si vous voulez que vos images déjà présentes dans votre bibliothèque des médias WordPress prennent les nouvelles valeurs de vos tailles, il va falloir les régénérer. Pour cela, il existe un plugin fort utile, à savoir Regenerate Thumbnails. Une fois installé, il ne vous reste plus qu’à lancer l’opération de régénération des images et attendre quelques minutes.

 

 

Modifier les tailles d’images par défaut peut être utile dans certains cas spécifiques. Toutefois, dans la majorité des cas vous aurez meilleurs temps de les laisser telles quelles, et de créer des tailles d’images supplémentaires. Le chapitre « Les custom image sizes (tailles d’image personnalisées) » vous indiquera comment procéder.

Voyons maintenant comment afficher une image avec une taille spécifique. Dans votre template, il vous suffit d’utiliser la fonction wp_get_attachement_image en passant comme second argument le nom de la taille d’image. Dans l’exemple ci-dessous, nous affichons notre image en format « thumbnail ».

echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );

Une dernière petite chose avant de parler des images responsives. Connaissez-vous le plugin WordPress Imsanity ? Il permet d’interdire l’upload de photos ayant des tailles trop grandes. Vous pouvez par exemple définir une largeur et une hauteur max différentes pour une image téléversée dans un article ou une image uploadée directement dans les médias. Pratique non ?

 

Les images responsives

Conscients que les sites sont consultés sur une myriade de tailles d’écrans différentes, les navigateur ont mis en place, il y a quelques années, le concept d’images responsives. L’idée est d’étoffer le traditionnel tag “<img>” d’informations supplémentaires permettant d’afficher une image différente en fonction de la taille d’écran. Poursuivons avec un exemple :

<img src="mon-image.jpg"
     srcset="mon-image-180.jpg 180w,
             mon-image-640.jpg 640w"
      sizes="50vw"
      alt="">

Notre tag “<img>” indique à l'aide de l’attribut srcset en plus de l’image contenue dans l’attribut “src” deux images supplémentaires : une image de 320px de large et une de 640px.
L’attribut “sizes” indique également que notre tag “<img>” devra prendre la moitié de la largeur totale du viewport. Avec ces informations, le navigateur sera en mesure de charger l’image idéale. Par exemple, si nous visitons ce site avec un écran de 360 pixels de large, le navigateur chargera l’image “mon-image-180.jpg”.

Comme évoqué précédemment, WordPress crée à la volée plusieurs tailles d’images quand on en téléverse. Ces différentes variations sont ensuite utilisées automatiquement par WordPress depuis la version 4.4 dans les tag “<img>” lorsque ceux-ci sont générés par les fonctions WordPress comme “the_post_thumbnail()”.

 

 

 

Les custom image sizes (tailles d'image personnalisées)

 

Comment créer une custom size ?

Pour créer une nouvelle taille d’image personnalisée, il vous suffit d’utiliser la fonction WP add_image_size. Apprenons par l’exemple avec un cas concret : nous voulons ajouter une taille appelée « taille_slide », cette taille doit avoir 300px max de largeur, mais ne doit pas être limitée dans sa hauteur.  Pour arriver à ce résultat, dans le fichier functions.php du thème actif, il suffit d’ajouter les lignes suivantes :

add_action( 'after_setup_theme', 'ajout_nouvelle_taille' );
function ajout_nouvelle_taille() {
    add_image_size( 'taille_slide', 300 );
}

Si nous voulons que notre taille soit de max 400px de largeur et 200px max de hauteur, il nous suffit de modifier le add_image_size() de cette manière :

add_image_size( 'taille_slide', 400, 200 );

Encore une chose, vous avez la possibilité d’utiliser un hardcrop. Celui-ci peut être pratique si vous désirez absolument avoir une image qui fait, par exemple, exactement 200px sur 200px. Pour spécifier que votre taille doit utiliser le hardcrop, il vous suffit de passer en 4ème argument « true ».

add_image_size( 'taille_slide', 200, 200, true );

Dans l’exemple ci-dessus, si nous uploadons une image qui fait 200px sur 400px, l’image va être coupée dans sa hauteur, afin d’obtenir une image qui fait 200px sur 200px.
De base, la découpe se fait de façon à ce que le centre de la photo reste intacte. Toutefois, vous pouvez-définir vous-même où le crop opérera. Pour cela, vous devez passer en 4ème argument un tableau avec un argument pour l’axe des X (largeur) et un autre pour l’axe des Y (hauteur).

add_image_size( 'taille_slide', 200, 200, array( 'left', 'top' ) );

Dans l’exemple ci-dessus, nous forçons WordPress à couper l’image par la gauche et par le haut, jusqu’à ce qu’elle fasse 200px sur 200px.

 

Comment afficher une image avec une taille personnalisée ?

De la même manière qu’une image avec une taille par défaut. Il suffit de changer l’argument définissant le nom de la taille. Par exemple, si nous voulons utiliser notre taille custom appelée « taille_slide », nous pourrions l’afficher dans notre template de la manière suivante :

echo wp_get_attachment_image( $attachment->ID, 'taille_slide' );

 

Comment afficher une image avec une taille personnalisée en utilisant ACF ?

Comme précédemment indiqué, en utilisant la fonction wp_get_attachment_image mais en n'oubliant pas de configurer le champ ACF de type image en choisissant « ID de l’image » comme paramètre de « Format dans le modèle ».

$image = get_field('image');
$size = 'taille_slide'; 
if($image){
    echo wp_get_attachment_image($image, $size);
}

Si vous désirez afficher l’image en background tout en conservant cette notion de taille d’image, vous allez devoir changer le paramètre « Format dans le modèle » du champ ACF, en optant pour « Données de l’image » (récupération du tableau de toutes les données de l’image). Ensuite, il ne faudra non pas récupérer l’URL avec $image['url'], mais utiliser l’entrée ['sizes'] tout en spécifiant la taille désirée.

$image = get_field('image');
$size = 'taille_slide'; 
$url = $image['sizes'][$size];
echo "<div style='background-image:url(".$url.");'>";
      ...
echo "</div>";

 

Régénérer les thumbnails

Si vous aviez déjà uploadé des images sur votre WordPress avant de modifier les tailles d’images, il vous faudra les régénérer. Pour cela, je ne peux que vous conseiller d’utiliser le plugin Regenerate Thumbnails. Après l’avoir installé et activé, cliquez sur « Outils » puis « Renegerate Thumbnails ». Il vous suffira alors de cliquer sur « Régénérer les miniatures pour toutes les X pièces jointes. » et le tour est joué !

 

 

 

Comment ordonner ses médias dans WordPress ?

Au fil des mois, et suivant la nature du site internet, il en vient à uploader plusieurs centaines d’images. Ce qui peut transformer la recherche d’une simple image dans la bibliothèque des médias en un véritable calvair. Mettre en place un système de rangement des médias peut être une des solutions à ce désagrément.

Comme souvent avec WordPress, il existe un plugin qui fait très bien le job. Après avoir installé et activé le plugin Enhanced Media Library, vous pourrez ajouter des catégories de médias afin de les classer à votre guise.

 

 

Pour créer une nouvelle catégorie de média, depuis le panneau d’administration WordPress, vous devez cliquer sur « Médias », puis « Catégories médias ». Ensuite, il vous suffira de choisir un nom, un slug et d’appuyer sur « Ajouter une nouvelle catégorie ».

Maintenant que vous avez créé vos catégories, dirigez-vous dans le gestionnaire de médias (« Bibliothèque »). Dans la liste des filtres du haut, vous verrez « Filtrer par Catégorie média », c’est via cette liste déroulante que vous allez pouvoir afficher les médias d’une catégorie spécifique. Pour ajouter un média à une catégorie, il vous suffit de cliquer sur l’image dont vous voulez classer, puis à gauche, dans « Catégories média », cliquer sur les catégories que vous voulez.

Tout simple non ? Et fort efficace !

 

 

 

 

Les sources

• Compresser ses images : TinyJPG
• Analyser les performances de son site : PageSpeed Insights
• Plugin WP pour regénérer les thumbnails : Regenerate Thumbnails
• Plugin WP pour convertir les PNG en JPG : PNG to JPG
• Plugin WP pour interdire l’upload de fichiers trop volumineux : WP image size limit
• Plugin WP pour interdire l’upload d’images ayant une taille trop grande : Imsanity
• Plugin WP pour ordonner les médias : Enhanced Media Library

Catégories :

Tech web

Tags :

Wordpress

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !