Crie miniaturas que permanecem úteis em um tamanho de tela pequeno

Uma imagem de cartão ajuda alguém a reconhecer rapidamente um produto, artigo ou item da galeria. Ele não precisa mostrar todos os detalhes na fotografia maior. Escolha uma composição que permaneça compreensível quando pequena: uma foto de sala cheia pode ser menos útil do que uma visão mais próxima, enquanto uma miniatura do produto ainda deve mostrar o item correto em vez de um detalhe atraente, mas ambíguo.

Verifique a forma do cartão antes de exportar. O Fit Within preserva a fonte completa, mas seu site pode cortá-lo mais tarde com seu próprio estilo. Uma área recortada exata fornece uma composição deliberada para esse slot. Use a fonte maior para uma galeria expandida ou zoom do produto. Não substitua a única imagem detalhada pela miniatura e espere que a ampliação recrie seus detalhes quando um visitante a abrir.

A predefinição inicial se encaixa dentro de 800 por 800 pixels, seleciona WebP e aplica a nitidez da luz. Este é um exemplo para um candidato a cartão, não um requisito de miniatura universal. Meça a largura real da tela e as necessidades de densidade responsiva e, em seguida, escolha uma exportação apropriada. Uma ampla fonte manterá sua proporção dentro da caixa em vez de se tornar quadrada automaticamente.

Inspecione a imagem no tamanho do cartão real. Um rosto, uma etiqueta ou um recurso distinto do produto ainda devem ser reconhecíveis. Pequenas palavras incorporadas podem ser melhor fornecidas como texto real do cartão. Compare com a nitidez da luz, pois o forte contraste das bordas pode tornar uma pequena imagem ocupada. Teste um JPEG nas mesmas dimensões se o WebP não for útil em seu fluxo de trabalho. Use PNG para ativos que precisam de transparência existente; A exportação atual do WebP aqui é opaca.

Coloque o arquivo na grade real e verifique um telefone, um layout de largura de tablet e uma tela grande. Confirme se o navegador está realmente carregando o candidato a miniatura em vez da imagem em tamanho real. Forneça fontes responsivas adequadas e dimensões reservadas na implementação do site. Uma pequena exportação local não terá efeito se a página ainda solicitar um arquivo superdimensionado diferente para cada cartão.

Inspecione toda a interação de navegação. Uma miniatura usada como link precisa de um nome acessível por meio de sua imagem ou texto ao redor. Mantenha a área recortada consistente o suficiente para digitalizar sem ocultar conteúdo relevante. Para uma galeria, teste se a abertura do item mostra uma fonte maior apropriada. Batch somente imagens compartilhando a mesma função e inspecione valores discrepantes, como produtos altos ou interiores largos individualmente. O conversor cria os arquivos localmente e não modifica seu site nem publica uma galeria. Mantenha o conjunto original para que as regras de miniaturas possam ser alteradas posteriormente.

Escolha um produto alto e uma fotografia de sala ampla como testes em miniatura. Coloque-os ao lado de uma imagem comum em quadrado na grade real. Verifique se o produto compartilhado oculta o produto ou deixa a sala irreconhecível. Uma área recortada deliberada ou um candidato separado pode ser necessário para um outlier, mesmo que a maioria das imagens funcione com a mesma regra. Observe as etiquetas e as faces no tamanho normal do cartão e confirme se o link ainda faz sentido quando a imagem não está disponível. Esse teste ajuda você a avaliar a miniatura como parte da navegação e não como um pequeno arquivo visto por conta própria.