A primeira pergunta que você precisa fazer é se uma imagem é realmente necessária para alcançar o efeito desejado. Um bom design é simples e sempre gera o melhor desempenho. Se for possível eliminar um recurso de imagem, que geralmente requer um grande número de bytes em relação a HTML, CSS, JavaScript e outros recursos na página, essa será sempre a melhor estratégia de otimização. Dito isso, uma imagem bem posicionada também pode comunicar mais informações do que mil palavras, por isso cabe a você encontrar esse equilíbrio.
Em seguida, considere se há uma tecnologia alternativa que possa entregar os resultados desejados, mas de maneira mais eficiente:
- Efeitos CSS (como sombras ou gradientes) e animações CSS podem ser usados para produzir recursos independentes de resolução que sempre parecem nítidos em todas as resoluções e níveis de zoom, geralmente com uma fração dos bytes exigidos por um arquivo de imagem.
- As fontes da Web permitem o uso de belas fontes, preservando a capacidade de selecionar, pesquisar e redimensionar texto, uma melhoria significativa na usabilidade.
Se você perceber que está codificando texto em um recurso de imagem, pare e reconsidere. Uma boa tipografia é essencial para um bom design, branding e legibilidade, mas o texto em imagens oferece uma experiência do usuário ruim: o texto não é selecionável, pesquisável, ampliável, inacessível e inadequado para dispositivos com alto DPI. O uso de fontes da Web exige um próprio conjunto de otimizações (link em inglês), mas aborda todas essas preocupações e é sempre uma opção melhor para mostrar texto.
Escolher o formato de imagem correto
Se tiver certeza de que uma imagem é a opção correta, você deverá selecionar cuidadosamente o tipo certo de imagem para o trabalho.
- Os gráficos vetoriais usam linhas, pontos e polígonos para representar uma imagem.
- Os gráficos de raster representam uma imagem codificando os valores individuais de cada pixel dentro de uma grade retangular.
Cada formato tem seu próprio conjunto de prós e contras. Os formatos vetoriais são ideais para imagens que consistem em formas geométricas simples, como logotipos, texto ou ícones. Eles oferecem resultados nítidos em todas as configurações de resolução e zoom, o que os torna um formato ideal para telas e recursos de alta resolução que precisam ser exibidos em tamanhos variados.
No entanto, os formatos vetoriais deixam a desejar quando a cena é complicada (por exemplo, uma foto). A quantidade de marcação SVG para descrever todas as formas pode ser extremamente alta e a saída ainda pode não parecer "fotorrealista". Nesse caso, use um formato de imagem de varredura, como PNG, JPEG, WebP ou AVIF.
Imagens rasterizadas não têm as mesmas propriedades de ser independente de resolução ou zoom. Quando você aumenta uma imagem rasterizada, é possível ver gráficos irregulares e desfocados. Por isso, pode ser necessário salvar várias versões de uma imagem rasterizada em várias resoluções para oferecer a melhor experiência aos usuários.
Implicações das telas de alta resolução
Existem dois tipos diferentes de pixels: pixels CSS e pixels do dispositivo. Um único pixel CSS pode corresponder diretamente a um único pixel de dispositivo ou ter suporte de vários pixels de dispositivo. Qual é o objetivo? Quanto mais pixels de dispositivo houver, mais fino será o detalhe do conteúdo exibido na tela.
Telas com DPI alto (HiDPI) produzem belos resultados, mas há uma troca óbvia: os recursos de imagem exigem mais detalhes para aproveitar as contagens mais altas de pixels do dispositivo. A boa notícia é que as imagens vetoriais são ideais para essa tarefa, já que podem ser renderizadas em qualquer resolução com resultados nítidos. É possível que haja um custo de processamento mais alto para renderizar os detalhes mais refinados, mas o recurso subjacente é o mesmo e não depende da resolução.
Por outro lado, as imagens de varredura representam um desafio muito maior, pois codificam os dados de imagem por pixel. Portanto, quanto maior o número de pixels, maior o tamanho do arquivo de uma imagem de varredura. Por exemplo, vamos considerar a diferença entre um recurso de foto exibido em 100 x 100 pixels (CSS):
| Resolução da tela | Total de pixels | Tamanho de arquivo descompactado (4 bytes por pixel) |
|---|---|---|
| 1 x | 100 x 100 = 10.000 | 40.000 bytes |
| 2x | 100 x 100 x 4 = 40.000 | 160.000 bytes |
| 3x | 100 x 100 x 9 = 90.000 | 360.000 bytes |
Quando dobramos a resolução da tela física, o número total de pixels aumenta por um fator de quatro: o dobro do número de pixels horizontais, vezes o dobro do número de pixels verticais. Portanto, uma tela "2x" não apenas dobra, mas quadruplica o número de pixels necessários.
Então, o que isso significa na prática? Telas de alta resolução permitem que você forneça belas imagens, que podem ser um ótimo recurso do produto. No entanto, telas de alta resolução também exigem imagens de alta resolução, portanto:
- Prefira imagens vetoriais sempre que possível, pois elas não dependem da resolução e sempre apresentam resultados nítidos.
- Se uma imagem rasterizada for necessária, veicule imagens responsivas.
Recursos de diferentes formatos de imagem de varredura
Além de diferentes algoritmos de compactação com e sem perda, diferentes formatos de imagem oferecem suporte a recursos variados, como canais de animação e transparência (Alfa). Como resultado, a escolha do "formato certo" para uma imagem específica é uma combinação de resultados visuais desejados e requisitos funcionais.
| Formato | Transparência | Animação | Navegador |
|---|---|---|---|
| PNG (em inglês) | Sim | Não | All |
| JPEG (link em inglês) | Não | Não | All |
| WebP | Sim | Sim | Todos os navegadores modernos. Consulte Posso usar? |
| AVIF (link em inglês) | Sim | Sim | Não. Consulte Posso usar? |
Existem dois formatos de imagem rasterizada universalmente compatíveis: PNG e JPEG. Além desses formatos, os navegadores modernos suportam o formato WebP mais recente, enquanto apenas alguns oferecem suporte ao formato AVIF mais recente. Os dois formatos mais recentes oferecem melhor compactação geral e mais recursos. Então, qual formato você deve usar?
WebP e AVIF geralmente oferecem melhor compactação do que formatos mais antigos e precisam ser usados sempre que possível. Você pode usar imagens WebP ou AVIF com uma imagem JPEG ou PNG como substituto. Consulte Usar imagens WebP para saber mais detalhes.
Em termos de formatos de imagem mais antigos, considere o seguinte:
- Você precisa de animação? Use elementos
<video>.- E os GIFs? O GIF limita a paleta a, no máximo, 256 cores
e cria tamanhos de arquivo significativamente maiores do que os elementos
<video>. Consulte Substituir GIFs animados por vídeo.
- E os GIFs? O GIF limita a paleta a, no máximo, 256 cores
e cria tamanhos de arquivo significativamente maiores do que os elementos
- Você precisa preservar detalhes finos com a mais alta resolução? Use PNG ou WebP sem perda.
- O PNG não aplica nenhum algoritmo de compactação com perda além da escolha do tamanho da paleta de cores. Como resultado, ele vai produzir a melhor qualidade de imagem, mas a um custo de tamanho de arquivo significativamente maior do que outros formatos. Use com critério.
- O WebP tem um modo de codificação sem perda que pode ser mais eficiente do que o PNG.
- Se o recurso de imagem tiver imagens compostas por formas geométricas, considere a conversão para um formato vetorial (SVG).
- Se o recurso de imagem tiver texto, pare e reconsidere. Não é possível selecionar, pesquisar nem alterar o zoom de textos em imagens. Se você precisar transmitir uma aparência personalizada (para branding ou outros motivos), use uma fonte da Web.
- Você está otimizando uma foto, uma captura de tela ou um recurso de imagem semelhante? Usar JPEG, WebP com perda ou AVIF com perda.
- O JPEG usa uma combinação de otimização com e sem perda para reduzir o tamanho do arquivo do ativo de imagem. Experimente vários níveis de qualidade de JPEG para encontrar a melhor qualidade em relação ao tamanho do arquivo para seu ativo.
- WebPs com perda ou AVIF com perda podem ser alternativas aceitáveis para JPEG, mas saiba que o modo com perda do WebP descarta algumas informações de chroma para conseguir imagens menores. Isso significa que as cores selecionadas podem não ser as mesmas de um JPEG equivalente.
Por fim, observe que, se você estiver usando uma WebView para renderizar conteúdo no aplicativo específico da plataforma, terá controle total do cliente e poderá usar o WebP exclusivamente. O Facebook e muitos outros usam WebP para fornecer todas as imagens nos aplicativos. A economia com certeza vale a pena.
Impacto na Maior exibição de conteúdo (LCP)
As imagens podem ser candidatas à LCP. Isso significa que o tamanho de uma imagem afeta o tempo de carregamento dela. Quando uma imagem é candidata a LCP, a codificação eficiente dela é crucial para melhorar a LCP.
Você deve se empenhar para aplicar as recomendações deste artigo a fim de que o desempenho perceptível de uma página seja o mais rápido possível para todos os usuários. A LCP faz parte do desempenho perceptivo, porque mede a rapidez com que o maior elemento (e, portanto, mais perceptível) na página é exibido.