Nous avons tous déjà visité un magnifique site portfolio qui met 10 secondes à charger. Pourquoi ? En général, c'est parce que le designer a téléversé un PNG non compressé de 15 Mo directement depuis Photoshop.
Si vous exportez votre site pour l'héberger vous-même, l'optimisation des images est de votre responsabilité. Et c'est la chose la plus impactante que vous puissiez faire pour la vitesse de votre site.
Les formats
- JPG : Idéal pour les photos. Bonne compression.
- PNG : Idéal pour les graphiques avec des aplats de couleur ou de la transparence. Lourd pour les photos.
- SVG : Scalabilité infinie. Idéal pour les logos et les icônes. Utilisez-les dès que possible !
- WebP : Le standard moderne. Plus petit que le JPG et le PNG avec une meilleure qualité.
La boîte à outils
1. TinyPNG / TinyJPG
Passez chaque image matricielle dans cet outil avant de la téléverser. Il peut souvent réduire la taille du fichier de 70 % sans aucune perte de qualité visible.
2. Squoosh.app
Un outil gratuit de Google. Excellent pour convertir manuellement les images génériques au format WebP.
3. Le lazy loading
C'est une technique de code où les images situées sous la ligne de flottaison ne se chargent que lorsque l'utilisateur fait défiler la page vers le bas.
<img src="photo.jpg" loading="lazy" alt="...">
Le simple ajout de loading="lazy" à vos balises d'image peut améliorer considérablement vos scores de « Time to Interactive ».
Comment NoCodeExport gère les images
Lorsque vous utilisez notre outil pour exporter un site depuis Framer ou Webflow, nous effectuons automatiquement les actions suivantes :
- Analyse des ressources volumineuses.
- Conversion des images compatibles en WebP.
- Ajout des attributs de lazy loading aux images non critiques.
Cela garantit que votre site auto-hébergé n'est pas seulement moins cher, il est aussi plus rapide que l'original.
