Fleche retour aux articles de blogVous avez dit "formats d’images" ?

Manipuler des images pour le web n'est pas une tâche simple. Lorsque l'on partage nos dernières photos de vacances sur les réseaux sociaux, on se pose rarement la question du format sous lequel on enregistre et envoie nos images. Mais dès qu'on s'intéresse de plus près aux différences de chaque format d'image numérique, on réalise que ce choix peut être crucial : plus de performances, une meilleure qualité, la possibilité de superposer des images... Quelle que soit la priorité un type d'image est plus propice que les autres et on vous explique tout ici !

Mots clés :

web

optimisations

performances

Qu'est ce que c'est ?


Si je vous parle de format d’image, et que vous ne travaillez pas spécialement dans le domaine du numérique, il est possible que vous pensiez d’abord poster, polaroïd ou carte postale.

Dans le monde du numérique, les formats désignent quelque chose d’un peu différent : le type de fichier. Vous en connaissez sûrement certains de noms (PNG, JPEG, GIF…), mais savez vous ce qui les différencient les uns de autres ?

Voici une liste non exhaustive des formats d’image principaux, et de leurs spécificités :

BMP

Une image BitMap est une image non compressée et qui contient toutes les données nécessaires pour chaque pixel qui en fait partie. Ce format contient donc énormément d'informations mais permet de s'assurer que l'image aura toujours la même qualité, peu importe le nombre de partages, étant donné qu'à chaque nouvelle sauvegarde le fichier n’est pas compressé.

JPEG

Le format le plus connu signifie Joint Photographic Experts Group à été créé en 1992. Le principe de JPEG, c’est de pouvoir compresser la taille des images de la meilleure manière et en fonction de la qualité finale voulue. Soit la compression est minime et la taille de l'image restera assez importante soit la qualité sera réduite pour produire une image beaucoup plus petite.

PNG

Portable Network Graphics , ce format à été créé en 1995 et sa différence principale avec celui cité précédemment est la possibilité de rajouter une configuration Alpha. Nous pouvons donc jouer sur la transparence de l’image, créer des vides ou rendre des sections plus ou moins opaques. Cela permet notamment d'ajouter des ombres dans l’image.

GIF

Graphics Interchange Format, ce format est un peu à l’écart des autres. Son objectif : créer des animations basées sur des images avant que les formats vidéos n'existent vraiment sur internet, en 1987 !. Il permet de prendre plusieurs petites images et de les compresser (de façon plus ou moins intense) afin de réaliser une vidéo répétée.

RAW

Ce mot signifie "cru", le principe est de recevoir un maximum d'information à partir du capteur d'un appareil photo numérique pour ensuite avoir la possibilité de modifier les éléments de manière précise. Ceci permet de faire des retouches sans faire baisser la qualité de l'image. Le point négatif de ce format est la taille des fichiers, qui seront par définition très lourds car très détaillés.

WebP

WebP est plus récent. Développé par Google en 2010 il a pour but de réduire la taille des images. Il donne la possibilité de déterminer le pourcentage de la qualité voulu par rapport à une image d'origine. Il prend en compte les animations, le canal alpha et permet de transformer la plupart des types d'images que nous venons de voir : JPEG, GIF, PNG.

En moyenne, lors de la transformation d'une image PNG en WebP sans perte de qualité, la taille finale sera réduite de 26%. Pour les JPEG cette réduction se situe entre 25% et 34%.

L’intérêt de WebP est clair : ll permet de réduire la taille des images servies sur internet sans forcément perdre en qualité. L’objectif de Google est d’améliorer les performances et de réduire les temps de chargement des pages internet. Ce format permet d'avoir une image de bonne qualité sans qu’elle nécessite trop de place.

Lequel choisir ?

Si les photographes professionnels ont tendance à travailler avec des images au format RAW pour leur qualité, ces images restent très lourdes (généralement plusieurs méga-octets). Or, sur Internet la qualité est importante mais n’a souvent pas la priorité face à la performance.

L’objectif principal sur le web est de réduire au maximum la taille des ressources afin de diminuer au maximum les temps de chargement des pages.

Par exemple : Plusieurs de nos sites comme Stichting Nepal, Nepal Federatie et International Nepal Alliance sont accessibles depuis des endroits où la connexion internet est parfois très lente voire même inexistante. C’est pourquoi nous devons adapter nos images, qui sont généralement les ressources les plus coûteuses sur un site web.

Comment ?

Comment allons nous faire pour transformer les images que nous manipulons couramment (PNG, JPEG) dans un format plus moderne (WebP)? Beaucoup de logiciels ne permettent pas d'enregistrer dans ce nouveau format. Il est possible que vous ne vous soyez d’ailleurs jamais posé la question du choix du format lors de l’enregistrement d’une image.

C'est pour cela que nous avons créé un convertisseur d'image pour PHP 7.4. Le détail est disponible sur le blog de Dennis ou publiquement sur Packagist.

Il permettra à l'utilisateur de ne pas se poser de question quant au type d'image. Lorsqu'un utilisateur naviguera sur le site internet, le format d'image s'adaptera automatiquement.

Pour terminer

Les problématiques de format d'images sont connues depuis longtemps dans le monde du numérique, mais elles restent encore souvent obscures pour le grand public. Les derniers formats performants, comme WebP, ne sont malheureusement pas encore un réflexe pour tous les acteurs du web. Pour Codebuds il est très important d'optimiser les performances des sites et de les rendre le plus accessibles possibles. C'est pour cela que nous crééons et partageons des solutions open source sur le sujet, afin que tout le monde puisse en profiter.