Gestion des Images

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.

murs-brut-2

Partagez cette page si vous la trouvez utile !

000

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

Comme dit au-dessus, il est inutile d’uploader une image immense si elle est destinée à être affichée seulement en petite taille. Or, par exemple, les images produites par les appareils photo numériques d’aujourd’hui font la plupart du temps plusieurs milliers de pixels de large et de haut! Même celles produites par les téléphones portables (le capteur d’un Iphone 4 délivre des images brutes de 2592 x 1936 px, le 4S, 5 ou 6 bien plus encore!) sont la plupart du temps nettement plus grandes que ce que peuvent afficher nos écrans d’ordinateur. Vous me direz: « Mais quel est l’intérêt dans ce cas de faire d’aussi grandes images? ».

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).

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 !

Un des intérêts, donc, de produire des images contenant beaucoup de pixels, est de pouvoir imprimer sur papier en conservant une qualité suffisante.

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!

Dans tous les cas, ne laissez pas le navigateur adapter la taille de l’image automatiquement, cela ne fera qu’alourdir vos pages et allongera les temps de chargement! De plus, les navigateurs capables de redimensionner les images à la volée le faisant bien plus mal qu’un logiciel de graphisme, le résultat ne sera pas beau à voir…

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.

Il faudra donc optimiser une image à importer pour que sa taille soit celle que l’on voudra afficher au maximum. Par exemple, sur le présent site, les images qui s’affichent en surimpression quand vous cliquez une miniature font au maximum 900 pixels de large. Je les ai donc réduit avant de les uploader, et c’est WordPress qui a automatiquement généré les miniatures.

Partagez cette page si vous la trouvez utile !

000

Quels formats de fichiers image utiliser

Les trois formats les plus courants sur internet sont le .gif, le .png et le .jpg. Les utiliser à bon escient permettra d’optimiser la taille de vos fichiers!

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

A moins que vous ne soyez déjà un as de la retouche d’image dans Gimp ou Photoshop, vous n’avez pour le moment certainement pas besoin des milliards de fonctionnalités de ces derniers.

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!

Vous trouverez les liens vers les sites où vous pourrez télécharger ces logiciels sur la page ressources de ce site.

ALLER SUR LA PAGE RESSOURCES

Partagez cette page si vous la trouvez utile !

000

Gestion des images dans WordPress

WordPress possède un outil d’importation et de gestion des images très pratique, que l’on retrouvera dans les diverses sections de création de pages, posts, etc. Cet outil supporte le drag&drop (glissé-déposé) de fichiers, et est capable de générer automatiquement différentes miniatures de l’image importée.

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.

Notez que les dimensions que vous spécifierez ici sont des dimensions maximum! Cela veut dire que, WordPress créant les miniatures en gardant les proportions, la plus grande dimension de l’original sera ramené à la valeur choisie.

Seul le format Thumbnail peut être forcé à des dimensions systématiques. Dans ce cas WordPress retaillera la miniature (Crop) plutôt que de la déformer.

Enfin, sachez que certains thèmes ajoutent d’autres règles à cette section, il peut être préférable de les laisser gérer tout cela.

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.

Lorsqu’un fichier est importé via cet outil, WordPress le stocke automatiquement sur le serveur (dans le dossier wpcontent/uploads/… et par date d’importation, à moins que vous ne l’ayez configuré autrement), puis apparaissent une série d’options à son sujet.

Une fois le fichier uploadé, en cliquant dessus vous pourrez lui ajouter quelques informations génériques :

  • 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.

Vous avez également la possibilité de modifier l’image elle-même en cliquant sur « Modifier l’image » (recadrage, rotations, changement de taille, …), mais je vous recommande de ne pas le faire ici. En effet, l’outil produit des images moins bonnes que ce que vous pourrez obtenir avec les utilitaires décrits plus haut sur cette page. Il vaut vraiment mieux tailler et optimiser les images avant de les uploader.

Partagez cette page si vous la trouvez utile !

000

Insérer une image dans une page ou un post WordPress

Pour insérer une image dans la zone « content » d’une page ou d’un article, on utilisera, comme indiqué ci-dessous, la fonction « Ajouter un Média » dans l’éditeur de page/article. Comme cette zone est d’abord une zone de texte, il faudra placer au préalable le curseur au début de la ligne sur laquelle vous voudrez afficher l’image (vous aurez ensuite l’option d’aligner cette image à droite, au centre ou à gauche, le texte venant « entourer » celle-ci).

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.

Dans tous les cas, une fois l’image importée ou l’URL indiquée, vous aurez à peu de choses près les mêmes options pour insérer celle-ci. Voici le détail de ces options :

  • 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.

Voilà, il ne reste plus qu’à cliquer sur « Insérer dans l’article / page », puis à pré-visualiser le résultat sur votre site !

D’autres infos très utiles sur WordPress se trouvent sur cette page :

Pages, Articles, Menus et Widgets dans WordPress

La page de ressources de ce site pourrait aussi vous être utile :

ALLER SUR LA PAGE RESSOURCES

Partagez cette page si vous la trouvez utile !

000