Gestion des images pour le Web et dans WordPress
Optimiser vos images avant de les utiliser sur votre site internet est essentiel!
Inutile d’utiliser une image de 4000×2000 pixels pour l’afficher dans un slider de 900 pixels de large. Cela ne fera qu’alourdir vos pages et ralentira dramatiquement leur chargement.
Voici des conseils pour optimiser au mieux vos images avant de les mettre en ligne, et comment gérer les images dans WordPress.
Partagez cette page si vous la trouvez utile !
Pourquoi optimiser taille et poids des images pour son site web ?
- Espace disque utilisé moindre sur votre serveur
- Moins de bande passante utilisée sur le serveur
- Images plus légères = Vitesse de chargement des pages accrue
- Pages plus accessibles aux visiteurs ayant une connexion au débit limité (utilisateurs de Edge/3G sur mobiles par exemple)
- Personne n’aime attendre qu’une page se charge; il est d’ailleurs prouvé que des temps de chargement longs font fuir les visiteurs
- Des pages au temps de chargement long seront moins bien classées par les moteurs de recherches.
Adaptez la taille des images à l’usage final
Nombre de pixels et résolution nécessaire selon la destination
Eh bien, c’est là que la notion de résolution est importante. Si vous affichez simplement vos photos sur un écran d’ordinateur à partir du disque dur, en général le logiciel qui ouvrira l’image se débrouillera pour adapter à la volée la taille de celle-ci pour utiliser au mieux la surface disponible sur votre écran. Mais si vous souhaitez faire imprimer vos photos sur papier, on vous demandera en général des fichiers prévus pour une résolution finale de 300 dpi (parfois 600 ou plus), c’est à dire 300 points par pouce (Dots Per Inch).
Image de résolution 18 dpi
Image de résolution 72 dpi
Autrement dit, dans ce cas l’imprimante casera 300 pixels de votre fichier image sur une largeur de 1 pouce (environ 2,54 cm) de papier. Plus cette valeur en dpi sera grande, plus la finesse d’impression sera grande. Donc, si par exemple vous voulez imprimer une image en 300 dpi sur une largeur de papier de 20 cm, soit environ 8 pouces, il faudra que l’image à imprimer fasse environ 300 x 8 = 2400 pixels de large !
Et pour le web ?
Sur le web, là encore les dimensions seront dictées par les besoins, l’idéal sera de préparer une image pour qu’elle ait des dimensions proches de celles voulues sur la page. Les sites web ont en général une zone « content » d’environ 1000 pixels de large. Donc, si je souhaite afficher une image prenant la pleine largeur utilisable de cette zone, je ferai en sorte que celle-ci fasse 1000 px de large avant de l’uploader sur le site!
Et pour WordPress alors ?
WordPress est capable, nous allons le voir un peu plus bas, de générer automatiquement des miniatures d’une image lorsque vous l’importez dans via le back-office. Ces miniatures seront souvent utiles pour les intégrer dans le corps d’un texte par exemple, l’image miniature étant cliquable et menant vers l’image en taille réelle. Nous verrons que la taille générique de ces miniatures se paramètre d’ailleurs dans les préférences.
Partagez cette page si vous la trouvez utile !
Quels formats de fichiers image utiliser
Images GIF
Le format GIF est limité à 256 couleurs simultanées. Il n’a d’intérêt que pour de très petites images.
Il permet aussi d’afficher des petites animations (les fameuses GIFs animées).
Le Format PNG
PNG est un standard dédié au web. Il est plus performant que le GIF, et surtout, il permet de profiter du paramètre de transparence (souvent indispensable pour les icônes ou les logos). Il est à privilégier pour les images du type dessins, graphiques, logos, … Mais il ne sera pas très performant pour les photos.
Le JPEG
C’est LE standard à privilégier pour les photos sur le web. Il permet de choisir un niveau de compression (et donc de pertes) plus ou moins fort. Chaque image étant différente des autres, il s’agira de choisir le bon compromis entre taille de fichier et qualité du rendu visuel!
Logiciels pour optimiser les images
Je n’ai personnellement, pour le présent site, utilisé que les outils natifs (Aperçu) de mon mac pour optimiser la taille des images (captures d’écran essentiellement), plus l’extension pour Chrome Superbe Capture d’écran (pour réaliser et annoter les captures) et Inkscape (pour créer quelques infographies). N’importe quel logiciel de retouche photo sera capable de rogner/recadrer (« crop » en anglais) une image, puis de la sauvegarder sous un des 3 formats décrits plus haut. Si vous n’avez pas l’habitude de l’un d’entre-eux, voici quelques outils simples (et gratuits) qui feront l’affaire, selon que vous avez un PC ou un Mac…
Vous êtes sur PC
XnView
Logiciel de visualisation de fichiers d’image. Il permet de convertir dans de nombreux formats, mais aussi de découper/recadrer vos images, voire même d’appliquer des effets dessus!
InkScape
Outil de dessin vectoriel très complet, dans la veine d’Illustrator ou Corel Draw, mais open source!
Parfait pour réaliser vos infographies…
RIOT
L’outil final d’optimisation de vos fichiers images! RIOT réduit sans perte de qualité la taille des fichiers, entre autres en supprimant toutes les méta-données inutiles. A utiliser avant d’uploader vos images vers votre site!
Vous êtes sur MAC
Aperçu
Nul besoin de l’installer, vous l’avez déjà! Vous pourrez redimensionner vos images (menu « Outils » => « Ajuster la Taille »), mais aussi les rogner/recadrer. Il est même possible d’ajouter des annotations!
InkSpace
Outil de dessin vectoriel très complet, dans la veine d’Illustrator ou Corel Draw, mais open source!
Existe donc aussi pour Mac !
ImagOptim
Optimisateur d’image simplissime, il suffit de glisser/déposer le fichier image dans la fenêtre du logiciel, il s’occupe du reste! A utiliser avant d’uploader vos images vers votre site!
Partagez cette page si vous la trouvez utile !
Gestion des images dans WordPress
Réglages préalables
Commençons par faire un tour sur la page « Réglages > Médias » du back-office; nous pouvons y régler les tailles maximum des différents types de miniatures que WordPress créera lors de l’import d’une image.
Thumbnail est la plus petite taille. Si vous souhaitez que les Thumbnails fassent toujours la même taille (par exemple un carré de 150 x 150 pixels), il faudra cocher l’option « Recadrer les images pour parvenir aux dimensions exactes ».
Vous pouvez aussi régler les dimensions maximum des miniatures de taille Medium puis Large.
Importer une image via la section Media du Back Office
Dans cette section, vous trouverez une « Bibliothèque » dans laquelle sont visibles tous les médias (images, sons, vidéos) que vous aurez importé dans votre WordPress. Dans cette page «Bibliothèque » vous pourrez gérer et supprimer (définitivement!) du serveur vos médias.
Cliquons sur « Ajouter » dans cette section « Médias » . Nous découvrons une fenêtre très simple dans laquelle nous pouvons glisser/déposer (Drag&Drop) directement un ou des fichiers d’images. Il est aussi possible de choisir l’option « Choisir des Fichiers » et de pointer les fichiers à partir de l’arborescence de fichiers de votre ordinateur.
- Adresse Web : l’adresse de l’image sur le serveur (non modifiable, évidemment).
- Un Titre qui s’affichera par exemple lors de l’ouverture en surimpression de l’image (via Lightbox).
- Légende : texte parfois affiché sous l’image ou en surimpression. Les deux images de la section « Adaptez la taille » par exemple utilisent le champ Légende.
- Texte Alternatif : il s’agit du texte qui sera affiché dans le cas où l’image ne pourrait pas s’afficher. C’est aussi un élément important à renseigner pour un meilleur référencement de vos images dans les moteurs de recherche (ces derniers ne savent pas voir les images).
- Description : celle-ci sera par exemple affichée sous l’image en surimpression via Lightbox.
Partagez cette page si vous la trouvez utile !
Insérer une image dans une page ou un post WordPress
La fenêtre qui s’ouvre alors propose plusieurs sections, chacune correspondant à une manière différente d’insérer une ou des images.
- Envoyer des fichiers : Glissez/Déposez un ou des fichiers image dans la zone indiquée, ou utilisez le bouton « Choisir des fichiers ».
- Bibliothèque : Si l’image a déjà été uploadée dans la bibliothèque de votre site.
- A partir d’une adresse web : si l’image est déjà hébergée ailleurs sur le net (par exemple sur Flickr, Picasa, …)
- Créer une galerie permet de créer facilement une galerie d’image et de l’insérer.
- Un Titre qui s’affichera par exemple lors de l’ouverture en surimpression de l’image (via Lightbox).
- Légende : texte parfois affiché sous l’image ou en surimpression. Les deux images de la section « Adaptez la taille » par exemple utilisent le champ Légende.
- Texte Alternatif : il s’agit du texte qui sera affiché dans le cas où l’image ne pourrait pas s’afficher. C’est aussi un élément important à renseigner pour un meilleur référencement de vos images dans les moteurs de recherche (ces derniers ne savent pas voir les images).
- Description : celle-ci sera par exemple affichée sous l’image en surimpression via Lightbox.
- Alignement: comme son nom l’indique, pour aligner l’image (ou non) à gauche, droite ou au centre! Mis à part si « Aucun » est choisi, le texte entourera l’image.
- Lier à : permet d’indiquer un lien vers lequel le visiteur sera mené si il clique sur l’image. Utile entre autre pour ouvrir l’image originale en surimpression via lightbox, mais aussi pour envoyer vers n’importe quelle page.
- Taille : choisissez la variante de taille de l’image que vous voulez utiliser dans votre contenu.