En imgix, nos preocupamos profundamente por la experiencia del usuario y el rendimiento de la página. Anteriormente, discutimos   . 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. la carga diferida y su beneficio en Core Web Vitals  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   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. se le ocurrió la idea de BlurHash  Cómo usar la función BlurHash  Para crear una imagen borrosa, simplemente agregue   a cualquier imagen para obtener la cadena BlurHash. Una vez que tenga la cadena BlurHash, puede usarla en el componente   . El componente   es responsable de decodificar el hash en una imagen que se puede mostrar. fm=blurhash BlurHash BlurHash  En este ejemplo particular, el componente React   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. BlurHash   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   hoy! cuenta gratuita de imgix  También publicado  aquí.

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Telegram: el puente de Crypto Island hacia el continente

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Nómadas digitales escuchen: lo que necesitan saber sobre la nueva visa DTV de Tailandia

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Telegram: el puente de Crypto Island hacia el continente

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps