Optimisation des Images sur Webflow en 2025

Les techniques de compression d'images continuent de progresser. En 2024, il est crucial d'aller au-delà de la simple réduction de taille de fichier. La compression est fondamentale pour le succès d'un site web, de l'expérience utilisateur au classement dans les moteurs de recherche. Pour les utilisateurs de Webflow, il est désormais possible de compresser les images directement dans la plateforme. Cela inclut les images statiques et les images de collection, ce qui simplifie grandement le processus d'optimisation.

Compression d'Images dans Webflow

Webflow propose un outil de compression intégré pour optimiser les images de ses sites. Qu'il s'agisse d'assets de collection ou bien de pages statiques, vous pouvez les sélectionner en quelques clics !

Compression des images dans le CMS Webflow

Pour compresser les images de vos collections, rendez-vous dans l'écran du CMS, puis sélectionnez "Compress Assets" dans le menu (en cliquant sur les "..." )

Il faudra ensuite choisir le format vers lequel vous souhaitez compresser vos images. 

De manière générale, on vous recommande d'utiliser le format AVIF, attention tout de même à vérifier le rendu une fois la compression effectuée. En cas de souci, pas de stress, Webflow conserve un backup de vos images avant la compression - vous aurez la possibilité de revenir en arrière et de sélectionner le format WebP si besoin (compression moins forte)

‍

Il n'est pour le moment pas possible de compresser les images du CMS individuellement.

Compression des images de pages statiques

Il est également possible de compresser les images ajoutées dans l'onglet "assets" même si c'est un peu caché.

On vous montre comment faire juste en dessous.

Important: Il n'est possible de compresser que les formats d'images et pas les formats vectoriels. C'est pour ça qu'on "recherche" l'extension avant de sélectionner les images pour ne pas avoir à le faire manuellement 😉

Différence entre AVIF et WebP

Les formats d'image AVIF et WebP sont des choix modernes pour la compression. Le format AVIF utilise des techniques de compression avancées, souvent issues du domaine vidéo, pour offrir des tailles de fichier réduites tout en maintenant une haute qualité. Il offre également des fonctionnalités comme la transparence et un large spectre de couleurs. Le WebP, développé par Google, est une alternative éprouvée aux formats JPEG et PNG, réduisant les tailles de fichier jusqu'à 30% tout en préservant la qualité. Cependant, il est crucial de vérifier la compatibilité des navigateurs pour chaque format, car celle-ci peut varier.

La prise en charge du format WebP est de 97.21% (source)

La prise en charge du AVIF est de 94.49% (source)

Les deux formats sont donc globalement pris en charge !

L'Impact direct sur les performances de votre site

La rapidité de chargement des pages est essentielle. Les utilisateurs ont plus facilement tendance à quitter un site qui tarde à s'afficher, la vitesse de chargement a également un impact sur les conversions (1seconde de chargement supplémentaire = - 15% de conversion).

La compression d'images est une solution efficace pour améliorer ces temps de chargement.

Une approche plus fine de la compression

Dans certains cas, la compression des images du CMS de webflow peut-être problématique car une image trop compressée peut nuire à l'expérience utilisateur et à l'image de marque, même si elle se charge rapidement. Il est possible d'avoir une approche plus fine en utilisant des outils dédiés à la compression d'images . TinyPNG ou auditflow permettent d'optimiser les images sans perte notable de qualité en éliminant les données superflues tout en préservant les détails essentiels.

Les nouveaux formats disponibles

Les formats d'image modernes offrent de nouvelles possibilités. WebP, par exemple, permet une compression jusqu'à 30% plus efficace que le JPEG pour une qualité similaire. Cependant, la compatibilité des navigateurs doit être prise en compte. L'utilisation d'images adaptatives, qui proposent le meilleur format selon le navigateur, est donc essentielle.

Pour réussir sa stratégie de compression d'images, il est important d'adopter une approche complète qui prend en compte la taille des fichiers, la qualité visuelle, les formats d'image et l'expérience utilisateur. En combinant les bonnes pratiques et les outils adéquats, il est possible d'optimiser les performances web tout en conservant une haute qualité visuelle.