Saber utilizar o melhor formato de imagem para publicar em seu website é primordial para que você tenha um ótimo desempenho, considerando que tempo é muito importante, mas qualidade também! Por este motivo, colocamos abaixo informações sobre os formatos mais comuns e os novos no mercado para que você saiba como utilizá-los e onde utilizá-los.
Os formatos mais conhecidos são JPEG (JPG), PNG e GIF, os novos do pedaço são SVG que nada mais é quem um vetor, HEIC/HEIF, WEBP e AVIF, sendo este último o mais recente de todos. Para conhecer a compatibilidade dos formatos novos basta pesquisar no site caniuse.com e entender seu público para direcionar qual formato utilizar.
Existem vários softwares de compressão offline, como também, dependendo de sua plataforma, plugins que podem efetuar este trabalho para você, colocamos algumas especificações em cada formato para facilitar a diferenciação.
JPEG
Formato criado pelo "Joint Photographic Experts Group" que possui ótima compressão, com uma profundidade normal de 24 bits, ele oferece muito mais resolução de cores (não deve ser confundido com alcance ou gama) do que o olho humano pode discernir. Suporta compressão com perdas, explorando mecanismos conhecidos da visão humana.
Ótimo para imagens com muitas cores, preferência para 60% (High) ou 80% (Very High) de compressão pelo aplicativo de sua preferência, também é interessante a utilização da compactação Progressiva, mas quanto menor o tamanho do arquivo, menos eficaz e convêm usar o padrão Otimizado.
GIF
GIF suporta compressão LZW sem perdas e vários quadros que nos permitem produzir animações simples. A principal limitação desse formato é que ele é restrito a 256 cores.
A ativação da transparência as vezes reduz o tamanho. O ditter melhora a qualidade das bordas e dos degradês, porém é um formato mais recomendado para animações bem simples e pequenas.
PNG 8
Formato com até 256 cores como o GIF, transparência com qualidade semelhante, por exemplo, transparência em degradê não fica legal (tipo sombra), é possível regular a quantidade de cores de 4 cores, 16 cores, até 256 cores, para logos com poucas cores, é uma boa opção, tende a ser igual ou melhor que o JPEG produzindo menos artefatos, considerando a quantidade de cores. O PNG 8 tende a ter arquivos menores que o GIF.
Desativando a transparência o tamanho do arquivo reduz, se você utilizar o Fireworks para exportar o PNG 8 é possível ter transparência com sombra fica perfeita como o PNG 24.
PNG 24
Formato lossless com profundidade de cores de 24bits, é o melhor para imagens coloridas com transparências e gradiente e sombras, porém o tamanho do arquivo é grande para imagens de dimensões superiores a 200px e pequeno para imagens menores, é ideal para logos ou ilustrações que possuem transparência ou degradês.
Hoje em dia é recomendado utilizar formatos mais modernos, por exemplo, Logos podem ser utilizados com o SVG, ou WebP que terão redução considerável no tamanho do arquivo e excelente qualidade.
SVG
Método de exibição de recursos gráficos vetoriais básicos usando os elementos embed ou object. Como dito anteriormente, SVG nada mais é que um arquivo de vetores, portanto, tão complexo seja o vetor ele ainda será mais leve e sem perdas comparado a formatos acima. SVG 1.1 é o formato padrão mais utilizado com 2 casas decimais e elementos de estilo embutidos, tornam o arquivo mais prático de trabalhar em sistemas e CSS.
HEIC/HEIF
Em primeiro lugar, o contêiner de arquivo oferece suporte ao maior conjunto de recursos entre os formatos de imagem disponíveis. Suporta, por exemplo, imagens multi-frame com compressão multi-frame - um recurso chave para HDR eficiente, multi-focus ou multi-view imagens.
Em segundo lugar, ele suporta muitos tipos de dados que não são de imagem com uma flexibilidade notável. Atualmente, a maioria das imagens que usam esse contêiner são compactadas com um derivado para imagens do codec de vídeo H265 / HEVC, desenvolvido para lidar de forma eficiente com as resoluções 4k e 8k apresentadas pelos monitores de última geração. A codificação HEVC envolve operações mais complexas com menos restrições do que JPEG. Ele atinge uma eficiência de compressão muito maior ao custo de tempos de codificação um pouco maiores - o que não é um problema em fluxos de trabalho da web.
A vantagem direta é qualidade e tamanho reduzido, porém a desvantagem, sendo este um formato proprietário da Apple, tem pouca difusão nos demais dispositivos, sendo pouco compatível em outros navegadores.
WebP
Formato de imagem (baseado no formato de vídeo VP8) que suporta compactação com e sem perdas, bem como animação e transparência alfa. O WebP geralmente tem melhor compactação do que JPEG, PNG e GIF e foi projetado para substituí-los. O Google desenvolveu esse formato com o objetivo de fornecer um único formato de imagem compatível com a web para lidar com todos os casos de uso típicos.
É importante ressaltar que ele busca obter imagens mais claras do que JPEG, sem penalidades na qualidade visual, suporta compactação sem perdas e, ao contrário do JPEG, permite transparência e animações que podem combinar imagens codificadas com compactação sem e com perda. Em princípio, ele deve servir como um substituto para JPEG, PNG e GIF.
Hoje compatível com todos os navegadores recentes, oferece a melhor vantagem, porém é mais complexo encontrar aplicativos que suportam nativamente em seus computadores para poder salvar neste formato, o que é comum é encontrar plugins nos sites para que estes convertam para o formato WebP, estes plugins basicamente utilizam formato WebP para todos os navegadores compatíveis e o formato de origem (jpg, gif, png) para os navegadores incompatíveis. O ganho de velocidade é considerável.
AVIF
Um formato de imagem moderno baseado no formato de vídeo AV1. AVIF geralmente tem melhor compactação do que WebP, JPEG, PNG e GIF e é projetado para substituí-los. Ele traz uma eficiência muito maior na compressão herdada do uso de mecanismos de codificação AV1 intra-frame. Essas vantagens tornam esse formato atraente.
Outra vantagem significativa vem da Alliance for Open Media, o grande consórcio por trás de seu desenvolvimento como uma abordagem totalmente aberta, com uma licença aberta, livre de royalties. Grandes players como Google, Netflix, Adobe, Mozilla, Microsoft, Facebook e Amazon - atores importantes na cena gráfica e de vídeo da web - estão apoiando este novo formato e defendendo uma adoção rápida e ampla, tanto em software quanto em hardware.
Ainda não é totalmente compatível, porém é o futuro da imagem.
