A primeira pergunta que você deve se fazer é se uma imagem é necessárias para alcançar o efeito desejado. Se você puder eliminar um recurso de imagem, que normalmente requer um grande número de bytes em relação a HTML, CSS, JavaScript e outros recursos na página, essa é 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, você deve considerar se há uma tecnologia alternativa que possa gerar melhores resultados, mas de maneira mais eficiente:
- Efeitos de CSS (como sombras ou gradientes) e animações CSS pode ser usada para produzir recursos independentes de resolução que sempre são nítidos em todas as resoluções e níveis de zoom. muitas vezes por uma fração dos bytes exigidos por um arquivo de imagem.
- Fontes da Web permitem o uso de belas famílias tipográficas preservando a capacidade de selecionar, pesquisar e redimensionar o texto, uma melhoria significativa na usabilidade.
Se você perceber que está codificando texto em um recurso de imagem, pare e reconsidere. Uma boa tipografia é fundamental para ter um bom design, marca e legibilidade. mas o texto em imagens oferece uma experiência do usuário ruim: o texto não é selecionável, não pesquisável, não expansível, inacessíveis e não compatíveis com dispositivos com alto DPI. O uso de fontes da Web requer seu próprio conjunto de otimizações, mas resolve todas essas preocupações e é sempre a melhor opção para mostrar o texto.
Escolha o formato de imagem correto
Se você tiver certeza de que uma imagem é a opção correta, selecione cuidadosamente o tipo certo de imagem para o job.
- Gráficos vetoriais usar linhas, pontos e polígonos para representar uma imagem.
- Gráficos rasterizados para representar uma imagem, codificando os valores individuais de cada pixel dentro de uma grade retangular.
Cada formato tem o próprio conjunto de vantagens e desvantagens. Os formatos vetoriais são ideais para imagens que consistem em formas geométricas menos complexas, como logotipos, texto ou ícones. Eles geram resultados nítidos em todas as resoluções e configurações de 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 rasterizada como PNG, JPEG, WebP ou AVIF.
Imagens rasterizadas não têm as mesmas propriedades interessantes de serem independentes de resolução ou de zoom. : ao dimensionar uma imagem rasterizada, você verá gráficos irregulares e borrados. Por isso, pode ser necessário salvar diversas 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
Há dois tipos diferentes de pixels: CSS e dispositivos. Um único pixel de CSS pode corresponder diretamente a um único pixel de dispositivo ou a vários pixels de dispositivo. Qual é o sentido? Bem, quanto mais pixels do dispositivo houver, mais finos serão os detalhes do conteúdo exibido na tela.
Telas com DPI alto (HiDPI) produzem ótimos resultados, mas há uma compensação óbvia: os recursos de imagem exigem mais detalhes para aproveitar as contagens maiores de pixels do dispositivo. A boa notícia é que as imagens vetoriais são ideais para essa tarefa, pois eles podem ser renderizados em qualquer resolução com resultados nítidos, você pode incorrer em um custo de processamento mais alto para renderizar os detalhes mais finos, mas o recurso subjacente é o mesmo e não depende da resolução.
Por outro lado, as imagens rasterizadas representam um desafio muito maior porque codificam os dados da imagem por pixel. Portanto, quanto maior o número de pixels, maior o tamanho do arquivo de uma imagem rasterizada. Considere a diferença entre um recurso de foto exibido em 100 x 100 pixels (CSS):
| Resolução da tela | Total de pixels | Tamanho do 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 aumentará por um fator de quatro: o dobro do número de pixels horizontais e o dobro do número de pixels verticais. Portanto, um "2x" tela não apenas dobra, mas também quadruplica o número de pixels necessários!
O que isso significa na prática? Telas de alta resolução permitem exibir belas imagens, o que pode 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, porque elas não dependem de resolução e sempre geram resultados nítidos.
- Se uma imagem de varredura for necessária, disponibilize imagens responsivas.
Recursos de diferentes formatos de imagem rasterizados
Além de diferentes algoritmos de compressão com e sem perda, formatos de imagem diferentes oferecem suporte a recursos diversos, como canais de animação e transparência (Alfa). Por isso, a escolha do "formato certo" para uma imagem específica é uma combinação dos resultados visuais apropriados e dos requisitos funcionais.
| Formato | Transparência | Animação | Navegador |
|---|---|---|---|
| PNG | Sim | Sim (APNG) | Todos |
| JPEG | Não | Não | Todos |
| WebP | Sim | Sim | Todos os navegadores modernos. Consulte Posso usar? |
| AVIF | Sim | Sim | Todos os navegadores modernos. Consulte Posso usar? |
Existem dois formatos de imagem rasterizados universalmente compatíveis: PNG e JPEG. Além desses formatos, os navegadores modernos são compatíveis com os formatos de imagem mais recentes WebP e AVIF. Ambos os formatos mais novos oferecem melhor compactação geral e mais recursos. Então, qual formato você deve usar?
WebP e AVIF geralmente oferecem uma compactação melhor do que formatos mais antigos, e devem ser usadas sempre que possível. Você pode usar imagens WebP ou AVIF com uma imagem JPEG ou PNG como substituto. Consulte Usar imagens WebP para 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>. APNG oferece mais cores que o GIF, mas também é significativamente maior do que o vídeo formatos com qualidade visual razoavelmente equivalente. Consulte Substitua 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 produzirá a imagem de melhor qualidade, mas a um custo de tamanho de arquivo significativamente maior do que outros formatos. Use com cuidado.
- O WebP tem um modo de codificação sem perdas que pode ser mais eficiente do que o PNG.
- Se o recurso de imagem tiver imagens compostas por formas geométricas, considere convertê-lo 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? Use JPEG, WebP com perda ou AVIF.
- O JPEG usa uma combinação de otimização com e sem perda para reduzir o tamanho do arquivo do ativo de imagem. Tente vários níveis de qualidade JPEG para encontrar a melhor relação entre qualidade e tamanho de arquivo para seu recurso.
- WebP com perda ou AVIF com perdas são ótimas alternativas de JPEG para imagens com qualidade da Web, mas saiba que o modo com perda descarta algumas informações para conseguir imagens menores. Isso significa que as cores selecionadas podem não ser iguais a um JPEG equivalente.
Por fim, se você estiver usando uma WebView para renderizar conteúdo no seu aplicativo específico da plataforma, você tem controle total do cliente e pode usar exclusivamente o WebP! O Facebook e muitos outros usam o WebP para fornecer todas as suas imagens em seus aplicativos— a economia valem a pena.
Impacto na Maior exibição de conteúdo (LCP)
As imagens podem ser candidatos à LCP. Isso significa que o tamanho de uma imagem afeta o tempo de carregamento. Quando uma imagem é candidata à LCP, codificá-la de forma eficiente é crucial para melhorar a LCP.
Aplique as orientações fornecidas neste guia para que o desempenho perceptivo 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.