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 
. 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.
Donc il vaut mieux réduire l'image pour un meilleur affichage sur tous les terminaux, pour éviter un temps de chargement trop long à ceux de vos lecteurs qui ont une connexion un peu lente.
Pour réduire l'image, si vous n'êtes pas familier des logiciels de traitement d'image, le plus simple est d'utiliser WordPress lui-même.
Mettre l'image en ligne
Vous êtes en train de rédiger votre article.
- Cliquez sur le bouton
. - 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 et même de la modifer :
Effectivement elle fait 4096 pixels de large soit 3 fois la largeur d'écran d'un portable classique. En plus elle "pèse" bien 6 MB (6 mégaoctets).Il vaut mieux la réduire.
- Cliquez sur Modifier l'image. Dans Nouvelles dimensions modifiez la largeur (max 1000 px). WordPress ajustera automatiquement la hauteur.
Cliquez sur les boutons
puis 
.
Ensuite il ne reste plus qu'à insérer l'image dans l'article en choisissant les paramètres :
- Titre : par défaut, WordPress prend le nom du fichier. Choisissez un nom explicite (pour les moteurs de recherche et l'accessibilité).
- 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.
- Et pour finir
.
Modifier une image existante
Si on clique sur une image déjà présente dans l'article, une barre d'outils apparaît qui permet de modifier l'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
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