Na imgix, nos preocupamos profundamente com a experiência do usuário e o desempenho da página. Anteriormente, discutimos   . Essencialmente, ele adia o carregamento de imagens fora da tela até que o visitante role e as imagens entrem na janela de visualização. Ele permite que menos imagens sejam carregadas a qualquer momento e acelera o tempo de carregamento de cada imagem. o carregamento lento e seus benefícios no Core Web Vitals  No entanto, se não for configurado corretamente, o carregamento lento pode aumentar a instabilidade do layout da página, levando a uma pior métrica de mudança cumulativa de layout, que é uma das três principais métricas da Web.  Para melhorar a velocidade da página e minimizar o Cumulative Layout Shift, a melhor solução é combinar o carregamento lento com   . o BlurHash  Neste artigo, discutiremos o que é BlurHash e como aplicá-lo às suas imagens usando  o imgix.  O que são espaços reservados para imagens e BlurHash?  Os placeholders são uma ótima opção para melhorar os tempos de carregamento percebidos e oferecer uma melhor experiência do usuário quando uma conexão ou site está lento para carregar imagens. BlurHash é um algoritmo que permite criar uma versão compacta de um marcador de posição de imagem.  O algoritmo cria uma cadeia de caracteres que codifica uma representação borrada da imagem, com o número de caracteres determinado pela qualidade da imagem. A string é curta o suficiente para que você possa exibi-la diretamente na marcação de sua página e, em seguida, a string pode ser decodificada na imagem desfocada - sem a necessidade de buscar e baixar um arquivo de imagem.   Um dos principais benefícios do BlurHash é que você pode converter grandes arquivos de imagem em uma quantidade menor de dados para que uma representação borrada da imagem apareça enquanto o arquivo original ainda está sendo carregado. Um engenheiro da Wolt   enquanto tentava encontrar uma solução melhor para como as imagens seriam carregadas em uma conexão de internet mais lenta. teve a ideia do BlurHash  Como usar o recurso BlurHash  Para criar uma imagem borrada, basta adicionar   a qualquer imagem para obter a string BlurHash. Depois de obter a string BlurHash, você pode usá-la no componente   . O componente   é responsável por decodificar o hash em uma imagem que pode ser exibida. fm=blurhash BlurHash BlurHash  Neste exemplo específico, o componente React   gera um elemento canvas na marcação final. Observação: a marcação gerada pode diferir ligeiramente dependendo de qual biblioteca ou decodificador de estrutura é usado. 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;  Depois de aplicar o código BlurHash à sua imagem, o espaço reservado resultante ficará assim:   Inclua a string BlurHash com sua marcação no momento da compilação para garantir que os usuários vejam a versão desfocada da imagem imediatamente.  Para começar, crie uma   hoje! conta imgix gratuita  Também publicado  aqui.

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Boost your HackerNoon story @ $159.99! 🚀

Melhore a experiência do usuário do seu site com espaços reservados para imagens BlurHash

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Uma breve introdução à teoria do cérebro de Boltzmann

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Uma breve introdução à teoria do cérebro de Boltzmann

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps