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

Na imgix, nos preocupamos profundamente com a experiência do usuário e o desempenho da página. Anteriormente, discutimos o carregamento lento e seus benefícios no Core Web Vitals . 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.

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 teve a ideia do BlurHash enquanto tentava encontrar uma solução melhor para como as imagens seriam carregadas em uma conexão de internet mais lenta.

Como usar o recurso BlurHash

Para criar uma imagem borrada, basta adicionar fm=blurhash a qualquer imagem para obter a string BlurHash. Depois de obter a string BlurHash, você pode usá-la no componente BlurHash . O componente BlurHash é responsável por decodificar o hash em uma imagem que pode ser exibida.

Neste exemplo específico, o componente React BlurHash 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.

 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 conta imgix gratuita hoje!