Preserve os detalhes. Reduza a espera.
Os seus clientes querem ver o tecido, não descarregar o ficheiro original da câmara. Adaptamos as dimensões, o formato e o carregamento à utilização de cada imagem.
Uma fotografia. Duas funções distintas.
Uma imagem pequena na lista de produtos permite reconhecer a forma e a cor de uma poltrona. Um grande plano tem de mostrar a trama e as costuras. Usar o mesmo ficheiro grande nas duas vistas desperdiça dados; reduzir ambas a miniaturas elimina detalhes úteis.
Prepare dimensões adequadas para a lista e a página do produto. Reserve um ficheiro maior para uma verdadeira função de zoom. Examine cada versão à dimensão que o cliente vê: uma compressão adequada à miniatura pode desfocar o tecido no grande plano.
Ajuste o ficheiro, as dimensões e o momento de carregar.
Comece por uma página lenta num telemóvel. Identifique a imagem de que o cliente precisa primeiro e verifique estes três pontos.
Escolha o formato pelo resultado
Compare os formatos possíveis à mesma dimensão de apresentação. Escolha o ficheiro mais pequeno apenas se os contornos, a textura e a cor continuarem corretos nos navegadores dos clientes.
Dê ao navegador dimensões adequadas
Uma imagem apresentada com 400 píxeis CSS de largura pode precisar de um ficheiro de 800 píxeis num ecrã de densidade dupla. Forneça variantes e a dimensão de apresentação correta para o navegador escolher. Como funciona a escolha de imagens responsivas.
Carregue primeiro a imagem importante
A imagem principal visível ao abrir a página deve carregar rapidamente. Adie as imagens mais abaixo e reserve o seu espaço para que preços e botões não se desloquem. Orientações sobre o carregamento de imagens.
Um ficheiro mais pequeno é apenas metade da verificação.
Compare a mesma página, largura de visualização e condições de teste antes e depois da alteração. Verifique o que chega ao cliente, não apenas o ficheiro na biblioteca multimédia.
O que foi descarregado?
Registe o ficheiro de imagem e os bytes efetivamente descarregados. Um ficheiro otimizado não ajuda se a página continuar a enviar o original antigo.
Que detalhes ficaram?
Compare o mesmo recorte à mesma dimensão. Na poltrona, examine tecido, costuras e cor separadamente na lista, na vista completa e no zoom.
O que acontece durante o carregamento?
Verifique quando surge a imagem principal e se o preço ou o botão de compra se deslocam. Repita o teste nas mesmas condições antes de avaliar a melhoria.
Só precisa de enviar um ficheiro grande? Use o Devenia Send.
Mostre os detalhes sem fazer esperar.
Envie uma página lenta, o dispositivo em que o problema ocorre e os detalhes que os clientes precisam de ver. Indique se afeta a primeira imagem, a galeria ou o zoom.