En este artículo vamos a ver una técnica CSS para mostrar una imagen de baja calidad mientras se descarga la final. Una forma muy inteligente para mejorar la experiencia de usuario ya que no tendrá que esperar a la imagen de alta calidad para disfrutar del diseño. Además nos ayudará a mejorar el rendimiento del sitio con una carga rápida. Todo son ventajas.
La técnica es sencilla pero eficaz. Juega con los fondos de CSS:
- Precargamos la imagen de baja calidad con máxima prioridad. Para ello usamos la etiqueta
<link>con el atributorel="preload",as="image"yfetchpriority="high". - Mostramos la imagen de baja calidad, o con la etiqueta
<img>o con la propiedadbackground-imagede CSS. - Cuando la imagen de final esté descargada, se mostrará automáticamente tapando la imagen previa de baja calidad.
Demostración
Refresca la página, borrando la caché, para apreciar el efecto. La imagen final pesa 10Mb y la de baja calidad apenas 0.5Mb.
Cuando usamos la etiqueta de imagen (<img>)
Primero precargamos la imagen temporal, o de baja calidad, en el <head> de la página con el siguiente código.
<link rel="preload" as="image" href="imagen-baja-calidad.jpg" fetchpriority="high">
rel="preload": Indicamos que es una precarga.as="image": Informamos que es una imagen.fetchpriority="high": Damos la máxima prioridad a su descarga.
A continuación definimos la imagen, la original. He incorporado la clase image-placeholder para darle estilos más adelante.
<img src="imagen-final.jpg" alt="Imagen aleatoria" class="image-placeholder">
Ahora definimos el CSS.
.image-placeholder {
width: 500px;
height: 500px;
background-image: url(imagen-baja-calidad.jpg);
background-repeat: no-repeat;
background-size: cover;
}
widthyheight: Debemos indicar el tamaño que debe ocupar. Si no lo hacemos, la imagen de baja calidad se mostrará en su tamaño original.background-image: Indicamos la imagen de baja calidad. Se mostrará hasta que se descargue la original.background-repeat: Marcamos que no se repita la imagen, ya que es pequeña y en caso contrario se vería un mosaico.background-size: Prevenimos que la imagen se ajuste al tamaño del contenedor.
Y con esto ya estaría.
Cuando es una imagen de fondo (background-image)
El primer paso es precargar la imagen de baja calidad, de la misma forma que el caso anterior.
<link rel="preload" as="image" href="imagen-baja-calidad.jpg" fetchpriority="high">
Definimos el contenedor, en este caso un <header>, que tendrá la imagen de fondo. He incorporado la clase image-placeholder para aplicar estilos.
<header title="Imagen aleatoria" class="image-placeholder"></header>
He usado el atributo title por temas de accesibilidad. Sustituirá al atributo alt de la etiqueta <img>. Su uso es opcional.
Y por último, los estilos.
.image-placeholder {
width: 500px;
height: 500px;
background-image: url(imagen-final.jpg), url(imagen-baja-calidad.jpg);
background-repeat: no-repeat;
background-size: cover;
}
Todos los elementos son iguales al punto anterior, excepto background-image. En este caso indicamos las 2 imágenes, la original (la final) y la de baja calidad. ¡El orden es importante! De este modo el primer fondo tapará al segundo una vez se haya descargado.
{{ comments.length }} comentarios