La gestion des images dans WordPress

La gestion des images dans wordpress

Même si WordPress est un système simple d’emploi, certains aspects demandent tout de même que l’on se familiarise avec l’outil.
Parmi les sujets récurrents qui nécessitent quelques explications complémentaires, je retrouve souvent la gestion des médias : images, vidéos, animations etc… Je vous propose donc un tutoriel sur la gestion des images au sein de WordPress.

Généralités

WordPress n’est pas de type WYSIWYG (What You See Is What You Get), cela signifie que lorsque l’on crée un article dans l’interface d’administration, son rendu n’est pas du tout celui que l’on retrouve sur le site. C’est assez déroutant au départ car il faut s’habituer à avoir un résultat dans l’administration qui n’est pas le rendu final mais après avoir composé quelques articles on se familiarise assez rapidement aux différents mécanismes.

Outre les soucis de dispositions, celui de la taille revient souvent comme un problème récurrent.
Voici d’emblée deux conseils non négligeables :

  • Retravaillez vos images avant de les publier sur le web pour en limiter la taille et le poids.
  • Utilisez des noms de fichiers sans caractères spéciaux ni accents et utilisez le tiret pour séparer les mots.

 

La bibliothèque

Dans son menu principal, WordPress propose une partie spécifique à la gestion des images, il s’agit de l’item « Médias ». Un clic sur « Bibliothèque » nous dresse alors la liste des images (ou autres médias) déjà utilisées sur le site. Il est alors possible d’effectuer différentes opérations sur les images comme en modifier certaines propriétés, les supprimer ou simplement les afficher.

La bibliotheque pour la gestion des médias

Mon WordPress prend du poids

Lorsque l’on ajoute une image à la bibliothèque, celle-ci est envoyée sur le serveur et y occupe de la place sur le disque. Il est donc important d’utiliser des images suffisamment légères pour ne pas trop vite saturer l’espace disque au fil du temps!
Bien entendu, cette notion est étroitement liée à la capacité de votre hébergement, mais sachant également que la vitesse d’affichage d’une image dépend directement de son poids, il est de toute façon préférable d’utiliser des images les plus légères possible. Un poids proche des 100Ko étant une bonne limite, difficile dès lors d’utiliser des photos issues d’un appareil numérique sans les retoucher au préalable. A l’heure actuelle, certains appareils photos sortent des images qui dépassent allègrement les 5 Mo. Je vous conseille donc de parcourir l’article sur La retouche photo pour une publication web.

Notez que les images téléchargées sur le serveur se trouvent dans l’arborescence suivante : wp-content > uploads > 2013 > 09 si vous avez choisi l’option par défaut dans vos Réglages : « Organiser mes fichiers envoyés dans des dossiers mensuels et annuels ». Si non, ils seront en vrac dans le dossier wp-content >uploads.

Les réglages

Lorsque l’on ajoute une image à la bibliothèque, WordPress en crée des copies selon trois tailles prédéfinies. Cliquez sur « Réglages > Médias », pour retrouver les trois champs correspondant aux trois tailles différentes : miniature, taille moyenne et grande taille pour lesquelles il suffit de déterminer une largeur et une hauteur maximale.
Selon les formats choisis, le système génère donc des images qui sont des copies de l’originale en les nommant selon les tailles de l’image : Image-150×150.jpg, Image-300×300.jpg etc…
En entrant 0 (zéro) comme valeur pour un champ donné, WordPress ne générera pas de copie pour cette taille. Indiquez donc la valeur 0 pour chacun de ces champs si vous ne souhaitez travailler qu’à partir de l’image originale.

Les différentes tailles d'images

Notez que ces trois dimensions d’images sont relativement importantes quant à la manière dont vous allez insérer vos photos. Le fait de changer cette taille aura un impact sur les prochaines images à utiliser mais celles qui ont déjà été postées ne seront pas modifiées. Autant dire que c’est un élément à prendre en considération en même temps que l’aspect graphique du site.

Recadrer et redimensionner une imagePrécisons enfin que le champ « Miniature » dispose d’une option complémentaire : « Recadrer les images pour parvenir aux dimensions exactes ». Cochée par défaut, cette fonction est particulièrement intéressante dans la mesure où elle permet de recadrer l’image au format « carré ».
Les deux images ci-contre nous montrent les deux possibilités. Au-dessus, l’image recadrée, en-dessous l’image seulement redimensionnée.
Cela peut s’avérer très pratique pour l’agencement de plusieurs miniatures l’une à côté de l’autre puisqu’elles ont toutes le même format carré; cela facilite souvent la mise en page et permet d’éviter la disposition bancale due à certaines photos horizontales et d’autres verticales. Une technique souvent utilisée pour la création de galeries de photos.

Insertion d’une image dans un article

Pour insérer une image dans un article, il suffit de se rendre dans l’édition de celui-ci puis de placer le curseur à l’endroit voulu dans le texte et de cliquer sur le bouton « Ajouter un média » situé juste au-dessus de l’éditeur. La fenêtre qui apparaît permet alors de sélectionner une image déjà présente dans la Bibliothèque ou d’en importer une nouvelle. Pour cette dernière option, vous pouvez effectuer un simple glisser/déposer de votre image sur cette fenêtre ou encore sélectionner votre fichier de manière traditionnelle en cliquant simplement sur « Envoyer des fichiers » puis « Sélectionner des fichiers ».

Insérer une image dans un articleUne fois votre image sélectionnée, il sera particulièrement important de choisir les bons paramètres dans la colonne de droite pour respecter les notions abordées plus haut et notamment les 3 derniers champs du bas.

  • « Alignement » correspond à la manière dont vous souhaitez disposer l’image par rapport au texte : A gauche, au centre, à droite ou aucun.
  • « Lier à » permet de rendre l’image cliquable.
    - « Fichier média » ouvre simplement l’image dans le navigateur.
    - « Page du fichier attaché » ouvre une page du site pour présenter l’image, bien utile pour proposer des agrandissements.
    - « Lien personnalisé » permet de cibler une page web, celle de l’article, une autre page du site ou encore une page d’un autre site.
    - « Aucun » ne produira aucun lien sur l’image.
  • « Taille » permet de choisir laquelle des copies ou de l’originale va être affichée.

Les pièges à éviter

Attention que les derniers réglages choisis seront ceux par défaut pour le prochain ajout d’image. Une erreur fréquente est donc de retrouver des images cliquables alors qu’elles n’y étaient pas destinées simplement parce que l’item « Lier à » est resté celui du précédent réglage.

Notez que le fait d’utiliser une copie de l’image pour qu’elle s’affiche plus vite n’enlève pas pour autant l’image originale du serveur. En utilisant des images directement issues d’un appareil photo pesant plusieurs Mo va donc rapidement encombrer l’espace disque de votre hébergement.

Vous aimez cet article? Partagez-le sur les réseaux !

18 réflexions au sujet de « La gestion des images dans WordPress »

  1. Ping : La gestion des images dans WordPress | TIC et ...

  2. Ping : La gestion des images dans WordPress | Veille ...

  3. Ping : La gestion des images dans WordPress | Au fil d...

  4. Ping : La gestion des images dans WordPress | Boite &a...

  5. Le , james mcnulty a dit :

    Bonjour

    Je m’adresse à vous car je ne trouve aucune info sur le Net concernant un problème que je rencontre depuis peu. Les photos intégrées dans mes articles grandissent ou rapetissent démesurément et cela de façon aléatoire. J’ai beau les retraiter, le bug persiste. Je précise que si je rafraichis la page, le problème disparait… avant de revenir lors d’une autre visite.
    Si vous avez une solution…

    Bravo pour votre blog.

    James

  6. Le , Patrick Finot a dit :

    Bonjour James,

    Rencontrez-vous ce problème avec différents navigateurs?
    Peut-être pourriez-vous me communiquer l’adresse de votre site afin que je jette un oeil.

    Cordialement

  7. Le , Robert a dit :

    Bonjour,

    Pour une meilleure gestion de vos images et vos fichiers en général il existe un plug in très simple. Media File Manager Advanced disponible sur le site de WordPress.

    http://wordpress.org/plugins/media-file-manager-advanced/

    Il vous permet de créer des dossiers et sous dossier très simplement. Et d’aller naviguer dans cette arborescence pour sélectionner un fichier.

  8. Le , Patrick Finot a dit :

    Bonjour Robert,
    Je ne manquerai pas d’aller jeter un oeil sur le plugin que vous proposez car j’ai bien l’intention d’écrire un prochain article sur la manière de remédier aux « difficultés » évoquées plus haut.
    Je vous remercie pour ce partage.

  9. Le , Pascal a dit :

    Bonjour,

    Est-il possible de créer des répertoires dans le dossier wp-content>uploads pour mieux gérer les images ?
    Merci pour votre aide.

    Pascal

  10. Le , Patrick Finot a dit :

    Bonjour Pascal,

    Par défaut, WordPress permet de générer des sous-dossiers organisés par années puis par mois dans wp-content>uploads.
    On trouve cette fonction dans Réglages> Médias > « Organiser mes fichiers envoyés dans des dossiers mensuels et annuels ».
    Pour plus de souplesse, il est possible d’allouer cette tâche à un plugin comme celui mentionné dans le précédent commentaire de Robert.

    Cordialement

  11. Le , Adeline a dit :

    Bonjour,Merci pour le tuto qui est très clair.Je m’adresse à vous pour vous expliquer un petit soucis que j’ai au niveau des images wordpress mais sur la publication de l’image à la une je ne réussis pas à avoir des petites miniatures en page d’accueil de site car dans mon site t’as l’extrait et en cliquant t’as l’article complet.Donc les images sur la pages d’accueil des extraits sont trop grandes.Je vous remercie à l’avance.
    Adeline

  12. Le , Patrick Finot a dit :

    Bonjour Adeline,

    Pas facile de vous répondre sans connaître le thème graphique que vous utilisez.
    Dans un premier temps, rendez-vous dans l’admin > Réglages > Médias et choisissez pour « Taille moyenne » la largeur et la hauteur maxi que vous souhaiteriez afficher pour votre image à la une.
    Publiez ensuite un nouvel article et voyez ce que ça donne.

  13. Le , Pascal Lépine a dit :

    Bonjour,

    Merci pour ce tuto. Existe-t-il un plugin qui permet de transformer une image dans les 3 tailles attendues par WP avant de les ranger dans MEDIA et de les utiliser dans une page ou un article (pour éviter une transformation en ligne).

    A bientôt.

    Pascal.

  14. Le , Patrick Finot a dit :

    Bonjour Pascal,

    Si l’on passe par un plugin WP pour redimensionner les images, il s’agira obligatoirement d’une transformation en ligne, mais peut-être n’ai-je pas bien compris votre question.

  15. Le , PASCAL LEPINE a dit :

    Bonjour,

    Je partage ; mais … Dans la construction du site, est-il un ?? (plug-in) qui lors du chargement des images permet d’obtenir 3 (+ ou -) tailles différentes. Je suis bien au moment de la conception (chargement des images dans MEDIA) et non pas dans la visualisation du site. Merci pour votre aide.
    Pascal.

  16. Le , Patrick Finot a dit :

    J’ai l’impression que vous cherchez un plugin pour faire quelque chose qui existe déjà par défaut dans WordPress. Mais peut-être que je me trompe…

    Dans le tuto vidéo ci-dessus, à +/- 4 min, on parle de l’idée que WordPress crée des copies de l’image originale dans 3 tailles différentes et qu’il place sur le serveur lors de l’upload.
    En suivant le tuto, on voit ensuite que l’on peut accéder à ces différents images avec leur taille respective lorsqu’on les intègre dans un article.
    N’est-ce point ce que vous recherchez?

    Si vous le souhaitez, n’hésitez pas à me contacter directement par mail pour essayer de trouver une solution à votre énigme.

  17. Le , Bernard a dit :

    Bonjour,
    Ma question est de savoir comment faire pour adapter une taille d’image dans WordPress. La taille demandé par WordPress dans un slider jquery3 doit de 960 sur 350 (pixels je suppose). Je voudrais modifier donc la taille de mon image sans en modifier l’ensemble de mon image, donc sans rogner l’image. Lorsque je modifie cela dans photoshop, ou j’ai une distorsion ou l’image n’est pas « complète ».
    Si quelqu’un serait me donner une solution.
    Merci

  18. Le , Patrick Finot a dit :

    Bonjour Bernard,

    A ma connaissance, il n’est guère facile de réaliser ce genre d’opération sans avoir à recadrer ou rogner l’image originale, surtout si le format de départ et celui d’arrivée sont fort différents.
    Pour un Slider, vous pourriez peut-être songer à réaliser un montage avec l’image de base plus une autre, ou encore l’image de base plus un logo ou un slogan, une date, un lieu, un évènement etc… à voir évidemment avec le cahier des charges.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>