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 !

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

  19. Le , Meheust Jordan a dit :

    Bonjour,

    Tout d’abord merci pour ce tutoriel très intuitif. Je suis confronté à un problème assez étrange.. Quand je publie des photos dans la gallery de mes articles, certaines utilisent très bien un des formats crées en copie lors de l’upload de ces médias ( la plupart du temps 960×642 ), mais sur d’autres images, pour je ne sais quelle raison, il se rajoute un element style qui resize l’image ( style= »width: 2037px; height: 1362px; »). Mais pas sur tous les projets.
    Je précise que le nouveau format n’est pas le même que le format de base, et il n’est pas crée non plus par wordpress ( du moins je pense étant donnée qu’il n’est pas dans mon dossier wp-content/upload). Je suppose donc que cela vient de mon thème. Mais comment trouver l’origine de ce problème ?
    J’espère avoir été assez clair dans mon explication.. Merci d’avance !

  20. Le , Patrick Finot a dit :

    Bonjour Jordan,

    Etrange en effet… En lisant votre commentaire, j’aurais également pensé au thème. Pour en avoir le coeur net, je vous suggère donc de tester la même opération avec un thème livré dans WP.

    D’autre part, si vous avez installé des plugins (ligthbox, slideshows…), cela pourrait aussi en être la cause. Là encore, le plus simple consiste à tester en désactivant certains plugins.

    Avec un outil comme Firebug, vous pourriez voir si l’élément style est dynamique (ce qui est fort probable), ce qui tendrait à montrer que cela provient soit du thème, soit d’un plugin.
    Ensuite, si le redimensionnement est toujours de 2037px, vous pourriez fouiller dans les fichiers de votre thème, notamment le fonction.php, pour y lancer une recherche sur « 2037px » et tenter d’identifier l’origine du phénomène…

  21. Le , Yohann a dit :

    Bonjour Robert,

    C’est avec un grand plaisir que je viens de tomber sur votre tuto, qui est tres clair!!! En faite, je m’appelle Yohann et je fais un tour du monde depuis 3 ans. Depuis la date du depart j’ai un blog. Il doit y avoir plus de 400 articles et plus de 3 000 photos.

    Or j’ai fais l’erreur de debuttant qui a été de mettre en ligne des photos ayant de très grande dimensions: 4608 × 3456. Enfin vraiment enorme! Est ce que vous savez si il existe sur wordpress la possibilité de changer toutes les dimensions de mes images d’un coup? Parce que 4 000 images cela va me me prendre un certains temps.Donc ci vous connaissez l’astuce je suis preneur.

    Il y a aussi une autre question. Lorsque je vais sur l’une des mes images, j’ai ceci: 4608 × 3456 avec une Taille du fichier : 4 MB.
    Mais quand je modifie par 624 × 468, ma taille de fichier est de: …. il n’y a plus rien. Comment savoir si la taille a bien baissé?

    Merci encore pour vos tutos!!!
    Yohann qui vous ecrit du Vietnam

  22. Le , Patrick Finot a dit :

    Bonjour Yohann,

    Si votre site n »affiche pas les images originales mais l’une des copies comme indiqué dans le tutoriel, ce n’est pas si dramatique; c’est juste que cela occupe de la place sur l’hébergeur inutilement.
    On m’a conseillé ce plugin pour l’upload des images: https://wordpress.org/plugins/imsanity/
    J’ai vu qu’il permettait de redimensionner les images après upload mais je vous avoue que je n’ai pas encore eu le temps de tester cette fonction.

    Pour la 2ème question, enregistrez l’image sur votre ordinateur et vous verrez facilement le poids de celle-ci. Certains navigateurs (firefox) permettent d’afficher ces infos avec un clic droit.

    Bonne route… ;)

  23. Le , Yohann a dit :

    Coucou Robert,

    Alors le plugin est mis sur mon interface et les options ont été coche: Image 615×415.

    Apres tu as raison, on peut remodifier les images, car il y a ecris cela:

    « Redimensionner les images en lots

    Si vous avez déjà des images qui ont été téléchargés avant d’installerImsanity, vous pouvez les redimensionner tout en vrac pour récupérer l’espace disque. Pour commencer, cliquez sur le bouton « Rechercher des images » pour rechercher toutes les images existantes qui sont plus grandes que la limite configurée.

    MAIS, la question est comment fait-on? Ils disent qu’il faut cliquer surle boutin rechercher des images? Be ce boutin il est ou, depuis une heure g le cherche sur mon interface mais ne le trouve pas??? Tu l’as toi sur ton interface?

    Yohann

  24. Le , Yohann a dit :

    Re Robert,

    AH, apres des heures de recherches c’est bon g trouvé, mais le chemin de crois continue car cela me donne ceci sur toutes les photos selectionnées pour les redimensionner:

    12 of 250 >> ERREUR : /var/www/vhosts/yoytourdumonde.fr/httpdocs/wp-content/uploads/2011/07/PIC_0345.jpg (L’enregistrement de l’éditeur d’images a échoué.)
    13 of 250 >> ERREUR : /var/www/vhosts/yoytourdumonde.fr/httpdocs/wp-content/uploads/2011/07/PIC_0352.jpg (L’enregistrement de l’éditeur d’images a échoué.)
    14 of 250 >> ERREUR : /var/www/vhosts/yoytourdumonde.fr/httpdocs/wp-content/uploads/2011/07/PIC_03631.jpg (L’enregistrement de l’éditeur d’images a échoué.)
    15 of 250 >> ERREUR : /var/www/vhosts/yoytourdumonde.fr/httpdocs/wp-content/uploads/2011/07/PIC_0421.jpg (L’enregistrement de l’éditeur d’images a échoué.)

    Yohann

  25. Le , Patrick Finot a dit :

    Pas facile de t’aiguiller sans pouvoir soulever le capot…
    De mémoire, il me semble que le plugin prévient qu’il s’agit d’une opération sans garantie de résultat à 100%.
    Il existe probablement d’autres plugins du même genre. Je reviens vers toi si je trouve quelque chose d’intéressant.

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>