Les meilleurs formats pour chaque type de média web pour un site ultra-performant

Quand on parle de performance web, on pense souvent au code, aux serveurs ou au cache.
Mais soyons honnêtes : ce qui plombe nos sites, ce sont surtout les médias — images, vidéos, polices, et autres fichiers bien lourds.

Alors, si tu veux que ton site s’affiche à la vitesse de l’éclair (et faire plaisir à Google et à tes visiteurs), il faut choisir les bons formats. Voici un guide complet, mis à jour pour 2025 (presque 2026) , avec ce qu’il faut vraiment utiliser aujourd’hui.

Images : le nerf de la guerre

Les images représentent souvent plus de 50 % du poids total d’une page. Autant dire que c’est le premier chantier à optimiser.

Le trio gagnant : AVIF → WebP → JPEG

• AVIF : c’est le top du top. Une image AVIF peut être jusqu’à 50 % plus légère qu’un JPEG à qualité égale.
  Supporté par tous les navigateurs modernes (Chrome, Safari, Firefox, Edge), il gère aussi la transparence et les images HDR. Utilise-le pour tes photos et visuels principaux.
• WebP : le compromis parfait. Très bon taux de compression, animation et transparence incluses.
  En 2025, tout supporte le WebP. Il reste le fallback idéal si ton outil ne gère pas encore l’AVIF.
• JPEG : le bon vieux pote. Toujours utile en dernier recours, notamment pour les navigateurs antiques ou certains CMS qui ne convertissent pas automatiquement.

Cas particuliers

• PNG : uniquement pour les images avec transparence ou éléments précis (UI, icônes).
  Mais sinon, préfère du WebP lossless.
• SVG : ton meilleur ami pour les logos et icônes. C’est vectoriel, léger, scalable et super net.
• GIF : stop. Sérieusement, remplace tes GIFs par une mini-vidéo MP4/WebM, c’est 10 fois plus léger pour le même effet.

Astuce dev : utilise la balise pour proposer plusieurs formats, et pense au loading="lazy" pour charger les images hors écran.

Vidéos : belles, mais pas lourdes

Une vidéo non optimisée, et boum : 20 Mo dans les dents.
Voici la bonne combinaison :

Les formats à connaître

• MP4 (H.264) : le standard universel. Compatible avec absolument tout, du vieux navigateur à l’iPhone flambant neuf.
• WebM (VP9 ou AV1) : le futur. Compression top, qualité nickel, et supporté par les navigateurs modernes. Encode tes vidéos en MP4 + WebM, et laisse le navigateur choisir le bon format.
• HEVC (H.265) : excellent codec, mais limité côté compatibilité (surtout Apple).
• GIF animés : non, vraiment. Stop. Fais des boucles vidéo en autoplay loop muted.

Astuce dev : Pense à l’attribut preload="metadata" sur tes vidéos pour éviter de charger le fichier complet avant lecture. Et si tu fais du streaming, regarde du côté de HLS ou DASH.

Polices : petites mais coûteuses

Les polices web peuvent ralentir le rendu du texte, surtout si elles sont lourdes ou mal chargées.

À utiliser absolument

• WOFF2 : le format moderne, compressé avec Brotli.
  En moyenne 30 à 40 % plus léger que WOFF ou TTF, et supporté par tous les navigateurs modernes.
  C’est le seul format dont tu as vraiment besoin en 2025.

Les autres formats (à oublier)

• WOFF : l’ancien standard, utile uniquement si tu cibles des navigateurs préhistoriques.
• TTF/OTF : trop lourds pour le web.
• EOT / SVG fonts : mort et enterré.

Astuce dev : Déclare tes polices avec font-display: swap; pour éviter le “flash de texte invisible”. Et n’importe pas 10 variantes : 2 ou 3 suffisent largement.

Audio : léger, mais efficace

Côté son, la guerre des codecs est finie depuis longtemps.

Les bons choix

• AAC : excellente qualité, petit poids, support universel. Le meilleur rapport qualité/performance.
• MP3 : vieux mais increvable. À garder en fallback pour compatibilité maximale.
• Ogg / Opus : top qualité, mais pas compatible avec Safari — donc en bonus, pas en principal.

Astuce dev :
Ne monte pas trop en bitrate — 128 à 192 kbps suffisent pour du streaming web.

Fichiers téléchargeables : à ne pas négliger

PDF

Toujours utile, mais souvent bien trop lourd.
Avant de le mettre en ligne :

• compresse les images,
• sous-ensembles les polices,
• active le mode “Fast Web View”.

Et si le contenu peut être affiché en HTML, fais-le : c’est bien plus rapide.

ZIP

Pratique pour regrouper des fichiers.
Mais pour le chargement des pages, préfère la compression côté serveur (GZIP/Brotli).
Le ZIP, c’est pour le téléchargement, pas pour le rendu.

Résumé rapide

Optimiser ses médias, ce n’est pas juste une question de taille :
c’est une question d’expérience utilisateur, de SEO, et d’éco-responsabilité.

En 2025, la règle d’or est simple : AVIF, WebM, WOFF2, AAC, et un peu de bon sens.

Fais ça, et ton site passera Lighthouse comme une fusée.