Placeholder SVG ou placeholder nun URL
O xerador de ximg.es serve placeholders como ficheiros: https://ximg.es/600x400. É o
máis cómodo para maquetar, pero cada imaxe é unha petición. Un SVG en liña vai dentro do propio HTML ou CSS: non fai
ningunha petición, pesa uns 300 bytes, escala sen perder nitidez e funciona sen conexión. É o mellor para prototipos que
se envían por correo, compoñentes dun sistema de deseño ou probas automáticas.
O data URI vai URL-encoded, non en Base64: con SVG ocupa menos e segue a ser lexible.
Que é un LQIP
Low Quality Image Placeholder: unha versión diminuta da imaxe que se amosa mentres carga a boa. O oco deixa de verse en branco, o usuario intúe o contido e a páxina parece cargar antes. As tres variantes:
- Miniatura + CSS blur: unha imaxe de 20 px en WebP, duns centos de bytes, ampliada e desenfocada con CSS. A máis parecida ao orixinal.
- SVG con desenfoque: a mesma miniatura dentro dun SVG con
feGaussianBlur. Pódese poñer como fondo da propia<img>e o bordo queda limpo, sen o halo que deixafilter: blur(). - Cor media: unha soa cor, a de toda a imaxe promediada. Cero bytes extra; é o que usan Google Imaxes ou Pinterest. ximg.es calcula esta mesma cor para cada foto do seu banco.
Como usalo
Pon o LQIP como fondo da <img> (ou do seu contedor) e deixa width e height
para que o oco teña xa o seu tamaño. Cando chega a imaxe, tapa o fondo. Non fai falla JavaScript.