Ce tutoriel, destiné aux utilisateurs WordPress débutants, vous explique comment ajouter, recadrer et redimensionner des images de la médiathèque WordPress. À cette fin, je propose 2 méthodes de recadrage et redimensionnement de ces médias pour optimiser les images dans les pages web.
La médiathèque WordPress, c’est quoi ?
Définition de la Médiathèque WordPress
La Médiathèque WordPress est une fonctionnalité intégrée essentielle pour tout site web développé avec WordPress. Autrement dit, c’est une bibliothèque virtuelle dans laquelle on stocke et organise tous les fichiers multimédias, tels que les images, les vidéos et les fichiers audio, pour les utiliser dans vos articles, pages et autres contenus du site. En suivant les étapes ci-dessous et en utilisant les fonctionnalités de la Médiathèque WordPress de manière efficace, on peut gérer les fichiers multimédias et optimiser leur utilisation pour un site web WordPress, tout en améliorant son référencement sur les moteurs de recherche.
Fonctionnalités de la Médiathèque WordPress
- Téléchargement facile des fichiers multimédias depuis un ordinateur vers la médiathèque.
- Organisation simple des fichiers avec des dossiers et des balises pour une recherche facilitée.
- Possibilité d’éditer les métadonnées des fichiers, comme le titre, la description et les balises ALT.
- Intégration aisée des médias dans les articles et pages à l’aide de l’éditeur visuel.
Types de fichiers acceptés
La Médiathèque WordPress accepte une variété de formats de fichiers, notamment :
Images
- gif
- heic (format d’image par défaut pour l’iPhone Apple)
- jpeg, jpg
- png
- svg (avec une extension de prise en charge et donc uniquement disponible dans les plans compatibles avec les extensions)
- webp (fournis automatiquement dans les navigateurs pris en charge)
Vidéos
- avi
- mpg
- mp4, m4v (MPEG-4)
- mov (QuickTime)
- ogv (Ogg)
- vtt (chargement en insérant un bloc vidéo uniquement)
- wmv (Windows Media Video)
- 3gp (3GPP)
- 3g2 (3GPP2)
Fichiers audio
- mp3
- m4a (peut ne pas fonctionner dans tous les navigateurs)
- ogg
- wav
Documents
- doc, docx (document Microsoft Word)
- key (présentation Apple Keynote)
- odt (document texte OpenDocument)
- pdf (Portable Document Format ; Adobe Acrobat)
- ppt, pptx, pps, ppsx (présentation Microsoft PowerPoint)
- xls, xlsx (document Microsoft Excel)
Stockage des médias
Le répertoire des médias WordPress se trouve dans le dossier wp-content/uploads à l’intérieur de l’installation WordPress sur le serveur web. D’ailleurs, c’est à cet endroit que tous les fichiers multimédias téléchargés sont stockés et organisés par année et mois de téléchargement.
Importance de la diminution de la taille des images
Réduire la taille des images est primordial pour améliorer les performances d’un site WordPress. Ainsi cela permet de réduire les temps de chargement des pages, ce qui améliore l’expérience utilisateur et favorise un meilleur référencement sur les moteurs de recherche.
Extensions utiles pour la Médiathèque WordPress et les images
- Folders : cette extension permet de créer des dossiers pour organiser tous les médias (images, fichiers audio, vidéos, documents), les pages et articles.
- WP Smush : Compresse automatiquement les images pour réduire leur taille sans compromettre la qualité.
- Regenerate Thumbnails : Régénère les miniatures d’images pour les nouveaux formats ou tailles d’image ajoutés.
- EWWW Image Optimizer : Optimise automatiquement les images téléchargées pour une meilleure performance.
- TinyPNG : Compresse les images PNG et JPEG pour une taille optimale.
- Lazy Load by WP Rocket : Charge les images de manière différée pour accélérer le chargement des pages.
- Image Watermark : Ajoute un filigrane aux images pour protéger votre contenu.
- WP Retina 2x : Génère des images haute résolution pour les écrans Retina sans affecter les performances.
- Imsanity : Redimensionne automatiquement les images téléchargées pour éviter les images trop grandes.
- WP Media Category Management : Permet d’attribuer des catégories aux médias pour une organisation plus poussée.
- SEO Friendly Images : Optimise automatiquement les balises ALT et les titres des images pour le référencement.
Référencement SEO des images dans la Médiathèque WordPress
Pour optimiser le référencement des images :
- Utiliser des noms de fichiers descriptifs et pertinents pour les images.
- Remplir les champs de texte alternatif (balises ALT) avec des descriptions concises et des mots-clés pertinents.
- Inclure des mots-clés dans les titres et les légendes des images lorsque cela est approprié.
- Optimiser la taille et le poids des fichiers images.
Autorisation d’accès
Il est primordial de vérifier les autorisations d’accès aux fichiers dans la Médiathèque WordPress pour garantir la sécurité du site et éviter tout accès non autorisé aux fichiers multimédias. Par exemple, le rôle de contributeur ne permet pas l’accès au médias (sauf si je lui accorde avec l’extension Members). Utiliser des plugins de sécurité WordPress pour renforcer les mesures de sécurité si nécessaire.
Comment optimiser les images pour WordPress ?
La préparation des sources images
Il est conseillé de commencer par créer un dossier local “sources” sur le PC ou le Mac pour collecter les images brutes. Effectivement, ce dossier est destiné à contenir toutes les prises de vue photographiques, téléchargements d’images et captures d’écran. Ensuite renommer correctement les images au fur et à mesure avec des mots-clés pertinents pour le SEO : ne pas utiliser d’espaces, ni d’accents, ni de caractères spéciaux. En revanche, l’utiliser de tirets du haut ou tirets du bas pour bien séparer les mots est fortement conseillée.
Photos prises avec un téléphone portable ou un appareil photo
- Prendre les photos au format portrait ou paysage en fonction du recadrage final prévu
- Les télécharger sur l’ordinateur dans le dossier sources
- Renommer correctement chaque fichier
Visuel d’une page web
- Accéder à la fiche du Produit du site
- Faire un clic droit sur l’image et «Ouvrir l’image dans un nouvel onglet» afin d’obtenir la version Grande image du visuel
- Faire un clic droit sur l’image du nouvel onglet et «Enregistrer l’image sous» directement dans le dossier sources
- En profiter pour renommer le fichier
Capture écran avec un PC
- Accéder à la fiche du produit du site
- Optionnel : Faire un clic droit sur l’image et «Ouvrir l’image dans un nouvel onglet»
- Appuyer simultanément puis lâcher les 3 touches : Windows + Shift + S
- Avec l’outil Capture en surbrillance, cadrer largement autour du visuel à capturer
- Cliquer sur l’encart qui s’affiche en bas à droite pour ouvrir l’Outil Capture d’écran ou icône Windows en bas à gauche > Rechercher : outil Capture d’écran
- La dernière image capturée est affichée dans l’outil Capture d’écran
- En haut à droite, cliquer sur l’icône «Disquette» pour “Enregistrer en tant que” l’image dans le dossier sources
- Dans la fenêtre d’enregistrement, choisir le type de format “jpg”
- En profiter pour renommer le fichier
Banque d’images
- Rendez-vous sur Blue vertigo
- Choisir une banque d’images FREE STOCK PHOTOS du type Pexels, Pixabay ou autre
- “Recherchez des photos gratuites” à partir de la barre de recherche en tenant compte des suggestions
- Cliquer sur le visuel intéressant et le télécharger gratuitement
- Déplacer le fichier qui se trouve dans Téléchargements vers le dossier sources et le renommer
Recadrer et redimensionner les images avant l’ajout à la médiathèque WordPress
Avec le logiciel Adobe photoshop, le traitement par lot de fichiers permet le recadrage et le redimensionnement des images grâce aux scripts. Mais parmi les nombreux outils en ligne gratuits permettant de recadrer et redimensionner les images brutes, l’outil Resize image est simple d’utilisation, intuitif et rapide pour effectuer ces opérations. Chaque image du dossier sources sera traitée une à une avec l’outil Resize image jusqu’à l’enregistrement en jpg optimisé.
- Créer un dossier local “medias” sur le PC ou votre Mac pour enregistrer les images finalisées
- Accéder à l’outil Resize image
1 : le téléchargement
- Télécharger l’image à modifier
2 : le ratio et le recadrage
- Cocher “Fixed aspect ratio“, préciser les dimensions 350 x 750 par exemple (cette unité est en pixels, ce ratio est le format final que je souhaite), Cliquer sur “Change“
- Ensuite : Créer une zone de sélection dans l’image autour du sujet à recadrer (possibilité de modifier la position et la taille de la sélection en tirant sur les poignées du cadre)
- En dernier : Cliquer sur “Crop” pour recadrer
- À cette étape, les dimensons W (weight) et H (heigh) précisées dans “Sélection Area” doivent être supérieures aux dimensions finales souhaitées (350 x 750) pour assurer d’obtenir un visuel de qualité à l’arrivée. Néanmoins ces dimensions respectent bien le “Fixed aspect ratio“, à vérifier également dans la nouvelle image qui s’affiche en dessous.
3 : la rotation de l’image
À utiliser pour passer du mode portrait à paysage si besoin
4 : le redimensionnement de l’image
- Insérer les dimensions finales, 350 x 750 par exemple. L’unité est le pixel et laisser cocher “Keep aspect ratio” pour conserver les proportions
5 : le remplissage (optionnel) de l’arrière-plan
6 : le format d’enregistrement
- Choisir “jpg“
7 : l’optimisation et la compression
- Cliquer sur le bouton “Progressive compression” et Image quality : 70%
- Si la qualité parait insuffisante, définir la qualité de l’image à 90%
- Cliquer sur “Resize image“
- Un bloc apparait avec les dimensions de l’ancien et du nouveau fichier : cliquer sur “Download image“
- Vérifier et déplacer le fichier qui se trouve dans Téléchargements vers le dossier medias, le renommer
Ajouter un fichier media à la médiathèque WordPress
- Se connecter à https://monsite.fr/wp-admin/
- Tableau de bord : Colonne gauche > Médias
- Cliquer sur “Ajouter un fichier média” puis “Sélectionner des fichiers“
- Possibilité de faire une multi-sélection avec Shift… puis Ouvrir
- Le “Drag and drop” des images du répertoire local “medias” vers l’encart “Déposer vos fichiers pour les téléverser” est également possible
- Les images sont maintenant dans la Médiathèque WordPress
Recadrer et redimensionner les images avec la médiathèque WordPress
- Ajouter les fichiers du dossier sources en respectant le point précédent “Ajouter un fichier media à la médiathèque WordPress“
- Cliquer sur un visuel de la médiathèque : une fenêtre s’ouvre «Détails du fichier joint» : sous l’image, cliquer sur «Modifier l’image»
- Une nouvelle fenêtre «Détails du fichier joint» s’ouvre : cliquer sur le premier bouton clair en haut à gauche «Recadrer»
- Proportion de taille : 350 et 750 par exemple (l’unité est en pixels)
- Cliquer sur le bouton bleu en dessous «Appliquer le recadrage»
- «Enregistrer les modifications»
Actuellement l’image a les bonnes proportions mais pas les bonnes dimensions
- Cliquer à nouveau sur «Modifier l’image» sous l’image
- Cliquer sur le deuxième bouton clair en haut «Appliquer»
- Insérer les nouvelles dimensions : 350 et 750 par exemple (l’unité est en pixels)
- Cliquer sur le bouton bleu «Appliquer» à droite
- «Image enregistrée» s’affiche en haut à gauche
- Vérifier les nouvelles dimensions !