Placeholder SVG o placeholder en una URL
El generador de ximg.es sirve placeholders como ficheros: https://ximg.es/600x400. Es lo
más cómodo para maquetar, pero cada imagen es una petición. Un SVG en línea va dentro del propio HTML o CSS: no hace
ninguna petición, pesa unos 300 bytes, escala sin perder nitidez y funciona sin conexión. Es lo mejor para prototipos
que se envían por correo, componentes de un sistema de diseño o pruebas automáticas.
El data URI va URL-encoded, no en Base64: con SVG ocupa menos y sigue siendo legible.
Qué es un LQIP
Low Quality Image Placeholder: una versión diminuta de la imagen que se muestra mientras carga la buena. El hueco deja de verse en blanco, el usuario intuye el contenido y la página parece cargar antes. Las tres variantes:
- Miniatura + CSS blur: una imagen de 20 px en WebP, de unos cientos de bytes, ampliada y desenfocada con CSS. La más parecida al original.
- SVG con desenfoque: la misma miniatura dentro de un SVG con
feGaussianBlur. Se puede poner como fondo de la propia<img>y el borde queda limpio, sin el halo que dejafilter: blur(). - Color medio: un solo color, el de toda la imagen promediada. Cero bytes extra; es lo que usan Google Imágenes o Pinterest. ximg.es calcula este mismo color para cada foto de su banco.
Cómo usarlo
Pon el LQIP como fondo de la <img> (o de su contenedor) y deja width y
height para que el hueco tenga ya su tamaño. Cuando la imagen llega, tapa el fondo. No hace falta JavaScript.