Insérer des images dans un article WordPress

Quelques conseils pour utiliser au mieux des images dans vos articles. A la portée de tous.

Prenons l'exemple de l'image ci-dessous. C'est une image tirée de mon smartphone (pas le plus perfectionné). Elle mesure 4096 X 2304 pixels et "pèse" 6 mégaoctets. Vous remarquerez que WordPress se débrouille pour l'afficher correctement. Mais si votre connexion est lente (WiFi) ou ADSL un peu poussif, le chargement est un peu long.

Cliquez sur l'image ci-dessous avec le bouton droit de la souris et prenez la commande Afficher l'image. Vous la voyez toujours en entier mais cette fois-ci, elle occupe toute la largeur de la fenêtre du navigateur. Si vous promenez la souris sur l'image le curseur prend la forme Souris loupe. Cliquez pour agrandir l'image à sa taille réelle. Cette fois-ci elle dépasse largement la taille de l'écran.

Le conseil de info.rueducoq.fr

Ne mettez jamais en ligne une photo directement issue de l'APN.

Préparation de l'image

la plupart des ordinateurs ont une résolution d'écran comprise entre 1200 et 1920 pixels de large et une image dans une page Web étant rarement amenée à occuper toute la largeur de l'écran, une largeur de 1000 pixels semble être un bon maximum.

Pour réduire l'image, si vous n'êtes pas familier des logiciels de traitement d'image, le plus simple est d'utiliser Paint (accessoire Windows.

  • Ouvrez votre image avec Paint. Elle porte un nom en général très obscur (ex:  IMG_20171026_122223.jpg).
  • Dans la barre d'outils cliquez sur l'outil Redimensionner.
    Dans la fenêtre cocher Pixels puis indiquez la dimension horizontale. Paint ajustera automatiquement la dimension verticale.Redimensionner
  • Enregistrer l'image ou, si vous voulez garder l'original, enregistrer une copie. Changer le nom de l'image pour un nom explicite (dans mon exemple : Vaches vosgiennes.jpg).

Mettre l'image en ligne

Vous êtes en train de rédiger votre article.

  • Cliquez sur le bouton Ajouter un media.
  • Si votre image est déjà présente dans votre bibliothèque de média cliquez sur l'image, sinon cliquez sur Téléverser des fichiers pour utiliser une image présente sur votre ordinateur.
  • Quand l'image est disponible la partie droite de l'écran permet de choisir les paramètres d'insertion dans le texte :
    Insérer média

    • Titre : par défaut, WordPress prend le nom du fichier. Choisissez un nom explicite.
    • Légende : sera affichée sous l'image
    • Texte alternatif : important pour l'indexation de vos images par les moteurs de recherche
    • Description : pour les moteurs de recherche également
    • Alignement : voir exemples ci-dessous
    • Lier à : une image peut contenir un lien.
      Fichier média : l'image est affichée sous forme de miniature et le lien permet de voir l'image entière.
      Lien personnalisé : un lien vers n'importe quel objet disponible sur le Web.
    • Taille : taille originale ou sous forme de miniature.

Modifier une image existante

Si on clique sur un e image une barre d'outils apparaît qui permet de modifier l'image :

Modifier image

On peut modifier l'alignement, la taille d'affichage, le lien. On peut ajouter l'attribut "Title" qui fournira une info-bulle lorsqu'on survole l'image.

Le zoom

Quand on "zoome" sur une image, on est obligé d'utiliser le bouton retour du navigateur pour revenir à l'article. Pour améliorer cette navigation on peut utiliser une extension comme Jquery Colorbox.

Quelques exemples

Vaches vosgiennes
Image 1000 X 562 insérée en taille originale mais WordPress la réduit pour qu'elle ne dépasse pas la largeur du texte. Comme elle est liée au fichier média un clic sur l'image affiche l'image au format original. Alignement aucun. Le zoom est optimisé avec Jquery Colorbox
Vache
Alignement gauche. Aucun lien puisque l'image est affichée à sa taille normale.

Lorem Elsass ipsum Strasbourg bredele barapli ornare DNA, leo knepfle leo vulputate Kabinetpapier non chambon Coopé de Truchtersheim réchime id schpeck Mauris libero. sed tristique sit hoplageiss Racing. suspendisse Yo dû. quam, ac consectetur rossbolla ac amet mamsell Pfourtz ! mollis lotto-owe aliquam elit semper Richard Schirmeck nullam bissame sit salu kougelhopf picon bière baeckeoffe adipiscing elementum Salut bisamme purus geht's hop habitant Hans nüdle hopla risus, jetz gehts los eleifend dolor Morbi leverwurscht condimentum et rhoncus merci vielmols geïz tellus Salu bissame rucksack sit Gal. wie Wurschtsalad ornare dignissim in, pellentesque Spätzle tellus Miss Dahlias schneck commodo s'guelt gewurztraminer Oberschaeffolsheim hopla turpis gravida Christkindelsmärik morbi id, Heineken Oberschaeffolsheim kuglopf messti de Bischheim non ftomi! Chulien Huguette so sagittis gal varius placerat turpis, Verdammi blottkopf, lacus quam. libero, ch'ai eget Pellentesque auctor, Chulia Roberstau hopla und amet, senectus mänele schnaps hopla knack kartoffelsalad flammekueche wurscht ante ullamcorper yeuh. vielmols, tchao bissame amet libero, munster Carola météor porta sed Gal ! dui

 

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.