Images pour le web : quel format choisir ?

9octobre2017

Auteur

GENIOUS Interactive

Sommaire

Rien de tel que d’ajouter des visuels sur son site internet pour attirer plus d’internautes et rendre ses contenus plus attractifs. Toutefois, les images peuvent alourdir les pages et devenir une source de lenteur. Pour diminuer leur poids, il faut avant tout choisir le bon format. Genious Interactive vous dit tout sur les différents formats d’images adaptés au web.

JPEG, GIF et PNG : les 3 formats reconnus

Sur internet, il existe 3 formats d’images reconnus et correctement affichés par tous les navigateurs : le GIF, le JPEG (ou JPG) et le PNG.

Le format GIF

Le format GIF (Graphics Interchange Format) a été mis au point en 1987 par la société américaine CompuServe. Son objectif : permettre de transférer rapidement des images avec un accès internet bas débit.

Les avantages du GIF :

• Très léger

• Compression sans perte

• Gère la transparence

• Peut être animé

Les inconvénients du GIF :

• N’affiche que 256 couleurs (max)

• Ne restitue pas les nuances (lumières, ombres, dégradés)

Quand utiliser le GIF ?

Le GIF est principalement utilisé pour les boutons, les logos, les icônes et les animations. Notez que ce format est tout de même désuet pour de nombreuses applications car on préférera l’utilisation de CSS pour les boutons par exemple ou d’autres formats d’images comme le SVG pour les logos.

Le format JPEG

Adopté dans les années 1990, le format JPEG (Joint Photographic Expert Group) tire son nom du comité de professionnels de l’image qui l’a créé. A cette époque, chaque fabricant d’appareils photos dispose d’un format d’image différent et les conversions de l’un à l’autre sont contraignantes. Le JPEG a été pensé pour être un format de sortie universel.

Les avantages du JPEG :

• Formant standard pour les photographies numériques

• Affiche 16.7 millions de couleurs

• Restitue les images complexes (nuances, dégradés)

• Chargement progressif des images possible

Les inconvénients du JPEG :

• Compression avec perte de qualité, mais réglable

• Ne gère pas la transparence

• Ne peut être animé

Quand utiliser le JPEG ?

Le JPEG s’emploie principalement pour les photographies numériques et les images complexes (nuances, dégradés). Bien compressée et optimisée, un image d’illustration d’article ne pèsera que quelques dizaines de Ko (kilo-octet).

Le format PNG

Le format PNG (Portable Network Graphics) a été créé en 1995 pour offrir une alternative libre au GIF. Il se décline en plusieurs versions dont les plus utilisées sont :

• le PNG 8 (bits) semblable au GIF (256 couleurs, gestion de la transparence) mais plus léger,

• le PNG 24 (bits), similaire au JPEG (16.7 millions de couleurs) mais avec une compression sans perte et un poids de fichier plus élevé.

Les avantages du PNG :

• Compression sans perte

• Plus léger que le GIF (PNG 8)

• Gère mieux la transparence que le GIF (PNG 8)

• Affiche jusqu’à 16.7 millions de couleurs (PNG 24)

Les inconvénients du PNG :

• Ne peut être animé

• N’affiche que 256 couleurs (PNG 8)

• Fichier plus lourd que le JPEG (PNG 24)

Quand utiliser le PNG ?

Le format PNG est principalement conseillé pour les logos avec transparence (PNG 8) et les images complexes si le poids de l’image n’est pas un problème (PNG 24). D’une manière générale, si votre image n’a pas besoin de transparence, préférez toujours utiliser le format JPEG qui sera plus léger.

SVG, le format vectoriel en progression

Le SVG est un format d’image vectoriel basé sur le langage XML. Il a été créé en 1998 par un groupe de travail notamment constitué de IBM, Apple, Microsoft et Xerox. Il offre une taille de fichier réduite puisqu’il ne stocke que les informations décrivant les formes et non chaque pixel comme pour une image Bitmap. Le SVG est géré par une grande partie des navigateurs.

Les avantages du SVG :

• Étirable sans perte de qualité

• Facilement modifiable (changer une couleur par exemple)

• Taille de fichier réduite

• Résolution optimale

• Peut être stylé via le CSS

• Peut être animé via le JavaScript (alternative au Flash)

Les inconvénients du SVG :

• Ne gère que les formes simples (pas les photos)

• Alourdit le code lorsqu’il est directement intégré au HTML

• Nécessite un éditeur graphique dédié (Inkscape, Illustrator)

• Peut présenter des risques de sécurité (lié au XML qu’il contient)

Quand utiliser le SVG ?

Le SVG est préconisé pour les images simples comme les icônes, les graphiques et les logos.

Les formats d’images des géants

Google et Apple se sont également essayés à la création de formats d’image.

WebP et Pik par Google

Le format Webp (Web Picture) a été introduit en 2010 par Google pour proposer une alternative aux formats d’images “vieillissants” (JPEG, GIF). Il permet de diminuer le poids des images de 39% pour offrir une vitesse de chargement considérablement améliorée et une meilleure expérience utilisateur. Aujourd’hui, le Webp n’est toujours pas devenu un standard du web et n’est reconnu officiellement que par Google Chrome et Opera.

Les avantages du Webp :

• Format plus léger

• Meilleure qualité que le JPEG

• Chargement de la page amélioré

Les inconvénients du Webp :

• Manque de compatibilité

• Multiplication des images sur le serveur

• Conversion manuelle

Un nouveau format d’image compressé pour le web nommé Pik serait en projet chez Google, toujours dans l’optique d’améliorer le confort de navigation. On ne sait pas encore ce qui le distinguera du format Webp.

HEIF par Apple

Apple a profité de la sortie du service d’exploitation mobile iOS 11 pour remplacer le JPEG par un nouveau format d’image : le HEIF (High Efficiency Image Format). Son but : économiser de l’espace de stockage sur les iPhone.

LE HEIF permet de réduire de 50% le poids des images et peut, en outre, contenir du texte, des fichiers audio et apporter de la transparence. Il est présent nativement sur tous les iOS 11 et peut être utilisé sur tous les devices grâce à un mode de compatibilité.

Les avantages du HEIF :

• Format léger

• Peut contenir des fichiers texte et audio

• Gère la transparence

Les inconvénients du HEIF :

• Natif seulement sur iOS 11

• Non compatible sur certains systèmes (ex : télévisions)

• Soumis aux royalties donc non supporté par les logiciels libres

Le format n’est qu’un des critères permettant d’optimiser les images pour le web. Pour plus d’astuces, n’hésitez pas à lire notre article “Vitesse de chargement : pourquoi et comment l’améliorer ?”