Comment utiliser blurDataURL avec Next.js Image ?

Le composant Image de Next.js accepte les props placeholder="blur" et blurDataURL="data:image/...". Passez une image base64 (SVG ou JPEG miniature) comme blurDataURL. Next.js affiche cette image floue pendant le chargement, puis la remplace par l'image réelle avec une transition douce.

Qu'est-ce que le CLS (Cumulative Layout Shift) ?

Le CLS est un indicateur Google Core Web Vitals qui mesure la stabilité visuelle d'une page. Quand une image se charge sans dimensions définies, elle pousse le contenu vers le bas, ce qui dégrade l'expérience et votre score SEO. Définir width/height ou utiliser un placeholder résout ce problème.

Générateur placeholder blur image | CSS gradient | Next.js | 1000 Outils

Générateur de placeholder / blur hash

Améliorez l'expérience de chargement de vos pages web avec des placeholders visuels. Notre outil génère des dégradés CSS qui servent de prévisualisation floue (technique LQIP — Low Quality Image Placeholder) avant que l'image réelle se charge. Compatible avec HTML natif et Next.js Image avec blurDataURL. Évite les sauts de mise en page (CLS) et améliore la perception de performance.

import Image from 'next/image'; // Utiliser le placeholder CSS <div style={{ background: 'linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #9ca3af 100%)', filter: 'blur(20px)', transform: 'scale(1.1)', width: '400px', height: '300px', }} /> // Ou avec Next.js Image et blurDataURL <Image src="/votre-image.jpg" width={400} height={300} placeholder="blur" blurDataURL="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj4KICA8ZmlsdGVyIGlkPSJibHVyIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyMCIvPjwvZmlsdGVyPgogIDxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIiBmaWxsPSIjZTVlN2ViIi8+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEzMyIgaGVpZ2h0PSIzMDAiIGZpbGw9IiNkMWQ1ZGIiIG9wYWNpdHk9IjAuNyIgZmlsdGVyPSJ1cmwoI2JsdXIpIi8+CiAgPHJlY3QgeD0iMTMzIiB5PSIwIiB3aWR0aD0iMTMzIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzljYTNhZiIgb3BhY2l0eT0iMC43IiBmaWx0ZXI9InVybCgjYmx1cikiLz4KPC9zdmc+" alt="Description" />

Qu'est-ce qu'un blur placeholder et pourquoi l'utiliser ?

Un blur placeholder (ou LQIP — Low Quality Image Placeholder) est une version très légère et floue de l'image affichée pendant le chargement de l'image réelle. Cette technique améliore l'expérience utilisateur en évitant les zones blanches ou vides, réduit le CLS (Cumulative Layout Shift — un des Core Web Vitals de Google) en réservant l'espace exact de l'image, et donne une impression de chargement plus rapide. Next.js propose cette fonctionnalité nativement via la prop blurDataURL.

Techniques de placeholder pour les images web

Plusieurs techniques existent : les dégradés CSS (légères, sans image requise), les SVG inline encodés en base64, le BlurHash (algorithme qui encode une image en chaîne de caractères courte), le ThumbHash (version améliorée), et les images basse résolution en base64. Notre outil génère des dégradés CSS et des SVG inline, compatibles avec tous les navigateurs sans dépendance externe.

Générateur de placeholder / blur hash

Qu'est-ce qu'un blur placeholder et pourquoi l'utiliser ?

Techniques de placeholder pour les images web

Questions fréquentes

Outils similaires

Redimensionner une image

Compresser une image

Convertir PNG en JPG

Générateur de palette de couleurs

Convertir HEX en RGB

Créer un favicon