Why switch to WebP

WebPformat greatly reduces the weight of images of equivalent quality. The result: faster pages, better mobile experience, higher SEO scores (Core Web Vitals)

• Up to 80–90 % less weight than equivalent PNG/JPG
• Less bandwidth, smoother display on slow networks.
• Supported by all modern browsers.

L’outil Webful

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

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

Confidentiality: your images are deleted immediately after management. No data is retained (RGPD).

Mobile First: why it's important

mobile first means designing a site first for smartphones, before adapting it to larger formats.
Google now gives priority to the mobile version of a site to assess its quality and speed: a slow or poorly adapted site on mobile will be penalized, even if it is perfect on the computer.
Hence the importance of simple design , optimized images and responsive CSS (@media) to ensure smooth, fast display on all devices.[HTML76]]

Intégration — 3 étapes

1. Upload the folder /images/webp/ à the root of your site.
2. Copy the code below into your page.
3. Replace photo-*.webp with your files and adapt the alt attribute.

<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 of your image"
       loading="lazy">
</picture>

This block <picture> allows the browser to automatically select the best image size according to the screen.

Bonnes pratiques

• Enter a alt description for accessibility.
• Laissez srcset et sizes choisir la taille adaptée selon l’écran.
• Useloading="lazy" for images outside the initial notch.
• Clear file names help organization (ex. terrasse-bois-nantes-1200w.webp).