Résumé de section

  • Commençons par nous intéresser aux aspects techniques des images : leur format. En effet, chaque format d'image a ses spécificités qui auront une incidence en termes d'accessibilité.

    7 minutes de lecture

    • Les formats d'image les plus courants

      Vous utilisez probablement des images dans vos formations pour expliquer une notion, schématiser ou tout simplement pour décorer. Mais utilisez-vous tout le temps un format d'image adapté ?

      Un format d'image est une façon de stocker et d'organiser les informations nécessaires pour afficher une image sur un écran. C'est comme une sorte de "langage" utilisé par les ordinateurs pour comprendre et afficher une image. Chaque format a ses propres règles et caractéristiques pour décrire comment les pixels et les couleurs sont organisés, comment les données sont compressées (réduites en taille) et comment elles peuvent être utilisées.

      Regardons plus en détail ci-dessous les caractéristiques de trois formats répandus : le JPG (ou JPEG), le PNG et le GIF.


      En résumé, le JPG est un format adapté pour les photographies réalistes avec beaucoup de détails, tandis que le PNG et le GIF sont plus adaptés aux illustrations ou aux images avec des parties transparentes.

      Le JPG est souvent plus petit en taille, ce qui le rend plus rapide à charger, tandis que le PNG et le GIF offrent une meilleure qualité d'image, mais occupent plus d'espace.

    • La conversion du format d'image

      Techniquement, rien ne vous empêche de passer d'un format à un autre en convertissant votre fichier image. Beaucoup d'outils en ligne vous permettent de faire cela, à l'image du site iLoveIMG, ou encore des outils hors ligne comme Microsoft Paint, PowerPoint, ou l'application Aperçu sur Mac.

      Il peut être opportun par exemple de convertir une image PNG en JPG pour réduire le poids du fichier, car le JPG utilise une compression avec perte ce qui permet de réduire la taille du fichier.

      Retenez toutefois que vous pouvez perdre des fonctionnalités essentielles en changeant de format.

      Le JPG compresse le fichier, le PNG gère la transparence et le GIF aussi avec en plus la possibilité de faire des animations.

      Extrait de Introduction aux images numériques. [Vidéo]. Canal-U. https://www.canal-u.tv/85417

    • Définition et résolution d'image

      La définition et la résolution sont deux aspects complémentaires qui ont un impact sur la qualité et la taille du fichier.

      Définition

      La définition est généralement exprimée par la largeur et la hauteur de l'image en termes de pixels (px).

      Par exemple, une image de 1920 x 1400 pixels indique une définition de 1920 px de largeur sur 1400 px de hauteur.

      Les définitions considérées comme "haute définition" peuvent varier en fonction du contexte, mais une définition couramment acceptée pour les images haute définition est généralement à partir de 720 pixels de hauteur ou plus. 

      Représentation d'une image sous forme de grille illustrant le nombre de pixels composant une image.
      Gustave Courbet, Public domain, via Wikimedia Commons
      Résolution

      La résolution fait référence au nombre de pixels par unité de mesure physique, généralement exprimée en pixels par pouce (ppp ou dpi en anglais). Un pouce équivaut à environ 2,54 centimètres.

      Par exemple, si une image a une résolution de 300 ppp, cela signifie qu'il y a 300 pixels alignés sur une ligne d'un pouce dans l'image.


      Illustration sous forme de grille de 300 pixels contenu dans un pouce (2,54 cm).

      Une résolution élevée contribue à une meilleure qualité d'impression ou d'affichage, en particulier pour des supports physiques de petite taille comme des photos imprimées. En général, pour des images destinées à être affichées sur des écrans, une résolution de 72 ppp est souvent suffisante.

      En résumé, plus une image a une définition élevée, plus elle contient de pixels, plus elle peut s'afficher en grand. De même, plus une image a une haute résolution, plus elle a de pixels dans une unité de mesure, meilleure est la qualité d'impression ou d'affichage.

      De façon logique, augmenter la définition et la résolution d'une image accroît la quantité de pixels et, par conséquent, la taille du fichier. Cependant, cette augmentation peut entraîner des problèmes d'accessibilité en termes de temps de chargement, ce qui n'est pas recommandé d'un point de vue de la sobriété numérique. Ainsi, il est souvent nécessaire de compresser les fichiers images pour réduire leur volume et les rendre plus rapides à charger. C'est ce que nous allons explorer à présent.

    • La compression du format d'image

      Lorsque l'on construit un cours, il est fréquent de réutiliser des images issues de sites ou d'autres documents. Prenons l'exemple de l'image JPG ci-dessous téléchargée depuis le site Freepik.

      Il s'agit d'une photographie de haute qualité :

      • sa définition est de 4500  ×  3004 px ;
      • sa résolution est de 300 ppp ;
      • sa taille est de 4,5 Mo.


      Photographie d'un papillon en haute définition.

      Les caractéristiques de cette photo ne sont pas adaptées pour un usage sur le web, plutôt pour un support imprimé. Telle que vous la voyez ici, elle a été réduite pour économiser du temps de chargement mais vous pouvez la visualiser en taille réelle dans un nouvel onglet en cliquant sur le lien ci-dessous.

      Visualiser la photo en taille réelle

    • Une image haute définition n'est quasiment jamais nécessaire (à part si vous souhaitez l'imprimer). Il est donc important de réduire la taille des images pour accélérer leur affichage, tout en préservant une qualité convenable pour qu'elles restent lisibles.

      Comme pour la conversion, de nombreux sites ou logiciels existent pour compresser et réduire la taille des images. Ci-dessous par exemple, le rendu de la même image compressée à partir du site Img2Go. 

      L'échelle a été réduite de 80% :

      • sa définition est de 450 × 300 pixels ;
      • sa résolution est de 300  ppp ;
      • sa taille est de 18 Ko.


      On constate que la place occupée par l'image est plus petite, ce qui est logique puisque nous avons réduit le nombre de pixels. 

      Si l'on force l'image à s'afficher en plus grand, un effet de pixellisation apparaît, nuisant à la qualité de l'image. Vous pourrez vous en rendre compte en cliquant sur l'image pour l'agrandir.

    • La même photographie compressée à 99.61%.
      Cliquez sur l'image pour l'agrandir

    • Il faut donc jouer sur la réduction du nombre de pixels par rapport à la place que vous voulez que l'image occupe sur votre page ou support.

    • Et la résolution ?

      Il est possible de réduire la définition d'une image (donc sa taille) sans modifier sa résolution. Toutefois il est souvent recommandé de redimensionner une image en modifiant à la fois la définition et la résolution pour maintenir une qualité d'image optimale. Les logiciels d'édition d'images permettent généralement de redimensionner une image en ajustant ces paramètres de manière proportionnelle pour éviter une distorsion ou une perte de qualité excessive.

      Dans l'exemple ci-dessous, l'image d'origine d'une résolution de 300 ppp est réduite à 96 ppp. On constate que le logiciel adapte automatiquement la définition de l'image pour éviter l'effet de pixellisation. 

      Description dans la légende ci-dessous.

      Modification de la résolution de l'image de 300 ppp à 96 ppp sur Inkscape.

      Si vous utilisez des logiciels d'image, pensez à adapter la résolution en fonction de la taille que l'image est destinée à occuper pour éviter d'alourdir inutilement le poids de votre fichier.

    • Les images vectorielles

      Il existe en fait deux grands types d'images : les images matricielles que nous venons de voir (JPG, PNG, GIF...) et les images vectorielles.

      Le SVG (Scalable Vector Graphics) est un format vectoriel qui présente plusieurs avantages : il permet de redimensionner les images sans perte de qualité, offrant une netteté constante sur tous les écrans. Il prend aussi en charge l'interaction et l'animation, ce qui rend les images plus dynamiques et engageantes. C'est un choix idéal pour créer des graphiques, des illustrations et des logos. C'est aussi un format qui peut être bien plus léger que les formats matriciels.

      Comparaison entre une image matricielle pixellisée et une image vectorielle nette.
      File:Bitmap VS SVG.svg: Yug, modifications by 3247 / *derivative work Tiger66, CC BY-SA 2.5, via Wikimedia Commons

      Ci-dessous, un exemple de graphique au format SVG issu du site Electric Microscopy Data Bank (EMBD). Ce format est ici parfaitement adapté : il peut être lu par les navigateurs web, il est très léger (seulement 26 Ko) et peut être agrandi sans effet de pixelisation.

      Graphique au format SVG montrant le nombre d'entrées unique et cumulatif de la plateforme de Bio Informatique EMDB.
      Une version SVG interactive est disponible sur la page des statistiques de l'EMDB.


      Les formats vectoriels tels que SVG, EPS, ou AI, sont moins connus du grand public et peuvent nécessiter des compétences informatiques plus poussées. Des logiciels de dessin assisté par ordinateur sont nécessaires pour les manipuler. Si vous souhaitez en apprendre plus, vous pouvez consulter cette intiation au logiciel Inkscape.