Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • Escolha o formato de imagem certo
  • Implicações de telas de alta resolução
  • Recursos de diferentes formatos de imagem raster

Escolha o formato de imagem certo

Aug 30, 2018 — Atualizado Jun 18, 2020
Available in: English, Español e 한국어
Appears in: Tempos de carregamento rápidos
Ilya Grigorik
Ilya Grigorik
TwitterGitHub
Nesta página
  • Escolha o formato de imagem certo
  • Implicações de telas de alta resolução
  • Recursos de diferentes formatos de imagem raster

A primeira pergunta que você deve fazer é se uma imagem é, de fato, necessária para alcançar o efeito que você deseja. Um bom design é simples e sempre produzirá o melhor desempenho. Se você puder eliminar um recurso de imagem, que geralmente requer um grande número de bytes em relação a HTML, CSS, JavaScript e outros ativos 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, portanto, cabe a você encontrar esse equilíbrio.

Em seguida, você deve considerar se existe uma tecnologia alternativa que possa fornecer os resultados desejados, mas de uma maneira mais eficiente:

  • Efeitos CSS (como sombras ou gradientes) e animações CSS podem ser usados para produzir ativos independentes de resolução que sempre parecem nítidos em cada resolução e nível de zoom, geralmente em uma fração dos bytes exigidos por um arquivo de imagem.
  • Fontes da Web permitem o uso de belos tipos de fontes, preservando a capacidade de selecionar, pesquisar e redimensionar o texto - uma melhoria significativa na usabilidade.

Se você alguma vez codificar texto em um recurso de imagem, pare e reconsidere. Uma boa tipografia é crítica 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, não pesquisável, não pode ser ampliado, não acessível e não é amigável para dispositivos de alto DPI. O uso de fontes da web requer seu próprio conjunto de otimizações, mas atende a todas essas questões e é sempre a melhor opção para exibir texto.

Escolha o formato de imagem certo #

Se você tiver certeza de que uma imagem é a opção correta, você deve selecionar cuidadosamente o tipo certo de imagem para o trabalho.

Imagens vetoriais e raster ampliadas
Imagem vetorial ampliada (L) imagem raster (R)
  • Gráficos vetoriais usam linhas, pontos e polígonos para representar uma imagem.
  • Gráficos raster representam uma imagem codificando os valores individuais de cada pixel em 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 fornecem resultados nítidos em todas as configurações de resolução e zoom, o que os torna o formato ideal para telas e recursos de alta resolução que precisam ser exibidos em tamanhos variados.

No entanto, os formatos de vetor ficam aquém quando a cena é complicada (por exemplo, uma foto): a quantidade de marcação SVG para descrever todas as formas pode ser proibitivamente alta e a saída pode ainda não parecer "fotorrealística". Quando for esse o caso, é quando você deve usar um formato de imagem raster como PNG, JPEG ou WebP.

As imagens raster não têm as mesmas propriedades de serem independentes de resolução ou zoom - ao aumentar a escala de uma imagem raster, você verá gráficos irregulares e borrados. Como resultado, pode ser necessário salvar várias versões de uma imagem rasterizada em várias resoluções para fornecer a experiência ideal aos usuários.

Implicações de telas de alta resolução #

Existem dois tipos diferentes de pixels: pixels CSS e pixels de dispositivo. Um único pixel CSS pode corresponder diretamente a um único pixel de dispositivo ou pode ser apoiado por vários pixels de dispositivo. Qual é o ponto? Bem, quanto mais pixels de dispositivo houver, mais precisos serão os detalhes do conteúdo exibido na tela.

Três imagens mostrando a diferença entre pixels CSS e pixels do dispositivo.
A diferença entre pixels CSS e pixels do dispositivo.

Telas de alto DPI (HiDPI) produzem resultados bonitos, mas há uma desvantagem óbvia: os ativos de imagem requerem mais detalhes para aproveitar as vantagens das contagens de pixels mais altas do dispositivo. A boa notícia é que as imagens vetoriais são ideais para essa tarefa, pois podem ser renderizadas 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 ativo subjacente é o mesmo e não depende da resolução.

Por outro lado, as imagens raster representam um desafio muito maior porque codificam os dados da imagem por pixel. Portanto, quanto maior o número de pixels, maior será o tamanho do arquivo de uma imagem raster. Como exemplo, vamos considerar a diferença entre um recurso de foto exibido em pixels de 100 x 100 (CSS):

Resolução da telaPixels totaisTamanho do arquivo não compactado (4 bytes por pixel)
1x100 x 100 = 10.00040.000 bytes
2x100 x 100 x 4 = 40.000160.000 bytes
3x100 x 100 x 9 = 90.000360.000 bytes

Quando duplicamos 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. Conseqüentemente, 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ê exiba belas imagens, o que pode ser um ótimo recurso do produto. No entanto, telas de alta resolução também requerem imagens de alta resolução, portanto:

  • Prefira imagens vetoriais sempre que possível, pois elas são independentes da resolução e sempre fornecem resultados nítidos.
  • Se uma imagem raster for necessária, exiba imagens responsivas.

Recursos de diferentes formatos de imagem raster #

Além de diferentes algoritmos de compactação com e sem perdas, diferentes formatos de imagem oferecem suporte a diferentes recursos, como canais de animação e transparência (alfa). Como resultado, a escolha do "formato certo" para uma determinada imagem é uma combinação dos resultados visuais desejados e dos requisitos funcionais.

FormatoTransparênciaAnimaçãoNavegador
PNGsimNãoTudo
JPEGNãoNãoTudo
WebPsimsimTodos os navegadores modernos. Veja Posso usar?

Existem dois formatos de imagem raster com suporte universal: PNG e JPEG. Além desses formatos, os navegadores modernos suportam o formato mais recente WebP, que oferece melhor compactação geral e mais recursos. Então, qual formato você deve usar?

O formato WebP geralmente fornece melhor compactação do que os formatos mais antigos e deve ser usado sempre que possível. Você pode usar o WebP junto com outro formato de imagem como um substituto. Consulte Usar imagens WebP para obter mais detalhes.

Em termos de formatos de imagem mais antigos, considere o seguinte:

  1. Você precisa de animação? Use elementos <video>
    • E quanto ao GIF? O GIF limita a paleta de cores 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.
  2. Você precisa preservar os detalhes finos com a resolução mais alta? Use PNG.
    • PNG não aplica nenhum algoritmo de compressão com perdas além da escolha do tamanho da paleta de cores. Como resultado, ele produzirá imagem da mais alta qualidade, mas a um custo de tamanho de arquivo significativamente maior do que outros formatos. Use criteriosamente.
    • Se o ativo de imagem contiver imagens compostas de formas geométricas, considere convertê-lo em um formato vetorial (SVG)!
    • Se o ativo de imagem contiver texto, pare e reconsidere. O texto nas imagens não pode ser selecionado, pesquisado ou "ampliado". Se você precisar transmitir uma aparência personalizada (por motivos de marca ou outros), use uma fonte da web.
  3. Você está otimizando uma foto, captura de tela ou recurso de imagem semelhante? Use JPEG.
    • JPEG usa uma combinação de otimização com e sem perdas para reduzir o tamanho do arquivo do ativo de imagem. Experimente vários níveis de qualidade JPEG para encontrar a melhor relação entre qualidade e tamanho de arquivo para o seu ativo.

Por fim, observe que se você estiver usando um WebView para renderizar conteúdo em seu aplicativo específico da plataforma, terá controle total do cliente e poderá usar o WebP exclusivamente! O Facebook e muitos outros usam o WebP para fornecer todas as suas imagens em seus aplicativos - a economia definitivamente vale a pena.

DesempenhoImagens
Last updated: Jun 18, 2020 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.