Quel format d'image choisir pour vos publications ?

• SOMMAIRE
• Les caractéristiques
• Images matricielles | vectorielles
• Images fixes | animées
• Images avec arrière-plan transparent | intégrale
• Des fichiers compressés
• L'utilisation
• Sur votre site
• Sur les réseaux sociaux
• Un dernier mot

Il existe de nombreux formats propriétaires. Ceux-là, je les ignore volontairement car, généralement liés à une application, ils ne servent qu'à sauvegarder les données.

Les fichiers image qui m'intéressent ici sont utilisables sur tous les navigateurs. Ils portent les extensions : 

• GIF (Graphics Interchange Format) ;
• JPEG (Joint Photographic Expert Group) ;
• PNG (Portable Network Graphics) ;
• SVG (Scalable Vector Graphics).

Les caractéristiques

Images matricielles | vectorielles

Les images matricielles sont formées de points de différentes couleurs appelés pixels. L'image de votre téléviseur, de votre écran d'ordinateur, vos photos sont construites sur ce principe. Cela concerne les formats GIF, JPEG et PNG.

Les images vectorielles sont composées d'objets géométriques individuels (ligne droite, rectangle, cercle, arc de cercle, etc) ayant diverses caractéristiques (couleur du bord, couleur du fond, hauteur, largeur, etc) et subissant diverses transformations (déplacement, agrandissement, rotation, etc). Cela concerne le format SVG.

Construites point par point, les images matricielles nécessitent un logiciel de traitement de photo ou de dessin pour être modifiées.
L'éditeur en ligne Pixlr en est notamment un bon exemple.

Les images vectorielles, constituées d'une série d'instructions, peuvent être modifiées avec un simple éditeur de texte.
Bien sûr, à la condition que l'image ne soit pas trop complexe et de maîtriser le langage de description SVG. Pour les autres, vous avez par exemple Inkscape, un logiciel de dessin vectoriel professionnel pour GNU/Linux, Windows et macOS.

Images fixes | animées

Naturellement, les quatre formats permettent d'afficher des images fixes. 

En assemblant une série d'images, le format GIF autorise des animations image par image tout comme un folioscope.

Le format SVG, quant à lui, produit des animations en effectuant des transformations sur les éléments géométriques de l'image.

Dans les deux cas, cela fonctionne très bien pour des animations simples et courtes. 

Images avec arrière-plan transparent | intégrale

Toutes les images, quelque soit leur format, sont affichés dans un cadre rectangulaire.

Les formats PNG et SVG peuvent avoir un arrière-plan transparent. Elles peuvent donc être superposées plus facilement. 

La 1ère image en exemple englobe tout le cadre et rien de ce qui est dessous ne sera visible. 

Pour la deuxième, il s'agit là également d'une image au format png sans arrière-plan transparent. Avec un arrière-plan transparent, la petite fille ne serait plus entourée du quadrillage gris et blanc. Ce dernier serait remplacé par le fond de la page.

Des fichiers compressés

Plus une image est qualitative, plus elle est volumineuse, plus il est long de la charger à l'écran. Et les moteurs d'indexation tels que Google n'aiment pas beaucoup cela.

Il existe divers algorithmes de compression qui permettent de réduire la taille d'une image mais ils ont tous des avantages et des inconvénients :

• GIF utilise l'algorithme LZM sans perte de données mais avec une efficacité relative ; 
• JPEG est plus efficace mais les informations visuelles inutiles sont supprimées donc plus la compression est importante plus la qualité de l'image est réduite ;
• PNG bénéficie d'un algorithme de compression plus efficace que le premier tout est restant moins performant que le second, mais sans perte de données.

Le format SVG n'étant pas compressé, plus les formes seront simples, plus le fichier sera réduit. 

L'utilisation

GIF : ce format est un peu passé de mode mais il reste utilisé sur les réseaux ou les systèmes de messagerie pour ajouter sur une publication une animation tournant en boucle.

JPEG : ce format reste largement utilisé pour afficher une image peu volumineuse mais ne nécessitant pas une qualité très élevée.  

PNG : un peu moins compressé que le format précédent, celui-ci autorise la superposition d'images grâce au fond transparent. Cela évite d'avoir obligatoirement un fond de page de la même couleur que le fond de l'image.

SVG : ce format est très efficace pour afficher des illustrations plus simples que des photos hautes résolutions. Le contenu du fichier peut être intégrés directement dans le code HTML de la page web. L'image peut alors subir des transformations par le langage de description CSS ou le langage de programmation Javascript.

Sur votre site

Sur votre site, vous pouvez utiliser ces quatre formats, quelque soit le navigateur.

Cependant, il est possible de créer des failles de sécurité si vous autorisez le téléchargement d'images SVG. C'est pour cela que, par défaut, ce format n'est pas autorisé sous Wordpress. Vous devez installer un plugin pour en bénéficier.

Attention aux images jpeg ou png que vous téléchargez à partir d'une banque d'image, outre le fait qu'il faut bien vérifier à chaque fois les conditions d'utilisation, ces images sont généralement en haute résolution... même compressées. Il faut donc les compresser encore un peu plus avant de les intégrer à votre site. Ceci pour accélérer le chargement de vos pages.
Un outils en ligne très pratique pour cela : compressor.io

Hexa CMS dispose naturellement d'un gestionnaire d'image :

• fournissant une liste de sites où vous trouverez des images, des icônes, des illustrations libres de droit ou non ;
• compressant automatiquement les images que vous téléversez sur votre serveur selon la taille voulue.

Sur les réseaux sociaux

Toujours pour des raisons de sécurité, le format SVG n'est pas autorisé.

Un dernier mot

Un dernier mot concernant le format WEBP.

Créé par Google, destiné à remplacer tous les autres formats pour améliorer encore plus le chargement des pages web, il coche toutes les cases :

• il compresse avec pertes ou sans pertes ;
• il prend en charge les images animées ;
• il autorise la transparence ;

mais il reste encore peu utilisé faute d'être intégré dans tous les navigateurs ni dans Wordpress par défaut.

Je n'en parle donc pas plus ici mais il ne fait pas de doute que ce sujet évoluera et qu'il fera alors l'objet d'un article complet.

Sur ce, bien à vous !

© Images : pngegg.com - giphy.com - pexels.com