les images

—

par

dans

WP gÚre les formats courants JPG, PNG et GIF. Pour chaque image envoyée il génÚre 3 miniatures de différents formats.
Il propose aussi des outils pour les modifier directement en ligne depuis la MĂ©diathĂšque.
Depuis la version 5.8 il supporte mĂȘme le nouveau format webP, Ă  creuser

les options de modification d’une image : on peut la retourner, la recadrer, la redimensionner

Quelques trucs Ă  comprendre

Un peu de lecture instructive dans la doc officielle:

Les images de la mĂ©diathĂšque sont accessibles Ă  tous les contributeurs (auteurs, Ă©diteurs, admin…) et peuvent donc ĂȘtre utilisĂ©es dans diffĂ©rents articles ou pages. C’est le premier « grain » rĂ©utilisable et mutualisĂ© dans un site wp.

Les visuels que l’on stocke dans WP pourront aussi ĂȘtre liĂ©s directement depuis d’autres sites, ou dans un mail… La mĂ©diathĂšque fournit ainsi une URL Ă  chaque fichier.

WP fournit des outils de traitement, MAIS
il n’est pas le meilleur outil pour modifier des images.

Plus on aura préparé et optimisé nos médias AVANT et mieux on pourra profiter de son pouvoir : la publication mise en page.

Définition, résolution et poids

La taille d’une image JPG ou PNG est donnĂ©e en pixels : ces formats sont constituĂ©s d’une trame de points colorĂ©s, un peu comme des tapis. Plus il y a de pixels et plus l’image sera lourde, longue Ă  transporter jusqu’Ă  l’Ă©cran du visiteur…

Pour le web il n’est pas utile d’avoir des images trop grandes, au contraire plus elles sont lĂ©gĂšres et mieux c’est.

Pixels du quotidien

  • Mon ordiphone rĂ©cent me permet de faire des photos de 4000 px par 2250 px.
  • Par contre, si je capture son Ă©cran j’obtiens un png de 720 px par 1280 px.
  • Mon PC portable 15 pouces affiche lui un Ă©cran de 1920 px par 1080 px.
  • La tĂ©lĂ©vision 4K de ma maman propose un affichage de 3840 px par 2160 px
Pourquoi mon appareil photo fournit-il tant de pixels?

RĂ©ponse : Car j’en aurai besoin pour faire un tirage papier de qualitĂ©. La luminositĂ© des Ă©crans feinte nos yeux et rend un aspect lisse et clair avec seulement 72 pixels par pouces, mais pour un support imprimĂ© il faudra 300 pixels sur la mĂȘme distance/surface pour obtenir cette nettetĂ©.

Quel format choisir pour les visuels du site?

RĂ©ponse : Photos d’Ă©vĂšnements et de projets (JPG) ou illustrations graphiques (PNG) ne seront jamais affichĂ©es en plus grand que le plus grand des Ă©crans. Pour Ă©conomiser du temps de chargement il est prĂ©fĂ©rable de n’envoyer dans la mĂ©diathĂšque que des images dĂ©jĂ  traitĂ©es : nom explicite et dimensions rĂ©duites. Une dimension maximum de 2000px suffit largement. Le poids de chaque fichier doit rester minime.

Comment rĂ©duire le poids d’une image?

RĂ©ponse : Il existe de nombreux outils en ligne (chercher « optimiser images ») comme par exemple le panda Tiny qui permet de traiter des petites sĂ©ries d’images. Les plus geeks d’entre nous pourront traiter des dossiers complets directement sur leur ordi, avec un script ou un logiciel (ici un ex pour Windows).
Il est aussi possible d’ajouter une extension wp dĂ©diĂ©e Ă  la compression, ce sera le sujet d’un autre billet.

voir aussi: 5 façons de réduire le poids des images sur le site webdesign4theplanet

Emprunts crédités

Sur internet on peut facilement trouver des images crĂ©Ă©es par d’autres pour illustrer nos propos, et les « prendre » pour nous sans difficultĂ©s. Mais en tant que personnes responsables de nos publications et respectueuses des autres crĂ©ateurs on applique ces bonnes pratiques :

Respecter les licences

Toute publication est gĂ©nĂ©ralement accompagnĂ©e d’un ensemble de permissions ou d’interdictions quant Ă  sa rĂ©utilisation. J’en saurai plus aprĂšs le rdv Vendredi du Libre de janvier mais je sais dĂ©jĂ  qu’en gĂ©nĂ©ral on n’a pas le droit de piquer une ressource et de faire comme si c’Ă©tait Ă  nous.

Mon moteur de recherche me permet de filtrer les rĂ©sultats pour n’obtenir que des contenus que je pourrai emprunter pour illustrer mon site. Il existe Ă©galement des sites spĂ©cialisĂ©s dans la diffusion de contenus « libres de droits ».

CrĂ©diter la source et l’auteur de la ressource

J’ai fait attention Ă  prendre une image dont la rediffusion est « permise » par son crĂ©ateur et je vais donc le remercier de son partage en mentionnant son nom et la source de mon emprunt.

Le champs « lĂ©gende » des images peut tout Ă  fait servir Ă  ça. En gĂ©nĂ©ral les mentions Ă  faire apparaitre sont fournies avec l’image. Si on utilise rĂ©guliĂšrement la mĂȘme source ou les mĂȘmes outils, on peut aussi imaginer une page « CrĂ©dits » du site construite comme un gĂ©nĂ©rique de film…

Créations originales

C’est Ă©videmment la meilleure solution ! Proposer des visuels qu’on a fabriquĂ© soi-mĂȘme.

Avec des outils comme Inkscape (sur notre ordi) ou Canva (ricain en ligne) et une palette de couleurs Ă©tablie c’est assez facile de prĂ©parer une sĂ©rie de visuels qui couvre les diffĂ©rents sujets de notre site et qui permette aux contributeurs Ă  venir d’illustrer leur propos sans effort.
J’aime beaucoup cette solution pour crĂ©er l’habillage gĂ©nĂ©ral du projet, les images rĂ©currentes.
à venir : Fiche pour créer nos illustrations avec Inkscape

Illustrations accessibles

Au sein d’un article ou d’une page, les images ont 3 grandes fonctions : dĂ©coratives, promotionnelles ou porteuses d’informations.

Pour permettre Ă  un maximum de personnes de comprendre quel type d’image et ce dont elle parle il y a plusieurs facteurs importants :

  • le nom du fichier: sans accents, sans espaces et avec des mots-clĂ©s pertinents.
    les robots de Google & co ne voient que cet aspect de l’image ET ces mots permettront Ă  tous les contributeurs de chercher dans la mĂ©diathĂšque.
  • des champs textes Ă  complĂ©ter depuis la mĂ©diathĂšque et pour chaque fichier :

Texte alternatif :
Le premier et le plus important, il sert Ă  dĂ©crire l’objectif et/ou le contenu de l’image pour les navigateurs spĂ©ciaux des personnes malvoyantes, par ex.

Titre : reprend par défaut le nom du fichier

LĂ©gende : peut ĂȘtre modifiĂ©e dans chaque publication mais place idĂ©ale pour crĂ©diter une source si nĂ©cessaire

Description: des mots en plus et surtout pour le référencement ?

URL du fichier : LĂ  c’est WP qui nous le fournit. TrĂšs utile pour partager directement ce document, ou pour crĂ©er un lien vers lui ( tĂ©lĂ©charger le bulletin en pdf par ex)

Image mise en avant

Pour chaque Article on peut dĂ©finir une image qui sera appelĂ©e avec lui dans les diffĂ©rentes requĂȘtes WP et dans les aperçus gĂ©nĂ©rĂ©s lors de partages sur d’autres sites ailleurs .
Par dĂ©faut le modĂšle « Publication » affiche aussi cette image en tĂȘte de l’article, comme ici.

Au delà du « joli », cette option peut donc rendre nos contenus faciles à identifier et nous aider à structurer la navigation pour les visiteurs.


Commentaires

Laisser un commentaire

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