Cargando imagen
HTML + CSSLoaders

Image qui se charge par résolution

Un paysage apparaît d'abord en gros pixels, puis en plus fins, et enfin net, comme une photo sur une connexion lente.

Réglages

16px
1x

Code

<div class="uvq10-pix" role="status"><span class="sr">Chargement de l’image</span><div class="im" aria-hidden="true"><svg class="px l0" viewBox="0 0 6 4" preserveAspectRatio="none" aria-hidden="true"><rect x="0" y="0" width="1.02" height="1.02" class="p0"/><rect x="1" y="0" width="1.02" height="1.02" class="p0"/><rect x="2" y="0" width="1.02" height="1.02" class="p0"/><rect x="3" y="0" width="1.02" height="1.02" class="p0"/><rect x="4" y="0" width="1.02" height="1.02" class="p1"/><rect x="5" y="0" width="1.02" height="1.02" class="p0"/><rect x="0" y="1" width="1.02" height="1.02" class="p2"/><rect x="1" y="1" width="1.02" height="1.02" class="p3"/><rect x="2" y="1" width="1.02" height="1.02" class="p4"/><rect x="3" y="1" width="1.02" height="1.02" class="p4"/><rect x="4" y="1" width="1.02" height="1.02" class="p5"/><rect x="5" y="1" width="1.02" height="1.02" class="p2"/><rect x="0" y="2" width="1.02" height="1.02" class="p6"/><rect x="1" y="2" width="1.02" height="1.02" class="p6"/><rect x="2" y="2" width="1.02" height="1.02" class="p6"/><rect x="3" y="2" width="1.02" height="1.02" class="p6"/><rect x="4" y="2" width="1.02" height="1.02" class="p6"/><rect x="5" y="2" width="1.02" height="1.02" class="p6"/><rect x="0" y="3" width="1.02" height="1.02" class="p7"/><rect x="1" y="3" width="1.02" height="1.02" class="p7"/><rect x="2" y="3" width="1.02" height="1.02" class="p7"/><rect x="3" y="3" width="1.02" height="1.02" class="p7"/><rect x="4" y="3" width="1.02" height="1.02" class="p7"/><rect x="5" y="3" width="1.02" height="1.02" class="p7"/></svg><svg class="px l1" viewBox="0 0 12 8" preserveAspectRatio="none" aria-hidden="true"><rect x="0" y="0" width="1.02" height="1.02" class="p0"/><rect x="1" y="0" width="1.02" height="1.02" class="p0"/><rect x="2" y="0" width="1.02" height="1.02" class="p0"/><rect x="3" y="0" width="1.02" height="1.02" class="p0"/><rect x="4" y="0" width="1.02" height="1.02" class="p0"/><rect x="5" y="0" width="1.02" height="1.02" class="p0"/><rect x="6" y="0" width="1.02" height="1.02" class="p0"/><rect x="7" y="0" width="1.02" height="1.02" class="p0"/><rect x="8" y="0" width="1.02" height="1.02" class="p0"/><rect x="9" y="0" width="1.02" height="1.02" class="p0"/><rect x="10" y="0" width="1.02" height="1.02" class="p0"/><rect x="11" y="0" width="1.02" height="1.02" class="p0"/><rect x="0" y="1" width="1.02" height="1.02" class="p8"/><rect x="1" y="1" width="1.02" height="1.02" class="p8"/><rect x="2" y="1" width="1.02" height="1.02" class="p8"/><rect x="3" y="1" width="1.02" height="1.02" class="p8"/><rect x="4" y="1" width="1.02" height="1.02" class="p8"/><rect x="5" y="1" width="1.02" height="1.02" class="p8"/><rect x="6" y="1" width="1.02" height="1.02" class="p8"/><rect x="7" y="1" width="1.02" height="1.02" class="p3"/><rect x="8" y="1" width="1.02" height="1.02" class="p5"/><rect x="9" y="1" width="1.02" height="1.02" class="p3"/><rect x="10" y="1" width="1.02" height="1.02" class="p8"/><rect x="11" y="1" width="1.02" height="1.02" class="p8"/><rect x="0" y="2" width="1.02" height="1.02" class="p3"/><rect x="1" y="2" width="1.02" height="1.02" class="p3"/><rect x="2" y="2" width="1.02" height="1.02" class="p3"/><rect x="3" y="2" width="1.02" height="1.02" class="p3"/><rect x="4" y="2" width="1.02" height="1.02" class="p3"/><rect x="5" y="2" width="1.02" height="1.02" class="p3"/><rect x="6" y="2" width="1.02" height="1.02" class="p3"/><rect x="7" y="2" width="1.02" height="1.02" class="p5"/><rect x="8" y="2" width="1.02" height="1.02" class="p9"/><rect x="9" y="2" width="1.02" height="1.02" class="p5"/><rect x="10" y="2" width="1.02" height="1.02" class="p3"/><rect x="11" y="2" width="1.02" height="1.02" class="p3"/><rect x="0" y="3" width="1.02" height="1.02" class="p10"/><rect x="1" y="3" width="1.02" height="1.02" class="p11"/><rect x="2" y="3" width="1.02" height="1.02" class="p4"/><rect x="3" y="3" width="1.02" height="1.02" class="p10"/><rect x="4" y="3" width="1.02" height="1.02" class="p4"/><rect x="5" y="3" width="1.02" height="1.02" class="p12"/><rect x="6" y="3" width="1.02" height="1.02" class="p12"/><rect x="7" y="3" width="1.02" height="1.02" class="p4"/><rect x="8" y="3" width="1.02" height="1.02" class="p5"/><rect x="9" y="3" width="1.02" height="1.02" class="p4"/><rect x="10" y="3" width="1.02" height="1.02" class="p13"/><rect x="11" y="3" width="1.02" height="1.02" class="p2"/><rect x="0" y="4" width="1.02" height="1.02" class="p14"/><rect x="1" y="4" width="1.02" height="1.02" class="p6"/><rect x="2" y="4" width="1.02" height="1.02" class="p6"/><rect x="3" y="4" width="1.02" height="1.02" class="p12"/><rect x="4" y="4" width="1.02" height="1.02" class="p6"/><rect x="5" y="4" width="1.02" height="1.02" class="p6"/><rect x="6" y="4" width="1.02" height="1.02" class="p6"/><rect x="7" y="4" width="1.02" height="1.02" class="p6"/><rect x="8" y="4" width="1.02" height="1.02" class="p6"/><rect x="9" y="4" width="1.02" height="1.02" class="p6"/><rect x="10" y="4" width="1.02" height="1.02" class="p6"/><rect x="11" y="4" width="1.02" height="1.02" class="p6"/><rect x="0" y="5" width="1.02" height="1.02" class="p6"/><rect x="1" y="5" width="1.02" height="1.02" class="p6"/><rect x="2" y="5" width="1.02" height="1.02" class="p15"/><rect x="3" y="5" width="1.02" height="1.02" class="p16"/><rect x="4" y="5" width="1.02" height="1.02" class="p6"/><rect x="5" y="5" width="1.02" height="1.02" class="p6"/><rect x="6" y="5" width="1.02" height="1.02" class="p6"/><rect x="7" y="5" width="1.02" height="1.02" class="p6"/><rect x="8" y="5" width="1.02" height="1.02" class="p16"/><rect x="9" y="5" width="1.02" height="1.02" class="p16"/><rect x="10" y="5" width="1.02" height="1.02" class="p6"/><rect x="11" y="5" width="1.02" height="1.02" class="p6"/><rect x="0" y="6" width="1.02" height="1.02" class="p7"/><rect x="1" y="6" width="1.02" height="1.02" class="p7"/><rect x="2" y="6" width="1.02" height="1.02" class="p7"/><rect x="3" y="6" width="1.02" height="1.02" class="p7"/><rect x="4" y="6" width="1.02" height="1.02" class="p7"/><rect x="5" y="6" width="1.02" height="1.02" class="p15"/><rect x="6" y="6" width="1.02" height="1.02" class="p7"/><rect x="7" y="6" width="1.02" height="1.02" class="p7"/><rect x="8" y="6" width="1.02" height="1.02" class="p7"/><rect x="9" y="6" width="1.02" height="1.02" class="p7"/><rect x="10" y="6" width="1.02" height="1.02" class="p7"/><rect x="11" y="6" width="1.02" height="1.02" class="p7"/><rect x="0" y="7" width="1.02" height="1.02" class="p7"/><rect x="1" y="7" width="1.02" height="1.02" class="p7"/><rect x="2" y="7" width="1.02" height="1.02" class="p7"/><rect x="3" y="7" width="1.02" height="1.02" class="p7"/><rect x="4" y="7" width="1.02" height="1.02" class="p7"/><rect x="5" y="7" width="1.02" height="1.02" class="p7"/><rect x="6" y="7" width="1.02" height="1.02" class="p7"/><rect x="7" y="7" width="1.02" height="1.02" class="p7"/><rect x="8" y="7" width="1.02" height="1.02" class="p7"/><rect x="9" y="7" width="1.02" height="1.02" class="p7"/><rect x="10" y="7" width="1.02" height="1.02" class="p7"/><rect x="11" y="7" width="1.02" height="1.02" class="p7"/></svg><svg class="vc" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true"><defs><linearGradient id="uvq10-pix-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" class="s0"/><stop offset=".6" class="s1"/></linearGradient></defs><rect width="300" height="200" fill="url(#uvq10-pix-sky)"/><circle cx="210" cy="60" r="30" class="sun"/><polygon points="0,200 0,120 48,84 90,110 150,72 204,104 252,88 300,100 300,200" class="far"/><polygon points="0,200 0,156 66,130 138,160 222,134 300,148 300,200" class="near"/></svg><i class="pg"></i></div></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Loaders

Voir tout : Loaders

Où l’utiliser

Un paysage de coucher de soleil échantillonné à la compilation en six sur quatre puis douze sur huit pixels, chaque pixel étant une vraie moyenne des deux couleurs du bloc, avant une version vectorielle nette qui fait sa mise au point. Une fine barre sous l'image suit chaque étape. Il convient aux galeries, sites de voyage et fils riches en images.

La couleur principale réchauffe le soleil et l'horizon, la seconde règle le ciel et les montagnes, toute la scène suit donc ta palette. Utilise-le comme espace réservé là où une photo ou une carte va se charger.