Escolha dimensões de imagem úteis para monitores de alta densidade

um cartão exibido em 800 CSS Pixels Wide pode usar um candidato a imagem que seja 1600 pixels de imagem de largura como um 2x Exemplo. O navegador pode escolher uma fonte apropriada com base no layout, na densidade do dispositivo e em outras condições quando o site fornece uma marcação de imagem responsiva. Os 1600-Pixel não significa que o cartão deve ocupar 1600 CSS Pixels na página.

Meça o layout real antes de exportar. Uma coluna de artigo, um banner de largura total e uma pequena placa de produto raramente precisam do mesmo tamanho da fonte. Verifique também o layout do telefone, onde a imagem pode ocupar uma largura diferente ou usar uma cultura diferente. Tornar cada arquivo duas vezes a maior largura da viewport de desktop pode desperdiçar bytes. Trate as exportações de alta densidade como candidatas a uma implementação real e responsiva, em vez de um único arquivo superdimensionado que todo dispositivo deve ser baixado.

Esta página começa com um WebP Caixa de ajuste de 1600×1600 pixels. É um limite ilustrativo, então substitua-o por valores com base no tamanho do monitor que você mediu. Ajustar-se dentro mantém proporções e não amplia uma fonte menor. Por exemplo, um amplo original pode chegar 1600 Pixels de toda a altura, enquanto um retrato se ajusta à altura. Verifique as dimensões reais da saída.

Se uma fonte for apenas 700 pixels de largura, escrevendo um 1600-Pixel Export não cria o detalhe de um original maior. Use uma fonte melhor ou aceite um candidato menor. Compare a nitidez da luz com OFF após o redimensionamento e inspecione as texturas finas no tamanho pretendido. Para uso em gráficos transparentes PNG Em vez disso, uma vez que a corrente WebP A exportação aqui é opaca. Mantenha o design original ou a fotografia para criar candidatos diferentes posteriormente.

O conversor produz um arquivo; Seu site ainda precisa selecionar e apresentá-lo corretamente. Forneça candidatos de origem adequados, dicas precisas de tamanho e dimensões de imagem reservadas na implementação. Um telefone não deve receber a imagem maior meramente porque existe. Verifique a imagem baixada em Ferramentas de desenvolvedor de navegador ao avaliar a página final, pois um sistema de gerenciamento de conteúdo pode transformá-la novamente.

Veja a página em configurações de tela ordinárias e de alta densidade e compare detalhes com o tamanho da transferência. Uma imagem de alta resolução não é automaticamente a melhor troca para um pequeno cartão decorativo. Da mesma forma, uma imagem excessivamente pequena pode parecer ruim em uma visão de produto grande. Teste conteúdo significativo, como rostos e rótulos, em vez de julgar apenas um fundo desfocado. Continue carregando a prioridade adequada à posição da imagem e meça a página real antes de reivindicar uma melhoria na velocidade ou nos sinais vitais básicos da web.

Suponhamos que seu cartão mais largo seja de 400 pixels CSS e uma ilustração permaneça clara nessa largura. Um candidato de 800 pixels é uma exportação possível de 2x quando a fonte o suporta. Verifique também o cartão em layouts mais estreitos, pois uma imagem que abrange toda a tela do telefone pode ter uma largura de exibição diferente da placa da área de trabalho. Exporte do original para cada candidato necessário em vez de ampliar o menor. Confirme qual arquivo o navegador seleciona na página real. Essa verificação final de seleção é o que conecta um cálculo de dimensões locais aos bytes que os visitantes realmente recebem pela imagem.