Comment compresser et optimiser les images sur Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment optimiser vos images dans Webflow pour améliorer les performances et les Core Web Vitals.

1. Compressez avant l'upload

Avant d'uploader, compressez vos images avec Squoosh (gratuit, en ligne). Ciblez moins de 500 Ko pour les images full-width et moins de 200 Ko pour les thumbnails. Webflow convertit automatiquement en WebP à l'upload depuis 2023.

2. Définissez la bonne taille de rendu

Dans le Designer, vérifiez que la taille de votre image dans les styles correspond à sa taille de rendu réelle. Une image de 2000px dans un conteneur de 400px charge 5x plus de données inutiles. Utilisez le champ Max Width pour contraindre la taille maximale.

3. Configurez le lazy loading

Dans les Settings de chaque image, réglez Loading sur Lazy pour toutes les images below the fold. Pour l'image hero (visible immédiatement au chargement), réglez sur Eager pour un meilleur LCP.

4. Spécifiez toujours width et height

Définissez toujours des dimensions ou un ratio d'aspect sur le conteneur de l'image. Sans dimensions, le navigateur ne réserve pas l'espace avant le chargement, ce qui crée du CLS (décalage de mise en page).

Conclusion

L'optimisation des images est le levier performances le plus accessible. Voir aussi : optimiser les images pour les Core Web Vitals.