Comment optimiser les images dans Webflow pour les Core Web Vitals ?
Apprenez à optimiser les images dans Webflow pour améliorer vos Core Web Vitals : format WebP, lazy load, dimensions et fetchpriority.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment optimiser les images dans Webflow pour améliorer vos Core Web Vitals.
| Format | Poids moyen | Compatibilité | Recommandation |
|---|---|---|---|
| JPEG | 150-400 Ko | Universelle | À éviter, remplacer par WebP |
| PNG | 200-800 Ko | Universelle | À éviter sauf transparence |
| WebP | 50-150 Ko | Tous navigateurs modernes | Format recommandé |
| AVIF | 30-100 Ko | Chrome, Firefox, Safari 16+ | Idéal si disponible |
1. Uploadez vos images au bon format
Webflow convertit automatiquement vos JPEG et PNG en WebP à l'upload depuis 2023. Uploadez toujours vos images dans la meilleure qualité possible : Webflow se charge de la compression et de la conversion. Pour les images avec transparence, uploadez en PNG, Webflow les convertit en WebP avec canal alpha.
2. Définissez loading Eager sur les images above-the-fold
Dans le Designer, sélectionnez votre image hero ou tout élément visible immédiatement au chargement. Dans Settings, réglez Loading sur Eager. Toutes les autres images doivent être en Lazy. C'est le levier le plus impactant pour le LCP.
3. Spécifiez toujours width et height
L'absence de dimensions sur les images est la première cause de CLS (Cumulative Layout Shift). Dans Webflow, définissez des dimensions fixes ou un ratio d'aspect sur le conteneur de l'image via Aspect Ratio dans les styles.
4. Utilisez les tailles responsives
Webflow génère automatiquement plusieurs versions de vos images (500w, 800w, 1080w, 1600w, 2000w) et les sert via l'attribut srcset. Vérifiez dans le code source de votre page que l'attribut srcset est bien présent sur vos images importantes.
5. Compressez avant l'upload si nécessaire
Pour les images très lourdes (>2 Mo), compressez-les avant l'upload avec Squoosh ou TinyPNG. Ciblez un poids inférieur à 500 Ko pour les images full-width et 200 Ko pour les thumbnails.
Conclusion
Les images représentent en moyenne 60% du poids d'une page web. Cas d'usage :
- Pages portfolio avec nombreuses images haute résolution
- Landing pages avec hero image impactante
- Blogs avec images dans les articles CMS
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
