Pourquoi passer au WebP

Le format WebP réduit fortement le poids des images à qualité équivalente. Résultat : pages plus rapides, meilleure expérience sur mobile, scores SEO (Core Web Vitals) en hausse.

• Jusqu’à 80–90 % de poids en moins par rapport à PNG/JPG équivalents.
• Moins de bande passante, affichage plus fluide sur réseaux lents.
• Supporté par tous les navigateurs modernes.

L’outil Webful

Sur webful.fr, l’outil « Convertisseur WebP Pro » délivre automatiquement :

• 4 résolutions prêtes pour le responsive : 1920 px, 1200 px, 600 px, 400 px.
• Un ZIP contenant vos images optimisées (/images/webp/).
• Un exemple HTML <picture> prêt à copier/coller.
• Un README avec l’installation en 3 étapes.

Confidentialité : vos images sont supprimées immédiatement après génération. Aucune donnée n’est conservée (RGPD).

Mobile First : pourquoi c'est important :

mobile first consiste à concevoir un site d’abord pour les écrans de smartphone, avant de l’adapter aux formats plus grands.
Google analyse désormais en priorité la version mobile d’un site pour évaluer sa qualité et sa rapidité : un site lent ou mal adapté sur mobile sera pénalisé, même s’il est parfait sur ordinateur.
D’où l’importance d’un design simple, d’images optimisées et d’un CSS responsive (@media) pour garantir un affichage fluide et rapide sur tous les appareils.

Intégration — 3 étapes

1. Uploadez le dossier /images/webp/ à la racine de votre site.
2. Copiez le code ci-dessous dans votre page.
3. Remplacez photo-*.webp par vos fichiers et adaptez l’attribut alt.

<picture>
  <source
    type="image/webp"
    srcset="/images/webp/photo-1920w.webp 1920w,
            /images/webp/photo-1200w.webp 1200w,
            /images/webp/photo-600w.webp 600w,
            /images/webp/photo-400w.webp 400w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1200px) 600px,
           (max-width: 1920px) 1200px,
           1920px">
  <img src="/images/webp/photo-600w.webp"
       alt="Description de votre image"
       loading="lazy">
</picture>

Ce bloc <picture> permet au navigateur de sélectionner automatiquement la meilleure taille d’image selon l’écran.

Bonnes pratiques

• Renseignez un alt descriptif pour l’accessibilité.
• Laissez srcset et sizes choisir la taille adaptée selon l’écran.
• Utilisez loading="lazy" pour les images hors écran initial.
• Des noms de fichiers clairs aident l’organisation (ex. terrasse-bois-nantes-1200w.webp).