On va voir dans cet article tout ce qui est en rapport avec les images sur WordPress, les différentes tailles disponibles par défaut, les formats les plus adaptés et les solutions disponibles pour compresser les images et accélérer la vitesse de chargement de votre site.
Nous verrons aussi comment déterminer le meilleur ratio (horizontal, vertical, 16/9, pour une image selon l’emplacement où vous souhaiter l’afficher. Ce critère, souvent mal compris, peut vite devenir un casse-tête.
De nos jours, les images sont un pan important dans la confection d’un site internet et si WordPress facilite grandement leur intégration il est tout de même essentiel de comprendre comment il fonctionne pour gérer les images.
Une fois que vous maîtriserez la manière dont les images sont gérées sur WordPress il vous sera facile de déterminer quelle taille d’image est la plus adaptée pour tel ou tel endroit de votre site.
Les différentes tailles (dimensions) par défaut des images dans WordPress
Lorsque vous téléchargez une image, WordPress va automatiquement créer 3 tailles différentes de cette dernière qui viendront s’additionner à la taille originale ce qui nous fait donc 4 tailles en tout que vous pouvez retrouver dans le tableau de bord de WordPress à la section Réglage – > Media.
- Réelle (originale).
- Miniature (vignette) : 150 x150.
- Taille moyenne : 300×300.
- Grande taille : 1024 x 1024.
Comme vous pouvez le voir sur l’image, il est possible de changer les tailles par défaut, mais je ne vous le conseille pas. Nous verrons un peu plus loin comment rajouter facilement des tailles personnalisées.
WordPress liste toutes les tailles disponibles de chaque image pour les indiquer aux navigateurs (Firefox, Chrome…) ces derniers pourront ensuite déterminer la taille la mieux adaptée à la résolution (taille) d’écran de vos lecteurs (pc, tablette, smartphone).
Il va de soi qu’il n’y a aucun intérêt à afficher une image de 1024px sur un écran de 768 px d’autant plus que réduire la taille d’une l’image permet de la charger plus rapidement et de réduire d’autant le temps d’affichage.
Le but de créer ces différentes tailles pour chacune de ses images et de permettre à WordPress de déterminer et d’afficher la taille d’image la mieux adaptée à l’appareil de vos visiteurs (pc, tablette, smartphone…).
En plus des 4 tailles ci-dessus, WordPress crée automatiquement d’autres tailles d’images qui n’apparaissent pas dans la section réglage médias. Elles ont pour but, là encore, de s’assurer que toutes les résolutions d’écran pourront afficher une taille d’image la plus adaptée possible.
- Médium Large : 768px ;
- 2x Medium Large : 1536px ;
- 2x Large : 2048px ;
- Scaled: 2560px.
Enfin, les thèmes eux-mêmes peuvent avoir leur propre taille d’images prédéfinie qui annulera les réglages par défaut de WordPress. Pour plus d’informations, vous devez vous référer à la documentation du thème en question.
Comment rajouter des tailles d’images par défaut dans WordPress ?
Bien que WordPress offre déjà un bon choix de tailles d’images personnalisées, il est possible d’en rajouter d’autres.
Pour ce faire, nous allons rajouter un peu de code dans le fichier functions.php. Avant de commencer, il est préférable de faire une sauvegarde complète de votre site.
Si vous ne savez pas comment faire, vous pouvez consulter le tutoriel suivant : Comment sauvegarder un site WordPress avec UpdraftPlus ?
Pour ouvrir le fichier functions.php allez sur le tableau de bord de WordPress cliquez sur Apparence -> Editeur de thème –> fonctions de thème (functions.php).
Recherchez la ligne :
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 788, 0, true );
}
Et rajoutez la ligne suivante :
Ce qui donne au final :
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 788, 0, true );
add_image_size( ‘image-produit’, 800, 640, true );
}
Cliquez sur le bouton mettre à jour le fichier pour sauvegarder les changements.
Dans cet exemple :
- image – produit : indique le nom donné à cette taille d’image pour la retrouver facilement, vous pouvez mettre n’importe quel nom à l’exception de ceux déjà existants.
- 800 : est la largeur de l’image.
- 640 : est la hauteur de l’image.
Vous pouvez bien sûr rajouter d’autres tailles à la suite, par exemple :
Pour vérifier que la nouvelle taille d’image est bien prise en compte, j’ai lancé le constructeur de pages Elementor et j’ai placé une image dans un article.
Comme vous pouvez le voir, la nouvelle taille d’image est bien prise en compte.
Comment changer manuellement la taille d’une image dans WordPress ?
Rajouter des tailles d’images par défaut dans WordPress peut s’avérer très pratique à condition de ne pas en abuser, car chaque taille d’image différente WordPress crée et stocke une duplication de l’image originale sur votre espace de stockage qui n’est pas illimité. De plus, chaque image comprend des informations qui vont être stockées dans votre base de données et la faire grossir inutilement ce qui peut impacter les performances de votre site.
C’est pourquoi si vous souhaitez modifier une image dans une taille que vous n’utiliserez pas régulièrement il est préférable de le faire manuellement.
Pour ce faire allez sur le tableau de bord de WordPress, cliquez sur Media – > Médiathèque – > sélectionnez l’image que vous souhaitez modifier – > cliquez sur modifier l’image.
Il vous suffit ensuite de changer les dimensions dans les cases et de cliquer sur Redimensionner. Vous pouvez effacer toutes les modifications à tout moment en cliquant sur Restaurer l’image originale.
A noter que la taille des images peut seulement être réduite, vous ne pouvez pas l’augmenter.
Si vous souhaitez agrandir l’image, il vous faudra utiliser un logiciel tiers comme Paint par exemple qui est fourni avec Windows.
Comment changer le ratio (recadrage) d’une image dans WordPress ?
Le ratio d’une image (aspect ratio en anglais) ou recadrage est le rapport entre la largeur et la hauteur d’une image.
Voici quelques exemples de ratios d’images avec des dimensions très utilisées sur WordPress :
1:1 = 150×150, 300×300, 1024×1024…
4:3 = 512×384, 1024×768, 2048 x1536…
16:9 = 640×360, 1280×720
Il est parfois nécessaire de recadrer une image pour quelle s’adapte parfaitement à un endroit spécifique.
- Image mise en avant.
- Réseaux sociaux (voir plus bas).
- Grille d’articles.
- Etc.
Pour changer le ratio d’une image, allez sur le tableau de bord de WordPress, cliquez sur Media –> Médiathèque – > et sélectionnez l’image que vous souhaitez modifier.
Cliquez sur Recadrer en haut à droite et commencez à changer les valeurs dans Recadrage de l’image – > Proportion de taille. Dans sélection vous pouvez jouer sur les dimensions.
Une fois terminé cliquez à nouveau sur Recadrer puis sur Enregistrer.
Pour annuler toutes les modifications, cliquez sur Restaurer l’image originale –> Rétablir l’image.
Les tailles d’images les mieux adaptées aux réseaux sociaux
Comme vous le savez, lorsque vous partagez un article de votre site WordPress sur les réseaux sociaux, ce dernier s’accompagne d’une image d’illustration. Pour info, le terme technique employé est : image d’illustration de lien partagé.
Le choix des images est un paramètre important à prendre en compte, car elles permettent d’apporter un visuel et d’attirer l’intérêt des lecteurs.
La difficulté réside dans le choix de la taille des images, car elles diffèrent d’un réseau à l’autre et peuvent vite devenir un casse-tête. Partagez la même image sur tous les réseaux sociaux sans se préoccuper des différentes dimensions affichera des images mal cadrées et aura un impact négatif sur vos publications alors qu’une image à la bonne échelle apportera un côté soigné et professionnel.
Quelle est la taille d’image optimale pour partager un article sur Facebook ?
Lorsque vous postez un article sur votre fil d’actualité sur Facebook la taille idéale est 1200 x 628 px pour un lien avec une image et 1200 x 630 pour une image seule.
Quelle est la taille d’image optimale pour partager un article sur Twitter ?
La taille optimale de l’image d’un article sur Twitter est 520 x 254 px pour un lien avec image et 1024 x 512 px pour une image seule.
Quelle est la taille d’image optimale pour partager un article sur Instagram ?
3 dimensions différentes sont conseillées pour Instagram.
- Les images carrées : 1080 x 1080 px.
- Les images horizontales (paysage) 1080 x 566 px.
- Les verticales (portrait) 1080 x 1350 px.
Quelle est la taille d’image optimale pour partager un article sur Pinterest ?
Alors que la majorité des réseaux sociaux privilégie les images horizontales, Pinterest donne la priorité aux images verticales pour ces images Pinterest pin et recommande un ratio 2:3
- Image pin (Pinterest pin) 800 x 1200 px ou 600 x 900 px.
- Photo de tableau Pinterest 222 x 150 px.
- Petite vignette : 55 x 55 px.
- Large vignette : 220 x 150 px.
Quelle est la taille d’image optimale pour partager un article sur LinkedIn ?
- Lien avec image (linked image) 520 x 272 px.
- Image seule 520 x 320 px.
Quels sont les formats d’image les mieux adaptés au site internet ?
Il existe 4 principaux formats d’image utilisés sur les sites internet : JPEG, PNG, GIF et WebP.
Avant de voir ses formats en détails, faisons une parenthèse pour parler de la compression des images.
La compression d’une image a pour but de réduire son poids sans altérer sa qualité. Le poids d’une image peut influencer fortement le chargement d’une page et impacter grandement l’expérience utilisateur et le référencement de votre site.
Plus une page met du temps à charger, plus les chances de voir vos visiteurs la quitter augmentent, au-delà de 3 secondes vous pouvez perdre jusqu’à 40% de vos lecteurs potentiels !
L’impact sur le référencement est aussi très important, la vitesse de chargement est un facteur pris en compte par Google dans son classement. Plus votre page prend du temps à s’afficher moins vous aurez de chance d’obtenir une bonne place dans le moteur de recherche.
JPEG
Le format JPEG est le plus répandu de tous. Il permet d’obtenir une bonne qualité d’image avec un taux de compression très élevé. Le principal défaut de ce format est qu’il ne permet pas de créer des images transparentes.
PNG
Le format PNG est lui aussi très répandu, mais doit être utilisé avec parcimonie, car son poids est bien plus conséquent que le format JPEG. Il possède néanmoins un bon taux de compression et offre l’avantage de permettre la création d’images transparentes.
Il est particulièrement bien adapté pour créer, des bannières, des logos, des infographies ou des captures d’écran.
WebP
WebP est un format d’image relativement récent développé par Google. Il offre un taux de compression incomparable et offre la possibilité de créer des images transparentes contrairement au format JPEG.
Puisqu’aujourd’hui la quasi-totalité des navigateurs y compris Safari depuis sa version 14, prennent en charge les images WebP, je ne saurais que trop vous conseiller d’adopter au plus vite ce format.
Le principal défaut du format WebP est qu’il n’est pas supporté par défaut pas WordPress, mais pas de panique il existe de nombreux plugins pour résoudre ce problème.
Je vous conseille Imagify qui vous permet de convertir jusqu’à 20 MB d’image par mois gratuitement.
GIF
Le format GIF est celui qui possède le poids le plus lourd, car pour créer une animation il intègre plusieurs images qui vont se succéder les unes après les autres.
Bien que compressible ce format ne doit être utilisé que si c’est absolument nécessaire, car il peut ralentir considérablement le chargement d’une page.
Comment et pourquoi compresser les images sur son site WordPress ?
Vous le savez, les temps de chargement d’un site auront un impact considérable sur sa qualité. Des temps de chargement trop longs feront fuir vos lecteurs et auront un impact négatif sur le référencement de votre site.
Les images sont les éléments les plus lourds d’une page internet, si elles ne sont pas compressées ou si elles sont mal dimensionnées, elles peuvent accroître le temps d’affichage d’une page de plus de 50%. Il est donc indispensable de réduire leur poids en les compressant.
Il existe deux méthodes de compression d’images :
La compression sans perte : elle va compresser les données contenues dans l’image, son poids ne sera que légèrement réduit, mais la qualité de l’image restera la même.
La compression avec perte : elle va utiliser des techniques avancés de compression en réduisant le nombre de données intégrées dans l’image pour en réduire sont poids. Plus agressive, cette méthode va légèrement altérer la qualité de l’image, mais la différence sera rarement perceptible.
De nombreux outils existent pour compresser les images, soit directement en ligne sur un site spécialisé dans la compression d’image soit par le biais d’un plugin WordPress.
Si vous souhaitez compresser une ou des images en ligne, vous devrez le faire avant d’envoyer les images sur votre site.
A noter qu’il est aussi possible de convertir une image, par exemple de PNG en JPEG. Le format JPEG étant généralement beaucoup moins lourd, le poids de votre image sera automatiquement réduit.
Voici quelques adresses utiles pour compresser et convertir des images :
- Compresser les images PNG : https://compresspng.com/fr/
- Compresser les images JPEG : https://compressjpeg.com/fr/
- Compresser les images GIF : https://gifcompressor.com/fr/
- Convertir les images PNG en JPEG : https://png2jpg.com/fr/
- Convertir les images JEPG en PNG : https://jpg2png.com/fr/
- Convertir les images WebP en JPEG : https://webptojpeg.com/fr/
- Convertir les images JPEG en WebP : https://convertio.co/fr/jpg-webp/
- Convertir les images PNG en GIF : https://pngtogif.com/fr/
Les différents plugins WordPress pour compresser les images
Il existe différents plugins pour décompresser les images sur WordPress,
Imagify
C’est celui que je vous conseille en premier
Imagify permet de compresser gratuitement jusqu’à 20mb d’images par mois et de convertir autant d’images que vous le désirez au format WebP.
A noter que Imagify s’intègre parfaitement au plugin de cache WP Rocket et permet d’avoir une solution complète pour accélérer votre site WordPress.
Parmi les autres principaux plugins d’optimisation d’image sur WordPress vous avez :
Accélérer votre site WordPress avec le Lazy Load
La technique de Lazy Load consiste à ne charger sur un page de web que ce qui se trouve au-dessus de la ligne de flottaison et de ne charger le reste qu’au fur et à mesure que vous faites défiler la page vers le bas.
La page va s’afficher beaucoup plus puisqu’elle n’aura plus besoin de charger toutes les images ou vidéos d’un coup.
Comment implémenter le Lazy Load sur WordPress ?
Si vous possédez le plugin de cache WP Rocket allez sur le tableau de bord de WordPress puis sur Réglages –> WP Rocket -> Media et dans Lazy Load cochez les cases Activer pour les images et Activer sur les iframes et vidéos puis cliquez sur Enregistrer les modifications.
Si vous ne possédez pas WP Rocket, vous pouvez télécharger un des nombreux plugins qui va implémenter le Lazy Load sur votre site WordPress.
Tous les plugins sélectionnés ci-dessous sont gratuits.
- LazyLoad (plugin gratuit crée par WP Rocket).
- Smush qui en plus d’implémenter le LZ permet aussi de compresser les images.
- a3 Lazy Load un petit plugin qui fait bien son travail.
Voilà, cette publication est terminée, j’espère que vous avez pu en apprendre plus sur les images dans WordPress. Si vous avez des questions, n’hésitez à les poser dans les commentaires.
