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.

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

Muito longo; Para ler

Making security fun one episode at a time

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

Muito longo; Para ler

imgix

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

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

Muito longo; Para ler

imgix

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

HISTÓRIAS RELACIONADAS