Générateur d'images lazy load : images optimisées et LQIP

Le lazy loading (chargement différé) consiste à ne télécharger les images situées sous la ligne de flottaison que lorsque le visiteur s'en approche en défilant. Les navigateurs modernes le prennent en charge nativement avec l'attribut loading="lazy" sur une balise img, et beaucoup de sites ajoutent un LQIP (low-quality image placeholder) : une version minuscule et floue de l'image, affichée instantanément puis remplacée par la vraie image dès qu'elle arrive. Ces deux techniques exigent les bons fichiers, et c'est ce que cette page vous aide à produire.

Soyons clairs sur ce que fait le générateur. Il compresse vos images en qualité 80, dans leur format et leur taille d'origine, prêtes à être chargées en différé. En modifiant deux réglages, il crée aussi l'aperçu : une version de quelques dizaines de pixels de large en basse qualité, pesant généralement bien moins de 1 Ko. Il n'écrit ni HTML ni CSS et ne floute pas l'image lui-même ; le flou est appliqué par le navigateur, en CSS, quand l'aperçu est agrandi.

Comment utiliser Générateur d'images lazy load (LQIP)

1. Déposez vos images dans la zone d'import, cliquez dessus pour choisir des fichiers ou collez une image avec Ctrl+V. Cette page accepte les fichiers JPG, PNG, WebP, GIF et BMP, plusieurs à la fois et jusqu'à 80 Mo chacun.
2. Premier passage, images complètes : gardez les réglages par défaut (qualité 80, taille d'origine) ou choisissez WebP dans Format, puis téléchargez les fichiers optimisés.
3. Second passage, aperçus : ouvrez Resize, choisissez Max et saisissez 32 × 32, baissez la qualité vers entre 30 et 40 et, sous More options, réglez le modèle de nom sur {name}-lqip. Téléchargez aussi ces fichiers minuscules.
4. Contrôlez le résultat avec le curseur avant/après : faites glisser le séparateur sur l'aperçu et lisez en dessous les nouvelles dimensions, le poids, la qualité et le pourcentage gagné. Chaque modification des réglages retraite automatiquement toutes les images.
5. Téléchargez une image seule ou utilisez « Download all (ZIP) » pour tout le lot. Sous « More options », vous pouvez aussi fixer une valeur DPI et un modèle de nom de fichier avec {name}, {w} et {h}.

Conseils pour le lazy loading

• Ne chargez jamais l'image LCP en différé. Le visuel principal ou la première grande image doit se charger immédiatement ; le différer retarde le Largest Contentful Paint. Optimisez-le plutôt avec l'optimiseur pour site web.
• Réservez l'espace. Donnez à chaque image différée des attributs width et height (la ligne « After » affiche la taille exacte) pour que rien ne saute au chargement.
• Intégrez l'aperçu. Un aperçu de quelques centaines d'octets peut être intégré en data URI ou utilisé comme arrière-plan CSS, puis flouté avec un filtre CSS jusqu'au chargement de l'image complète.
• Allégez aussi les images complètes. Le lazy loading reporte les octets, il ne les supprime pas ; convertissez en WebP ou passez les gros dossiers dans le compresseur d'images en masse.

Privé, gratuit et rapide

Tout se passe dans votre navigateur : les images sont décodées, redimensionnées et réencodées sur votre propre appareil, rien n'est envoyé sur un serveur. Pas d'inscription, pas de filigrane, pas de limite quotidienne, et les données de localisation et d'appareil photo (EXIF) sont retirées de chaque résultat.