Les Formats d'Image

Pourquoi c'est important

Pourquoi ?Un mauvais format = soit un fichier trop lourd qui plombe votre site, soit une qualité degradee qui ruine votre design. Savoir choisir, c'est gagner en perf ET en qualité.

Le framework

1. 01

   JPG, Photo et images complexes

   Compression lossy, fichiers legers, ideal pour les photos. Pas de transparence. Montez la qualite a 80-85% : en dessous, les artefacts apparaissent.

2. 02

   PNG, Transparence et nettete

   Compression lossless, transparence alpha, parfait pour les logos et elements UI. Fichier plus lourd que JPG, a utiliser seulement quand la transparence est necessaire.

3. 03

   SVG, Vecteur pur

   Icones, logos, illustrations simples. Scalable a l'infini, ultra-leger, manipulable en CSS. C'est du code, pas une image. Toujours privilegier pour les elements graphiques simples.

4. 04

   WebP, Le meilleur des deux mondes

   30% plus leger que JPG a qualite egale, supporte la transparence. Support navigateur quasi-universel maintenant. Votre format par defaut pour le web.

5. 05

   AVIF, Nouvelle generation

   Encore plus leger que WebP, qualite superieure. Support en croissance. Utilisez-le en source prioritaire avec WebP en fallback.

6. 06

   GIF, Animation simple uniquement

   256 couleurs max, lourd pour ce que c'est. Reservez-le aux micro-animations. Pour le reste, une video MP4 legere sera toujours plus performante.

7. 07

   Responsive images

   srcset et sizes en HTML, picture element pour les formats multiples. Servez la bonne taille au bon ecran. Un mobile n'a pas besoin d'une image 4K.

Pour aller plus loin