Mejore la experiencia de usuario de su sitio web con los marcadores de posición de imágenes de BlurHash

En imgix, nos preocupamos profundamente por la experiencia del usuario y el rendimiento de la página. Anteriormente, discutimos la carga diferida y su beneficio en Core Web Vitals . Esencialmente, difiere la carga de las imágenes fuera de la pantalla hasta que el visitante se desplaza y las imágenes ingresan a la ventana gráfica. Permite que se carguen menos imágenes en un momento dado y acelera el tiempo de carga de cada imagen.

Sin embargo, si no se configura correctamente, la carga diferida podría aumentar la inestabilidad del diseño de la página, lo que daría lugar a una peor métrica de cambio de diseño acumulativo, que es uno de los tres Core Web Vitals.

Para mejorar la velocidad de la página y minimizar el cambio de diseño acumulativo, la mejor solución es combinar la carga diferida con BlurHash .

En este artículo, discutiremos qué es BlurHash y cómo aplicarlo a sus imágenes usando imgix.

¿Qué son los marcadores de posición de imagen y BlurHash?

Los marcadores de posición son una excelente opción para mejorar los tiempos de carga percibidos y ofrecer una mejor experiencia de usuario cuando una conexión o un sitio tardan en cargar imágenes. BlurHash es un algoritmo que le permite crear una versión compacta de un marcador de posición de imagen.

El algoritmo crea una cadena de caracteres que codifica una representación borrosa de la imagen, con el número de caracteres determinado por la calidad de la imagen. La cadena es lo suficientemente corta como para que pueda servirla directamente en el marcado de su página, y luego la cadena se puede decodificar en la imagen borrosa, sin tener que buscar y descargar un archivo de imagen.

Un beneficio clave de BlurHash es que puede convertir archivos de imágenes grandes en una cantidad más pequeña de datos para que aparezca una representación borrosa de la imagen mientras el archivo original aún se está cargando. A un ingeniero de Wolt se le ocurrió la idea de BlurHash mientras intentaba encontrar una mejor solución sobre cómo se cargarían las imágenes en una conexión a Internet más lenta.

Cómo usar la función BlurHash

Para crear una imagen borrosa, simplemente agregue fm=blurhash a cualquier imagen para obtener la cadena BlurHash. Una vez que tenga la cadena BlurHash, puede usarla en el componente BlurHash . El componente BlurHash es responsable de decodificar el hash en una imagen que se puede mostrar.

En este ejemplo particular, el componente React BlurHash genera un elemento de lienzo en el marcado final. Nota: el marcado generado puede diferir ligeramente según la biblioteca o el decodificador de marco que se utilice.

 import './App.css'; import Imgix from "react-imgix"; import { Blurhash } from "react-blurhash"; function App() { return ( <div className="App"> <section className="App-header"> <Blurhash hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU" width={600} height={400} /> <Imgix src="https://assets.imgix.net/example-images/puffins.jpg" width={600} height={400} /> </section> </div> ); } export default App;

Una vez que haya aplicado el código BlurHash a su imagen, el marcador de posición resultante se verá así:

Incluya la cadena BlurHash con su marcado en el momento de la compilación para asegurarse de que los usuarios vean la versión borrosa de la imagen de inmediato.

¡Para comenzar, cree una cuenta gratuita de imgix hoy!