Comment optimiser les images pour le web ?

Panneau Autoroute du WebCet article est la version écrite de la présentation que j’ai faite pour le MeetUp du groupe WordPress Toulouse le 6 mars 2018 chez Harry Cow à Toulouse. Voici la carte mentale qui a servi de support à ma présentation.

Il s’agissait de présenter les points importants à connaître quand on utilise des images sur un site web.

Je commencerai par répondre à la question « Pourquoi des images ? », puis il sera questions de vocabulaire concernant les images tant il est vrai que les termes employés au sujet des images peuvent prêter à confusion.

Nous verrons ensuite comment trouver des images, pourquoi et comment diminuer le poids des images, et enfin comment réparer les erreurs d’optimisation des images et de nommage.

Bonus pour ceux qui iront jusqu’au bout de l’article : il sera aussi question de protection des images.

Avertissement : le terme image est employé ici pour parler d’image numérique. C’est-à-dire une image sous forme binaire et non imprimée sur un support physique, que l’on peut qualifier dans ce cas d’image analogique.

Pourquoi des images ?

Comme disait le philosophe chinois, Confucius : Une image vaut mille mots.

En effet, les images donnent une ambiance, un ton, elles permettent une lecture rapide, et illustrent un propos.

Elles permettent d’aérer les textes et de faciliter la lecture. Elle apporte une respiration. Essayez de traverser la piscine sous l’eau sans reprendre d’air…

Les images peuvent être des photos, des icônes, des dessins, ou toutes sortes d’illustrations.

Les images permettent de percevoir le sens plus rapidement que les mots. Un visiteur qui arrive sur un site web est comme un automobiliste sur l’autoroute il doit comprendre très vite l’information qui lui est fournie.

Il serait donc dommage de s’en priver ou d’en faire un mauvais usage.

Cet article va vous permettre d’y voir plus clair.

Utiliser des images, c’est bien, utiliser des images de qualité c’est mieux. Pour cela il faudra maîtriser un peu de technique et avoir du goût. Cette deuxième notion est difficile à définir. Chacun ses goûts, bien sûr, mais le beau est accessible à toute personne qui s’en donne la peine. À vous de vous faire l’œil en observant autour de vous en allant dans les musées, les salles d’exposition, ou lire des livres d’art.

On veillera aussi à conserver une certaine cohérence graphique, qui dans le meilleur des cas aura été définie dans une charte graphique. Faites appel à un⋅e graphiste, c’est son métier de faire des chartes graphiques.

La technique demande de commencer par connaître les termes techniques lié aux images sur le web.

La qualité des images, c’est aussi la netteté (pas d’image pixelisée), le cadrage, la luminosité, le contraste.

Quel vocabulaire pour parler des images ?

© Michael Sowa, un escargot va sauter à travers un cercle de feu.Nous parlerons ici de définition ou dimension, de taille, de résolution, de poids et de format. Ces termes permettent de décrire les caractéristique techniques d’une image. Ils ont un sens plus ou moins clair. Nous allons justement tenter de faire la mise au point.

Définition ou dimensions (pixels x pixels) de l’image

La définition, ou les dimensions d’une image, s’exprime en pixels par pixels (souvent abrégé px). Il s’agit de la largeur (width) et de la hauteur (height) de l’image à l’écran.

Il est important de préciser « à l’écran » car, quand il s’agit d’une image imprimée, on utilisera le système métrique (cm x cm) et l’on parlera alors de la taille de l’image.

Dans le monde virtuel (celui qui s’affiche sur un écran) le système métrique est remplacé par le pixel.

Un écran possède deux caractéristiques qui nous intéressent, sa taille et sa définition :

  • L’une dans le monde réel, la taille de la diagonale (monde réel) est exprimée généralement en pouce (15″, 17″, 20″…).
  • L’autre concerne le nombre de pixels qu’il est capable d’afficher en largeur et hauteur (mode virtuel).

Vous trouverez ci-dessous des exemples de définitions d’écrans :

  • En rapport 4/3 :
    • VGA : 640 x 480
    • SVGA : 800 x 600
    • XGA : 1024 x 768
  • En rapport 16/9 :
    • SD : 720 x 516
    • HD : 1280 x 720
    • Full HD : 1920 x 1080
    • 4K ou UHD : 4096 x 2160

Définitions d'écrans de SD à 4K

Taille (ambigu)

Voici un problème de taille. De quoi parlons-nous ? Dans quel monde ?

Dans le monde virtuel visible à travers un écran, la taille fait-elle référence :

  • Aux dimensions à l’écran (pixels), comme nous l’avons vu plus haut ?
  • Au poids de l’image ? Elle s’exprime alors en octets, comme nous allons le voir après.

Dans le monde réel :

  • La taille sur papier fait référence aux dimensions et s’exprime en mètres.

Poids (octets, Ko, Mo)

Le poids d’une image est un élément important sur le web. Il s’exprime en octet (Byte en anglais). Il peut être multiplié en kilooctets (ko) ou mégaoctets (Mo). En réalité, il faudrait utiliser les kibioctets et des mébioctet, mais c’est un autre débat.

Le poids d’une image est donc important car plus une page web comporte d’images lourdes, plus elle sera longue a charger. C’est ici que la question de l’optimisation des images prend tout son sens.

Nous verrons plus loin comment faire en sorte que le poids des images soit le plus petit possible.

Résolution (ppp ou dpi)

La résolution d’une image c’est le nombre de points (ou pixels) par pouce (inch en anglais). C’est-à-dire combien de points doivent être définit pour une unité de longueur. Plus il y a de points (pixels) dans une unité de longueur plus l’image sera nette à l’impression. À l’inverse, quand il y a peu de point, l’image est floue à l’impression.

Nous allons donc prendre une bonne résolution : ne pas prendre en compte la résolution des images quand il s’agit d’image sur le web. C’est dit.

En effet, la résolution des images sur le web : on s’en fiche !

– Mais on m’a dit que sur le web c’était du 72dpi…

– C’est possible, mais ça ne change rien au poids.

– Ah bon ?

– Lisez-donc cet article qui démystifie la question de la résolution.

Faites le test. Prenez une image, changez sa résolution, pas son échelle, (sous Gimp utilisez « Taille d’impression ») vous verrez qu’elle fait le même poids quelque soit sa résolution.

Comme je suis serviable, j’ai fait le test pour vous. Voici deux images qui font 600x338px. L’une a une résolution de 72dpi l’autre de 300dpi. Leur poids est pour toutes les deux 40,8 Kio (41 745 octets) sur mon ordinateur.

3 éléphants en 72dpi et 40,8ko.
600x338px pour 72dpi et 40,8ko
3 éléphants en 300dpi et 40,8ko.
600x338px pour 300dpi et 40,8ko

Convaincu ? Alors laissez tomber la résolution si l’image n’a pas a être imprimée. Si elle doit être imprimée, alors-là, oui, c’est 300dpi.

Quels sont les formats d’image ?

Là aussi, le mot a plusieurs sens. On appelle type MIME le format numérique de l’image. Il fait référence à la façon dont le fichier est codé. Ces formats sont identifiables par l’extension du fichier : JPG, PNG, GIF, BMP, RAW, NEF…

Il y a aussi le rapport de format qui désigne les proportions du rectangle d’affichage. On parle aussi de ratio, largeur/hauteur (4/3, 16/9…).

Nous trouvons aussi depuis quelque temps le terme « Retina ». Il fait référence aux écrans Apple. Ce sont des écrans qui proposent un affichage à haute densité de pixels. Pour en savoir plus sur ce sujet, je vous recommande la lecture de cet article d’Alsacréations.

Comment trouver des images ?

Maintenant que vous savez parler d’images, vous vous demandez où en trouver.

Moteurs de recherches

Que ce soit Google, Bing, Qwant ou DuckDuckGo, la plupart des moteurs de recherche proposent un mode dédié à la recherche d’images. De nombreux paramètres permettent d’affiner selon la taille, l’orientation, le type de licence, etc.

Une fonction bien intéressante est la recherche par image. Elle permet de chercher une image… à partir d’une image. Pratique, si l’on veut trouver l’origine d’une image ou des images similaires.

Attention tout de même car le type de licence fourni par les moteurs de recherche manque de fiabilité. Vous trouverez plus bas un chapitre sur les droits d’auteur.

Banques d’images (stock images)

Image convenue de personnes au travail
Super ambiance au bureau

Les Banques d’images, appelées aussi stock images, sont la solution de facilité. Elle permettent en effet, de parcourir des images classées par thématique.

Il en existe un grand nombre, des gratuites : PixaBayUnsplash… comme des payantes : istockphotostock.adobe… J’avoue n’utiliser que très rarement les banques payants, principalement car leurs systèmes tarifaire sont trop compliqués ou inadaptés aux petits besoins.

En ce qui concerne la licence vous saurez très facilement ce qu’il en ait avec une banque d’image.

Les banques d’images vont vous fournir de quoi stimuler votre imagination. Les images sont souvent de bonne qualité.

Évitez cependant les images qui dégagent une atmosphère convenue et impersonnelle qui risque de desservir votre site.

Images personnelles

Pour une illustration plus véridique, il vous faudra avoir recours à des prises de vues personnelles. Là aussi attention à la qualité. N’est pas photographe qui veut.

Il vaut toujours mieux avoir recours à un photographe professionnel pour obtenir un travail de qualité.

Comment respecter les droits d’auteur ?

Il est important de dire et de rappeler que ce n’est pas parce qu’une image est sur Internet que vous avez le droit de l’utiliser.

En effet, toute image est soumise à un droit d’auteur. Si aucune licence n’est spécifiée vous devez considérer que l’image n’est pas libre de droit. Vous n’êtes donc pas autorisé à l’utiliser. Il vous faut contacter l’auteur et lui demander une autorisation. Celle-ci devra vous être fournie par écrit.

Il existe un grand nombre de licences. Pour en savoir plus sur les droits d’auteurs, je vous recommande l’article de Wikipedia. Et pour le type de licence cet autre article sur les Licences Creative Commons.

Comment nommer les images ?

Concernant le nommage des images, je ne peux que vous renvoyer à la lecture de mon article : Bien nommer les fichiers média : la solution miracle.

Vous y apprendrez que bien nommer un fichier permet d’améliorer l’indexation par les moteurs de recherche. Cela favorise dont le référencement naturel de votre site.

Des fichiers bien nommés facilitent aussi leur gestion. Vous retrouverez plus facilement les éléments que vous cherchez sur votre ordinateur ou dans les fichiers téléversés dans l’« upload » de WordPress.

Pourquoi et comment diminuer le poids des images ?

Le temps d’affichage d’une page Web dépend de la qualité de la connexion et du poids de la page. Les éléments les plus lourds d’une page sont souvent les images.

Il est donc important de réduire le poids de images au maximum afin de garantir le meilleur temps d’affichage.

haltérophilie tatoué

WordPress et les images

Quand vous placez une image sur un site WordPress, elle est insérée dans la médiathèque. WordPress possède un mécanisme qui va redimensionner automatiquement les images.

En standard elles sont retaillées aux dimensions suivantes :

  • 150×150 (vignette – thumbnail)
  • 300×300 (medium)
  • 1024×1024 (large)

Le format 150×150 retaille l’image pour qu’elle s’affiche en format carré.

Les deux autres format vont réduire la plus grande dimension (hauteur ou largeur) à 300 ou à 1024 l’autre dimension sera mise à l’échelle.

Exemple :

L’image qui illustre le chapitre sur les banques d’images (men-1979261_1280.jpg) a été téléversée avec un format d’origine de 1280×853. WordPress a généré  5 fichiers :

  • men-1979261_1280-150×150.jpg
  • men-1979261_1280-300×200.jpg
  • men-1979261_1280-600×400.jpg
  • men-1979261_1280-768×512.jpg
  • men-1979261_1280-1024×682.jpg

Il ne vous aura pas échappé qu’il y a deux images supplémentaires 600×400 et 768×512

Impact du thème et des extensions

En effet, le thème ou les extensions peuvent eux aussi ajouter leur propre format. Dans le cas présent, il s’agit de dimensions propres à la configuration de mon site.

Par défaut les formats non standards sont caché au moment de choisir le format à afficher. L’extension Simple Image Sizes permet, entre autre, de choisir les format supplémentaires à afficher.

In fine, l’image qui sera affichée ne sera pas celle que vous avez téléversée, à moins qu’elle corresponde exactement à l’une des tailles standard.

Cela ne vous dispense pas de retailler votre image pour qu’elle soit au plus près des dimensions de son utilisation finale.

Les bonnes dimensions

Mètre ruban blancInutile donc d’envoyer une image avec une définition de 3000×2000 pixels qui peut avoir un poids de 3Mo. (Il m’est arrivé de trouver sur un site des images de 7564×5673 pixels pour 24Mo !)

Bien que ces images ne soient pas affichées, elles vont augmenter la taille de votre dossier média. Cela va occuper inutilement de la place sur votre serveur et ralentir sauvegardes et restaurations.

Quelles sont les bonnes dimensions ? me direz-vous.

Ça dépend de l’utilisation que vous allez faire de l’image :

  • Arrière plan : 1920×1280 – 1280×720
  • Loupe : 1024~1200
  • Largeur colonne : 900~1050
  • Illustration : 200~500
  • Vignette : 50~150

Pour connaître la taille affichée d’une image vous avez des outils pour navigateur comme MeasureIt ou les outils de Web Developer.

Ce qu’il faut retenir, c’est qu’il vaut mieux envoyer l’image aux dimensions dans laquelle elle va être utilisée.

Optimisation manuel

Pour retailler et diminuer la taille des images vous pouvez utiliser un logiciel comme Gimp (libre et gratuit), Paint.net, Photoshop ou autre. Tous les logiciels de traitement d’image savent faire cela. Il existe aussi des applications en ligne comme TinyPNG.comkraken.io

Si vous voulez en savoir plus vous pouvez lire cet article sur la diminution du poids des images.

Vous savez tout cela, vous en informez vos utilisateurs, ils sont d’accord puis… ils oublient. Le dossier média se retrouve rempli d’images très lourdes. Le désespoir vous guette.

Optimisation automatique

Heureusement l’écosystème de WordPress fourni de nombreuses extensions qui, bien configurées, vont non seulement optimiser la diminution de poids, mais aussi vous débarrasser des fichiers d’origine trop lourds.

Je vous recommande pour cela EWWW Image Optimizer.

Réglez la taille maximale que vous souhaitez en allant dans Réglages > EWWW Image Optimizer > Réglages de redimensionnement.

Exemple :

J’ajoute dans la médiathèque de WordPress l’image pomegranate-3383814.jpg récupérée sur Pixabay. Elle fait 4288×2848 pixels pour 2,7 Mo.

Capture d'écran : taille image sur ordinateur

 

Mes réglages de EWWW Image Optimizer sont de 1920 x 1080 pixels.

Capture d'écran : réglages EWWW Image Optimizer

L’image d’origine a été retaillée selon mes réglages. Le fichier d’origine qui faisait 2,7 Mo a été supprimé et remplacé par la version 1626 x 1080 pixel pour 223 Ko.

 

Capture d'écran : taille image otpimisée par EWWW Image Optimizer

Ce mécanisme préservera votre médiathèque des fichiers trop lourds et optimisera le poids de vos images.

En ajoutant Bea Sanitize Filename vos fichiers auront également un nom qui respecte les règles de syntaxe, comme expliqué dans l’article Bien nommer les fichiers média : la solution miracle.

Comment utiliser une image sur un site WordPress ?

Maintenant que vous avez trouvé la bonne image et que vous l’avez placée dans la médiathèque de WordPress, vous allez l’insérer dans une page ou un article. pour cela l’interface de l’éditeur de texte de WordPress possède un bouton « Ajouter un média ».

Une fois l’image insérée, en cliquant sur l’image, une barre de menu apparaît.

Capture d'écran : Menu Image WordPress

Elle vous permet de choisir le placement de l’image :

  • Aligner à gauche
  • Centrer
  • Aligner à droite
  • Pas d’alignement (L’image s’insère entre deux lignes de texte).

Le stylo donne accéder aux réglages. Vous pouvez :

  • Ajouter une légende (améliore le référencement),
  • Ajouter un texte alternatif (Indispensable pour l’accessibilité des personnes qui utilisent un lecteur d’écran et le référencement),
  • Changer la taille d’affichage (en choisissant parmi les tailles standards ou en définissant une taille),
  • Insérer un lien à l’image (À utiliser seulement si vous voulez permettre l’affichage de l’image en grand ou s’il est clair que l’image contient un lien),
  • Ajouter un titre (Il s’affichera au survol),
  • Modifier l’original (Permet de réduire ou de recadrer l’image).

La croix supprime l’image de la page.

Comment réparer les images déjà dans la médiathèque WordPress ?

Votre site contient déjà des images trop lourdes et mal nommées ? Tout n’est pas perdu. Les extensions existent qui permettent de faire le ménage.

Outils

EWWW Image Optimizer dont j’ai déjà parlé, possède une fonction qui va optimiser les images déjà présentent.

Media File Renamer vous proposera de modifier jusqu’au nom du fichier qui se trouve dans le dossier « Uploads ».

Le répertoire des extensions (plugins) WordPress contient d’autres extensions qui remplissent les mêmes fonctions.

Comment protéger ses photos ?

Vieux cadenasVous avez l’intention de mettre en ligne une photo dont vous êtes l’auteur et vous craignez qu’elle soit récupérée et utilisée sans votre accord.

Vous souhaiteriez donc savoir comment protéger vos images sur Internet.

Pas de panique, il existe plusieurs technique, mais ce n’est pas forcément une bonne idée. Néanmoins, voyons ce que l’on peut faire.

Watermark ou filigrane

Cela consiste à ajouter votre griffe (logo ou © nom) sur l’image. Vous pouvez faire cela avant la mise en ligne à l’aide d’un éditeur d’image (Gimp, Photosphop, Paint.Net…).

Pour les images déjà en ligne, l’extension Image Watermark possède toutes les fonctionnalités requises.

Restez cependant discret. Il ne faudrait pas que votre marque défigure l’image.

Méta-données : EXIF

Les photos possèdent des données à l’intérieur du fichier. Il s’agit des données EXIF – Exchangeable image file format. Pour les photographies ces données peuvent indiquer le lieu de la prise de vue, et d’autre informations techniques comme la marque de l’appareil photo. Il existe un champ auteur que vous pourrez compléter.

Empêcher le clic droit

Récupérer une image sur un site se fait en général avec Clic droit + Enregistrer l’image sous… Il est possible de bloquer cette fonction. L’extension Simple Image Sizes le fait. Toutefois, un utilisateur averti trouvera facilement comment contourner ce blocage.

Cette approche ne me semble pas bonne. Au lieu de chercher à empêcher la récupération de ses images une autre stratégie consiste à faciliter leur diffusion. Sachant que si vos images sont utilisées c’est parce qu’elles plaisent, cela peut contribuer à diffuser votre nom et votre travail.

En indiquant clairement le type de licence que vous accordez les internautes sauront à quoi s’en tenir.

Par la suite, la fonction recherche à partir d’une image des moteurs de recherche vous permettra de savoir qui utilise votre image. Selon que l’utilisateur soit un particulier, une petite association ou un site avec de gros moyens, il vous sera toujours possible de les contacter et obtenir réparation, si besoin.

Conclusion

Vous l’avez compris, utiliser des images sur un site web est une évidence. Cela facilite la lecture des textes et aide à faire passer les messages.

L’utilisation des images demande de comprendre, si ce n’est maîtriser, les aspects techniques. J’espère que cet article vous aura permis de clarifier les concepts liés aux images.

Le point important à retenir est qu’en utilisant les bonnes extensions vous diminuez les actions à accomplir pour que les images soient optimisées sur votre site Web WordPress.

Pêcheur et canard sur un lac

Laisser un commentaire

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