Comment réduire la taille de mes visuels pour améliorer la performance de mon site Webflow ?

Tutoriel
3 min
Publié le Oct 07, 2021
Dernière mise à jour le
Améliorer performance web tuto 1 Digidop
Résumez cet article avec une IA
Points clés de l'article

Comment réduire la taille de mes images pour améliorer la performance de mon site internet Webflow ?

L'un des moyens d'améliorer les performances de votre site Web consiste à réduire le temps de chargement des pages. Afin d'optimiser ce phénomène, il est vital que vous trouviez des moyens efficaces d'optimiser les images de votre site Webflow.

Voici une méthode en 2 étapes pour atteindre cet objectif avec ILOVEIMG :

Réduire les dimensions de votre image

Il est inutile d'avoir une image formatée en 3000x2500 pixels si vous voulez la publier dans une mise en page de 800x500 pixels. La meilleure façon de s'assurer que votre image s'adapte parfaitement à la taille de votre destination est de la redimensionner autant que possible avant de la charger.

La réduction de l'image a un impact majeur sur la taille et c'est une victoire facile si elle est effectuée correctement.

Before-compressing-files
Exemple image très large 3000 x 1996 px = 3,7 MB

Étape 1 : Redimensionner l'image

Tuto-etape-1-compression-image

Étape 2 : Veillez à conserver les proportions

Tuto-etape-2-compression-image

Save 80% en 1 clic : compresser votre fichier !

La fonctionnalité de compression de fichier JPEG/PNG est incroyable. Elle vous permet de réduire (sans perdre de qualité, ou presque) le poids de vos fichiers jusqu'a 90%. Rien de plus simple, télécharger votre fichier et appuyer sur le bouton. Voilà, c'est prêt.

Tuto-etape-3-compression-image
Avant compression : 1.58 Mb vs Après compression :  292 Kb

Votre image est passé de 3 MB à - de 300 Kb

After reduce size files for the web result

Lien vers l'outils d'optimisation d'images : ILOVEIMG

Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Projection du logo Digidop sur la façade d'un bâtiment dans une grande ville la nuit, symbolisant la visibilité de la marque.
Storytelling
Digidop

Était-ce une bonne idée (ou pas) d’appeler notre entreprise Digidop ?

Était-ce une bonne idée (ou pas) d’appeler notre entreprise Digidop ?
Illustration conceptuelle d’un utilisateur face à deux versions d’un site web : une interface traditionnelle à gauche et une interface futuriste axée données à droite. Métaphore du web d’aujourd’hui et du web de demain.
Documentation
IA

Quand les LLMs redéfinissent le rôle du site de marque

Quand les LLMs redéfinissent le rôle du site de marque
Photo de groupe sur le rooftop du Webflow Momentum Tour Paris avec Hélène, Directrice EMEA chez Webflow, et Thomas et Florian, cofondateurs de Digidop, en compagnie d’autres participants, avec la tour Eiffel en arrière-plan.
Evénements
Webflow

Webflow Momentum Tour Paris : Talks, démo et networking avec Webflow & Digidop

Webflow Momentum Tour Paris : Talks, démo et networking avec Webflow & Digidop

Transformez votre site web en un moteur de croissance.

Nous contacter