Lazy-loading placeholder (lazysizes) HTML

Um snippet em HTML para Lazy-loading placeholder (lazysizes) que responde às requisições para /pixel.gif com o GIF vazio, decodificado uma única vez na inicialização.

Lazy-loading placeholder (lazysizes) HTML

Caminho

Arquivo: index.html

<!-- The empty GIF keeps src valid until lazysizes swaps in data-src.
     (For most pages today, native loading="lazy" is enough.) -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
     data-src="/images/photo.jpg" class="lazyload"
     width="800" height="600" alt="A photo">

Executamos este snippet e comparamos os bytes que ele retornou.

Site oficial: Lazy-loading placeholder (lazysizes)

Mais em HTML

HTML <img> with a data: URI
HTML email tracking pixel
Blank favicon