Animated Images, Transparencies and Backgrounds

Os websites usam diversos tipos de imagem, tanto de formatos varredura como de vetor. Isso oferece muitas opções aos desenvolvedores, mas levanta a questão sobre qual formato é o melhor para qual caso de uso?

Analisaremos casos de uso de imagens comuns e apresentaremos algumas recomendações e considerações para cada um deles.

Animações

Um gráfico animado é qualquer imagem que tenha mais de um quadro e consiga representar o movimento de uma forma ou de outra.

Vários formatos suportam animação (GIF, PNG e WebP), mas devido ao seu suporte abrangente ao navegador, a maioria dos websites usa o GIF (observe que esta opção é limitada a 256 cores com transparência de 1 bit).

Transparências

As imagens transparentes são úteis quando você não tem certeza da cor do plano de fundo em que a imagem será exibida. Com transparência binária, uma cor da paleta de cores indexadas é marcada como a cor transparente. Mais avançada é a transparência alfa. As informações sobre transparência são armazenadas em um canal separado, o canal alfa.

Requisitos simples de transparência podem ser tratados com o GIF e sua transparência binária. PNG, WebP, JPEG 2000 e JPEG XR fornecem recursos aprimorados através do uso de canais alfa.

Gradientes de plano de fundo

Assim como você pode declarar o plano fundo de um elemento como sendo uma cor sólida no CSS, você também pode declarar esse plano de fundo como sendo um gradiente. Os gradientes são normalmente uma cor que se desvanece em outra, mas no CSS você pode controlar todos os aspectos de como isso acontece, desde a direção para as cores (quantas você quiser) até onde essas mudanças de cor acontecem.

Usar gradientes declarados no CSS, ao invés de usar um arquivo de imagem real, é melhor para o controle e desempenho.

Logotipos

Os logotipos são puramente gráficos (símbolos/ícones) ou são compostos pelo nome da organização (um logotipo ou marca de palavras).

Os formatos vetoriais (por exemplo, SVG) oferecerão a melhor qualidade para logotipos (bordas suaves, redimensionamento sem perda de qualidade, tamanho de arquivo pequeno), mas você pode usar um formato de imagem raster (tipicamente PNG) com alta resolução.

Clip Art

Coleções de Clip art de fotos ou imagens podem ser importadas para um documento ou outro programa. As imagens podem ser tanto gráficos raster como gráficos vetoriais.

O GIF é adequado para imagens coloridas sólidas (como em desenhos animados ou clip art). As imagens GIF também podem ser colocadas em uma página da Web com um fundo claro, para que você possa colocá-las em camadas.

Imagens tipo mezanino

As imagens tipo mezanino normalmente têm uma resolução mínima de 300 dpi (pontos por polegada) e são mais comumente associadas a fotografias.

JPEG de alta resolução tornou-se bastante popular para mezaninos (originais) baseados na web, pois ainda equilibra qualidade e tamanho através de compressão com perdas. Considere PNG se você quiser a melhor qualidade com compactação sem perdas. Para melhor habilitar o uso de imagens em vários meios (por exemplo, web e impressão), TIFF (Tagged Image File Format) é a sua melhor aposta para os originais. Lembre-se de que você precisará converter de TIFF para formatos amigáveis para a Web.

Responsivo

Uma imagem responsiva é uma imagem que se adapta em resposta a diferentes condições ambientais: as adaptações podem incluir, entre outros, alterar as dimensões, cortar ou mesmo alterar a origem de uma imagem. O uso de imagens responsivas pode contribuir para melhorias no desempenho da Web, enviando arquivos menores para usuários móveis com conexões mais lentas.

O JPEG é bem adequado para a compatibilidade entre navegadores. Ao exibir imagens em navegadores compatíveis, WebP (Chrome e Opera), JPEG 2000 (Safari), e JPEG XR (Internet Explorer e Edge) são excelentes escolhas.

Sprites

Os sprites são usados em web design como uma forma de melhorar o desempenho, combinando numerosas imagens pequenas ou ícones numa imagem maior chamada folha de sprite ou conjunto de azulejos.

Os sprites também são usados para ícones, sendo que os GIF/PNG podem ser os melhores, mas ocasionalmente vemos JPEGs.

As folhas de estilo em cascata (CSS) são frequentemente usadas para ajudar a exibir as imagens, mas os sprites em si são normalmente PNG ou JPEG.

Ícones

Os ícones podem ser usados como botões ou indicadores visuais em um website. Semelhante aos sprites (acima), normalmente os ícones são agrupados em conjunto. Há muitas opções para esse tipo de imagem, dependendo do uso. No entanto, os SVG propiciam o melhor desempenho, e as fontes de ícone também podem ser usadas se bem gerenciadas ao carregar a página. Fora destes formatos normais como GIF e PNG também podem ser usados. Ao carregar um conjunto de ícones (seja como uma fonte ou um sprite), certifique-se de medir o custo de carregamento dos ícones que você não usa.

Cantos arredondados ou peças de layout

Usar imagens para ajudar a corrigir estilos, alturas ou larguras na tela ou para usar efeitos como cantos arredondados ainda é, infelizmente, comum em muitos websites. Em resumo, não use imagens para isso, em vez disso, use CSS.

Cantos arredondados são muito bem suportados em todos os navegadores e permitem algumas configurações mais avançadas, como visto abaixo.

Resumo

Escolher o formato ideal para o seu caso de uso é essencial para maximizar o impacto das suas imagens. Lembre-se de que cada formato tem suas vantagens e desvantagens, e sua decisão final provavelmente precisará equilibrar essas considerações.

Saiba mais sobre como gerenciar vários casos de uso de imagens on-line com o AkamaiImage & Video Manager.