Précédemment, nous vous avions parlé d’où trouver de jolies photos. Aujourd’hui, nous allons voir comment les modifier au sein de WordPress.

Avant d’ajouter la moindre image dans le back-office de WordPress, voici déjà quelques informations utiles…

Premièrement, il existe plusieurs types d’images (.jpg, .png, .gif, etc.) dont le poids et la taille varient. Chaque image possède un nom/titre mais on peut également lui ajouter texte alternatif, une légende ou un descriptif. Ensemble, nous allons voir comment rendre optimal ce média.

Le nom de l’image

Le nom de l’image est important pour deux choses : premièrement, le nom que WordPress affiche est simplement le nom que vous avez donné à votre image (donc, si vous l’appelez « IMG_2016-02-12.jpeg », ce sera également le titre de votre image dans WordPress). Ce n’est pas l’idéal pour retrouver vos photos par nom. Mais surtout, ce titre est important pour le référencement que Google fait sur vos images. En effet, Google ne sachant pas lire une image, c’est à vous d’indiquer ce qui figure sur votre image/photo. Et à l’heure actuelle, on aime tous être vu dans Google 🙂 Pour cela, il suffit de renommer son image avec une nomenclature similaire a celle-ci « description-de-votre-image.type » (la chaine ne doit pas comporter d’espace, pas de caractères spéciaux exceptés le « – » ou « _ » et aucune lettre avec accent).

 La taille (en pixels) et le poids (en Ko) de l’image

Le poids d’une image correspond à la taille du fichier soit en Ko (kilo octets) ou en Mo (Méga octets). La taille de l’image correspond au nombre de pixels qui composent l’image.

L’une des erreurs les plus communes est d’importer une image trop grande, aussi bien au niveau de la taille qu’au niveau du poids. Vous n’avez aucun intérêt à ajouter une image dont la largueur est supérieure à 2500px.

Il n’y a rien de plus essentiel que d’optimiser la taille et le poids de vos images car cela a un impact sur presque tous les aspect de votre site tel que le chargement de page, l’espace du serveur, l’accessibilité de la page, le classement dans les moteurs de recherche, etc. De plus, comme vous le savez, aucun visiteur n’aime attendre…

Avec les appareils photos actuels, les images qui sont produites sont composées de plusieurs milliers de pixels mais dans le Web, nous n’avons pas besoin de tous cela. Il est donc inutile d’importer ce genre d’image brute directement dans WordPress. En sachant que la taille moyenne d’un grand écran est de 1920 x 1080 pixels, nous vous conseillons de travailler avec une taille qui varie entre 1200px et 1500px de large pour les grandes images et 920px pour les images moyennes. Idéalement, la taille native de votre image doit être la même que l’image à afficher.

Chez Octopix, nous travaillons avec un site bien pratique : « Tinypng », qui compresse vos images tout en gardant une bonne qualité d’image !

Le texte qui accompagne l’image (Alternate Text )

Ce texte est le texte ALTERNATIF autrement dit, c’est celui qui sera lu par les moteurs de recherches. Cette balise vous permet d’ajouter des mots-clés supplémentaires. Vous vous imaginez donc bien ô combien il est important car celui-ci va améliorer le référencement de votre image dans un premier temps mais surtout de votre site au final.

Cette balise sert également dans le cas où le navigateur ne sait pas afficher l’image mais également pour les personnes malvoyantes.

La légende

Il s’agit du texte qui s’affiche sous l’image. Ce champ n’apporte pas de plus-value directe au niveau du référencement mais il peut-être utile pour l’utilisateur. De plus il apporte du contenu autour de l’image.

Le type d’image

Il existe des dizaines de types d’images mais nous vous conseillons d’utiliser les formats classiques tels que .PNG, .JPG/JPEG, voir .GIF. Ce sont les plus répandus et tous les navigateurs sont capables de les lire.

Au boulot, ajoutons une image !

Maintenant que vous en savez plus sur les images, nous allons ajouter une image au sein de WordPress.

Pour cela rendez-vous dans l’onglet « Média » de votre back-office.

Dans cet onglet, vous pouvez voir les différents médias déjà ajoutés à votre base de données. C’est dans ce même lieu que vous allez pouvoir ajouter de nouveaux médias. Rien de plus simple, il vous suffit de cliquer sur le bouton « Ajouter » puis soit en drag-dropant votre/vos média(s), soit via le bouton « Choisir les fichiers ».

Une fois l’importation faite, nous allons pouvoir la modifier.
Il faut savoir qu’au sein même de WordPress, il existe des outils pour éditer directement les images.  Lorsqu’on affiche le détail d’une image, il suffit de cliquer sur le bouton « Modifier l’image » en bas à gauche.

Voici à présent les différents outils disponibles au sein de l’admin de WordPress :

Rogner

 

Pour rogner une image, il vous suffit de glisser votre souris enfoncée sur l’image et de créer un cadre (zone de sélection) afin de délimiter votre nouvelle image. Puis, cliquez sur la première icône à gauche.

Recadrer

Vous pouvez également délimiter directement la zone en entrant les valeurs dans les champs prévus à cette effet.

Redimensionner

Cet outil est une mise à l’échelle de votre image, il vous suffit d’entrer la largeur que vous désirez afin de redimensionner la taille de l’image.

Autres

Dans la barre d’outils, il vous reste encore deux réglages possible,

• la rotation : vers la gauche ou vers la droite.
• l’inversion : horizontale ou verticale.
• annuler/rétablir.

Lorsque vous avez modifié votre image, il vous suffit juste d’enregistrer vos modifications et WordPress enregistrera automatiquement une nouvelle image, en plus des 3 par défauts (Miniature, Moyenne, Grande) et de votre image originale.

On ne dit pas que WordPress et Photoshop sont la même personne, on dit juste qu’on ne les a jamais vu ensemble dans la même pièce 🙂