Quais são os diferentes casos de uso de PNG vs. GIF vs. JPEG vs. SVG?

Quando certos tipos de arquivo de imagem devem ser usados ​​na criação de sites ou interfaces, etc?

Quais são seus pontos fortes e fracos?

Eu sei que PNG e GIF são sem perdas, enquanto JPEG é com perdas.
Mas qual é a principal diferença entre PNG e GIF?
Por que devo preferir um ao outro? O que é SVG e quando devo usá-lo?

Se você não se importa com cada pixel, deve sempre usar o JPEG, já que é o mais "leve"?

Você deve estar ciente de alguns fatores-chave ...

Primeiro, existem dois tipos de compactação: sem perdas e com perdas .

• Sem perdas significa que a imagem é reduzida, mas sem prejudicar a qualidade.
• Com perdas significa que a imagem é feita (ainda) menor, mas prejudica a qualidade. Se você salvasse uma imagem em um formato com perda repetidamente, a qualidade da imagem pioraria progressivamente.

Também existem diferentes profundidades de cores (paletas): cores indexadas e cores diretas .

• Indexado significa que a imagem pode armazenar apenas um número limitado de cores (geralmente 256), controlado pelo autor, em algo chamado Mapa de Cores
• Direto significa que você pode armazenar milhares de cores que não foram escolhidas diretamente pelo autor

BMP - Sem perdas / indexado e direto

Este é um formato antigo. É sem perdas (nenhum dado de imagem é perdido ao salvar), mas também há pouca ou nenhuma compactação, o que significa que o BMP resulta em tamanhos de arquivo MUITO grandes. Pode ter paletas indexadas e diretas, mas isso é um pequeno consolo. Os tamanhos dos arquivos são tão desnecessariamente grandes que ninguém realmente usa esse formato.

Bom para: nada realmente. Não há nada que o BMP se destaque ou que não seja feito melhor por outros formatos.

GIF - somente sem perdas / indexado

O GIF usa compactação sem perdas, o que significa que você pode salvar a imagem repetidamente e nunca perder dados. Os tamanhos dos arquivos são muito menores que o BMP, porque uma boa compactação é realmente usada, mas só pode armazenar uma paleta Indexada. Isso significa que, na maioria dos casos de uso , só pode haver no máximo 256 cores diferentes no arquivo. Parece uma quantidade bastante pequena, e é.

As imagens GIF também podem ser animadas e ter transparência.

Bom para: logotipos, desenhos de linha e outras imagens simples que precisam ser pequenas. Realmente usado apenas para sites.

JPEG - Perdido / Direto

As imagens JPEG foram projetadas para tornar as imagens fotográficas detalhadas tão pequenas quanto possível, removendo as informações que o olho humano não notará. Como resultado, é um formato com perda e salvar o mesmo arquivo repetidamente resultará na perda de mais dados ao longo do tempo. Ele possui uma paleta de milhares de cores e, portanto, é ótimo para fotografias, mas a compactação com perdas significa que é ruim para logotipos e desenhos de linha: eles não apenas parecerão confusos, mas também terão um tamanho de arquivo maior em comparação aos GIFs!

Bom para: fotografias. Além disso, gradientes.

PNG-8 - Sem perdas / indexado

PNG é um formato mais recente e PNG-8 (a versão indexada de PNG) é realmente um bom substituto para GIFs. Infelizmente, no entanto, há algumas desvantagens: primeiro, ele não suporta animação como o GIF (pode, mas pode ser, mas apenas o Firefox parece suportá-la, ao contrário da animação GIF suportada por todos os navegadores). Em segundo lugar, há alguns problemas de suporte com navegadores mais antigos como o IE6. Em terceiro lugar, softwares importantes como o Photoshop têm uma implementação muito ruim do formato. (Porra, Adobe!) O PNG-8 pode armazenar apenas 256 cores, como GIFs.

Bom para: O principal fator que o PNG-8 faz melhor que os GIFs é ter suporte para a transparência alfa.

PNG-24 - Sem perdas / direto

PNG-24 é um ótimo formato que combina a codificação sem perdas com cores diretas (milhares de cores, assim como JPEG). É muito parecido com o BMP nesse sentido, exceto que o PNG realmente comprime imagens, resultando em arquivos muito menores. Infelizmente, os arquivos PNG-24 ainda serão maiores que os JPEGs (para fotos) e GIFs / PNG-8s (para logotipos e gráficos); portanto, você ainda precisa considerar se realmente deseja usá-lo.

Embora os PNG-24s permitam milhares de cores durante a compactação, eles não se destinam a substituir imagens JPEG. Uma fotografia salva como PNG-24 provavelmente será pelo menos 5 vezes maior que uma imagem JPEG equivalente, com muito pouca melhoria na qualidade visível. (Obviamente, esse pode ser um resultado desejável se você não estiver preocupado com o tamanho do arquivo e desejar obter a melhor qualidade de imagem possível.)

Assim como o PNG-8, o PNG-24 também suporta transparência alfa.

SVG - sem perdas / vetor

Um tipo de arquivo que está crescendo em popularidade atualmente é o SVG, que é diferente do que acima, pois é um formato de arquivo vetorial (os acima são todos rasterizados ). Isso significa que na verdade é composto de linhas e curvas em vez de pixels. Ao ampliar uma imagem vetorial, você ainda vê uma curva ou uma linha. Ao ampliar uma imagem raster, você verá pixels.

Por exemplo:

Isso significa que o SVG é perfeito para logotipos e ícones que você deseja manter a nitidez nas telas Retina ou em tamanhos diferentes. Isso também significa que um pequeno logotipo SVG pode ser usado em um tamanho muito maior (maior) sem degradar a qualidade da imagem - algo que exigiria um arquivo maior separado (em termos de tamanho de arquivo) com formatos raster.

Os tamanhos de arquivo SVG geralmente são pequenos, mesmo visualmente muito grandes, o que é ótimo. Vale lembrar, no entanto, que depende da complexidade das formas usadas. Os SVGs requerem mais poder computacional do que as imagens rasterizadas, porque cálculos matemáticos estão envolvidos no desenho das curvas e linhas. Se o seu logotipo for especialmente complicado, ele pode tornar o computador do usuário mais lento e até ter um tamanho de arquivo muito grande. É importante que você simplifique o máximo possível as formas vetoriais.

Além disso, os arquivos SVG são gravados em XML e, portanto, podem ser abertos e editados em um editor de texto (!). Isso significa que seus valores podem ser manipulados em tempo real. Por exemplo, você pode usar o JavaScript para alterar a cor de um ícone SVG em um site, da mesma forma que faria com algum texto (ou seja, sem necessidade de uma segunda imagem), ou até mesmo animá-los.

No total, eles são melhores para formas planas simples, como logotipos ou gráficos.

Espero que ajude!

O JPEG não é o mais leve para todos os tipos de imagens (ou mesmo para a maioria). Cantos e linhas retas e "preenchimentos" simples (blocos de cor sólida) parecerão embaçados ou terão artefatos, dependendo do nível de compactação. É um formato com perdas e funciona melhor para fotografias em que você não pode ver artefatos claramente. Linhas retas (como em desenhos e quadrinhos e outros) são compactadas muito bem em PNG e são sem perdas. O GIF só deve ser usado quando você deseja que a transparência funcione no IE6 ou se deseja animação. O GIF suporta apenas uma paleta de 256 cores, mas também é sem perdas.

Então, basicamente, aqui está uma maneira de decidir o formato da imagem:

• GIF se precisar de animação ou transparência que funcione no IE6 (observe que a transparência PNG funciona após o IE6)
• JPEG se a imagem for uma fotografia.
• PNG se linhas retas como em um desenho em quadrinhos ou outro desenho ou se uma ampla gama de cores for necessária com transparência (e o IE6 não for um fator)

E, como comentado, se você não tiver certeza do que se qualificaria, tente cada formato com taxas de compactação diferentes, avalie a qualidade e o tamanho da imagem e escolha qual você acha que é melhor. Eu estou apenas dando regras de ouro.

Eu costumo usar PNG, pois parece ter algumas vantagens sobre o GIF. Costumava haver restrições de patente no GIF, mas elas expiraram.

Os GIFs são adequados para arte de linha com arestas nítidas (como logotipos) com um número limitado de cores. Isso tira proveito da compactação sem perdas do formato, que favorece áreas planas de cores uniformes com bordas bem definidas (em contraste com o JPEG, que favorece gradientes suaves e imagens mais suaves).

GIFs podem ser usados ​​para pequenas animações e clipes de filme de baixa resolução.

Tendo em vista a limitação geral da paleta de imagens GIF para 256 cores, geralmente não é usado como formato para fotografia digital. Os fotógrafos digitais usam formatos de arquivo de imagem capazes de reproduzir uma maior variedade de cores, como TIFF, RAW ou JPEG com perdas, mais adequado para compactar fotografias.

O formato PNG é uma alternativa popular às imagens GIF, pois utiliza melhores técnicas de compactação e não tem limite de 256 cores, mas os PNGs não suportam animações. Os formatos MNG e APNG, ambos derivados do PNG, suportam animações, mas não são amplamente utilizados.

O JPEG terá baixa qualidade em bordas afiadas, etc. e, por esse motivo, não é adequado para a maioria dos gráficos da Web. É excelente em fotografias.

Comparado ao GIF, o PNG oferece melhor compactação, paleta maior e mais recursos, incluindo transparência. E é sem perdas.

O GIF é limitado a 256 cores e não suporta transparência real. Você deve usar PNG em vez de GIF, pois oferece melhor compactação e recursos. PNG é ótimo para imagens pequenas e simples, como logotipos, ícones etc.

O JPEG possui melhor compactação com imagens complexas, como fotos.

Existe um truque que pode ser feito para usar imagens GIF para mostrar cores verdadeiras. Pode-se preparar uma animação GIF com 256 quadros paleta de cores com atraso de 0 quadros e definir a animação para ser mostrada apenas uma vez. Portanto, todos os quadros podem ser mostrados ao mesmo tempo. No final, uma imagem GIF colorida verdadeira é renderizada.

Muitos softwares são capazes de reproduzir essas imagens GIF. No entanto, o tamanho do arquivo de saída é maior que um arquivo PNG. Deve ser usado se for realmente necessário.

png tem uma paleta de cores mais ampla que gif e gif é apropriado, enquanto png não é. gif pode fazer animações, o que normal-png não pode. A transparência png é suportada apenas pelo navegador mais recente que o IE6, mas há uma correção de Javascript para esse problema. Ambos suportam transparência alfa. Em geral, eu diria que você deve usar png para a maioria dos gráficos da web enquanto usa jpeg para fotos, capturas de tela ou similares, porque a compactação png não funciona muito bem naqueles.

GIF com base em uma paleta de 256 cores por imagem (pelo menos em sua encarnação básica). O PNG pode executar "TrueColour", ou seja, 16,7 milhões de cores prontas para uso. PNG sem perda compacta melhor que GIFs sem perda. O GIF pode gerar transparência "binária" (0% de opacidade ou 100% de opacidade). PNG pode lidar com transparências alfa.

Em suma, se você não precisar usar imagens transparentes Alpha e suportar o IE6, o PNG é provavelmente a melhor escolha quando você precisar de imagens perfeitas para pixels para ilustrações vetoriais e outras. JPG é imbatível para fotografias.

A partir de 2018, temos vários novos formatos, melhor suporte para formatos anteriores e alguns truques inteligentes para usar vídeos em vez de imagens.

Para fotografias

jpg - ainda é o formato de imagem mais suportado.

webp- Novo formato do google. Bom potencial, embora o suporte ao navegador não seja ótimo.

Para ícones e gráficos

svg- quando possível. Escala bem em telas retina, editável em editores de texto e personalizável via JS / CSS se carregado no DOM.

png- se envolver gráficos raster (ou seja, quando criados no photoshop). Oferece suporte à transparência, que é muito essencial neste caso de uso.

Para animações

svg- mais animações CSS para gráficos vetoriais. Todas as vantagens do svg + power of css animations.

gif - ainda é o formato de imagem animada mais amplamente suportado.

mp4- se as imagens animadas forem realmente clipes de vídeo curtos. Twitter / Whatsapp converte gifs para mp4.

apng- suporte decente ao navegador (ou seja, sem IE, Edge), mas criá-lo não é tão simples quanto os gifs.

webp- perto de usar mp4. Suporte deficiente

Esta é uma boa comparação de vários formatos de imagem animada.

Finalmente, qualquer que seja o formato, certifique-se de otimizá-lo - Existem ferramentas para cada formato (por exemplo, SVGO, Guetzli, OptiPNG etc.) e podem economizar considerável largura de banda.

A principal diferença é que o GIF é patenteado e é um pouco mais amplamente suportado. PNG é uma especificação aberta e a transparência alfa não é suportada no IE6. O suporte foi aprimorado no IE7, mas não completamente corrigido.

No que diz respeito aos tamanhos dos arquivos, o GIF tem um palete de cores padrão menor, portanto, eles tendem a ter tamanhos menores de arquivo à primeira vista. Os arquivos PNG têm um palete padrão maior, mas você pode encolher o palete de cores para que, quando o fizer, resultem em um tamanho de arquivo menor que o GIF. O problema novamente é que esse recurso não é tão suportado no Internet Explorer.

Além disso, como os PNGs podem suportar transparência alfa, eles são a única opção se você quiser uma variação de transparência diferente da transparência binária.

Se você optar pelo JPEG e estiver lidando com imagens de um site, considere o codificador perceptual do Google Guetzli , que está disponível gratuitamente. Na minha experiência, para uma qualidade fixa, Guetzli produz arquivos menores que as bibliotecas de codificação JPEG padrão, mantendo total compatibilidade com o padrão JPEG (para que suas imagens tenham a mesma compatibilidade que as imagens JPEG comuns).

A única desvantagem é que Guetzli leva muito tempo para codificar .. mas isso é feito apenas uma vez, quando você prepara a imagem para o site, enquanto os benefícios permanecem para sempre! Imagens menores levarão menos tempo para fazer o download; portanto, a velocidade do seu site aumentará no uso diário.

O GIF possui uma paleta de 8 bits (256 cores), em que PNG é uma paleta de cores de até 24 bits. Portanto, o PNG pode suportar mais cores e, claro, o algoritmo suporta a compactação

Conforme apontado por @aarjithn, esse WebP é um codec para armazenar fotografias.

Este também é um codec para armazenar animações (sequência de imagens animadas). A partir de 2020, a maioria dos navegadores convencionais oferece suporte imediato ( tabela de compatibilidade ). Nota para o WIC, um plug - in está disponível.

Possui vantagens sobre o GIF, pois é baseado no codec de vídeo VP8 e possui uma faixa de cores mais ampla que o GIF, onde o GIF limita a 256 cores e o expande para 2 ²⁴ = 16777216 cores, economizando ainda uma quantidade significativa de espaço.