Quais formatos gráficos da web usar?

Os sites podem conter gráficos nos formatos JPEG, GIF, PNG, SVG. Quais devem ser usados ​​e quando?

Quando usar JPG

• imagens fotográficas
• quando a compressão não importa

Quando usar PNG

• quando você precisa de transparência
• quando você tem padrões (planos de fundo)

Quando usar o GIF

• quando você precisar de animação compatível com versões anteriores *
• quando uma imagem é composta principalmente por apenas algumas cores (2-16) **
• quando você não precisa de transparência e possui padrões (embora o png seja o preferido)

_{* Com o surgimento da animação CSS como uma opção viável para quase todos os navegadores, o uso do formato .GIF é cada vez menor o formato obrigatório para animação na web. .jpg,, .pnge .giftodos podem ser configurados para ter um recurso "animado" com o uso de CSS. Embora os gifs animados possam ser usados ​​de forma atraente no design da web em certos casos, as exceções são raras; portanto, é melhor evitá-las.}

_{** (as .gifimagens são restritas a apenas 256 cores na paleta.)}

(migrado da pergunta duplicada)

Isso depende totalmente do tipo de imagem que você deseja armazenar.

• PNG é um formato de compactação sem perdas mais adequado para gráficos de bitmap "parecidos com vetores" (ou seja, gráficos com áreas grandes e regulares com a mesma cor e bordas claramente definidas; gráficos que contêm texto não criptografado).

• SVG é um formato vetorial , mais adequado para conter gráficos vetoriais (em resumo, coleções de elementos geométricos em vez de coleções de pixels). O SVG é ilimitado e escalável, enquanto os gráficos de bitmap perdem qualidade quando ampliados.

• JPG é um formato de compactação com perdas (entre outras coisas, remove nuances da imagem invisíveis ao olho humano para economizar espaço de armazenamento). É mais adequado para fotografias; devido ao seu método de compactação, não é adequado para ilustrações ou textos vetoriais.

Compatibilidade do navegador:

• Os gráficos PNG são suportados nos navegadores, com exceção do IE 6, se o PNG contiver transparência alfa (as partes transparentes serão renderizadas em cinza sólido) e todas as versões do IE se o PNG estiver dentro de um elemento HTML com opacidade menor que 100 % (mas esse é um caso extremo).

• O SVG nem sempre é uma opção, porque o suporte ao navegador não é 100% no momento . Também pode haver outras diferenças comportamentais em uma <img>tag normal . Use isso apenas se você souber o que está fazendo.

• O JPG padrão é suportado em todos os navegadores, desde que salvos no modo RGB em vez de CMYK (se o seu programa não fizer a distinção, provavelmente é o padrão).

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), controladas 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. Possui uma paleta de milhares de cores e, portanto, é ótima para fotografias, mas a compactação com perdas significa que é ruim para logotipos e desenhos de linhas: além de parecerem confusas, essas imagens 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 ser, 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. (Maldito seja, Adobe!) O PNG-8 pode armazenar apenas 256 cores, como GIFs.

Bom para: A principal coisa que o PNG-8 faz melhor que os GIFs é ter suporte à Transparência Alfa.

Nota importante: O Photoshop finalmente adicionou suporte à transparência alfa em suas versões mais recentes. Se você tiver um mais antigo, existem maneiras de converter arquivos PNG-24 do Photoshop em PNG-8, mantendo a transparência. Um método é PNGQuant , outro é salvar seus arquivos com o Fireworks .

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 aspecto, exceto que o PNG realmente comprime imagens, resultando em arquivos muito menores. Infelizmente, os arquivos PNG-24 ainda serão muito maiores que os JPEGs, GIFs e PNG-8s; portanto, você ainda precisa considerar se realmente deseja usá-lo.

Embora os PNG-24 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, isso 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.

Além disso, os arquivos SVG são gravados usando XML e, portanto, podem ser abertos e editados em um editor de texto, podendo ser manipulados em tempo real, se você desejar. Por exemplo, você pode usar o JavaScript para alterar a cor de um ícone SVG em um site, da mesma forma que faria com um texto (por exemplo, sem necessidade de uma segunda imagem).

Espero que ajude!

JPG:

Vantagens:

• Muitos níveis de compressão diferentes disponíveis
• Fácil de manipular com o editor de todas as imagens

Inconvenientes:

• Artefatos de compactação

Usos:

• Fotos ou imagens grandes com muitas cores
• Quando alta compressão é necessária

PNG:

Vantagens:

• Transparência com alfa!
• Muitas cores
• Pode substituir jpg

Inconvenientes:

• Menos compactação que JPG (mas não tanto)
• Incompatível com o IE6 (e 7 acredito) - deve usar patch ou hack para isso. Mas quem se importa? Um deve usar;)

Usos:

• Fotos / imagens pequenas ou médias com muita cor
• A deve usar se você quiser transparência gradiente
• Ícones
• Logotipos

GIF:

Vantagens:

• Pode ser animado
• Muito leve se você usar apenas algumas cores (como 8 - 16 ou 32 cores diferentes)
• Transparência

Inconvenientes:

• Não pode ter mais de 255 cores.
• Gif animado pode fazer as pessoas fugir
• Sem alfa para transparência (é transparente ou não!)

Usos:

• Gif animado (eu os uso principalmente em boletins)
• Ícones
• Favicon animado \ o /
• Logotipos

Os sites podem conter gráficos nos formatos JPEG, GIF, PNG, SVG. Quais devem ser usados ​​e quando?

Para fotos:

JPEG se não houver necessidade de transparência. PNG para gráficos de fotos que precisam de transparência.

Embora não seja 100% verdade, é uma boa regra geral. Confira as outras respostas a esta pergunta para saber mais sobre os outros formatos. Além disso, confira Qual formato de imagem raster é melhor para exibir imagens digitalmente quando não há transparência; JPEG ou PNG? e uma seleção de nossas tags de formato de arquivo , como jpeg , png , gif e svg, para saber mais.

Para gráficos:

SVG com PNG / JPEG Fallback.

Não há absolutamente nenhuma razão para não fornecer SVGs hoje em dia. Eles são implementados quase da mesma maneira que qualquer imagem normal e muito mais versátil.

Portanto, o fluxo de trabalho de qualquer designer de site moderno não foi completamente alterado, foi atualizado. Você ainda prepara e exibe PNGs e JPEGs para gráficos, mas eles são apenas substitutos para quando o SVG não funcionar.

O que é um SVG?

SVG significa Scalable Vector Graphic. Sem ser muito técnico, a diferença entre SVGs e outros formatos baseados em pixel é que os dados para a composição do gráfico são armazenados como cálculos matemáticos. Quando um navegador abre um SVG, ele precisa fazer cálculos para renderizar o SVG. Navegadores mais antigos não têm a funcionalidade para fazer esses cálculos ou manipular SVGs. Além disso, os computadores mais antigos podem ter se esforçado para renderizar uma página da Web pesada em SVG, mesmo que eles pudessem ser usados ​​há 10 anos (o que não podiam). Os dados de um SVG são armazenados no formato hexadecimal (base 16), permitindo que sejam otimizados em tamanhos de arquivo muito pequenos em comparação com o armazenamento binário de dados de pixel.

Aqui estão alguns recursos para aprender mais sobre como obter a técnica de fallback:

1. Dominando o uso do SVG para uma web retina, fallbacks com script PNG

2. Revisitando o fluxo de trabalho SVG para desempenho e desenvolvimento progressivo com URIs de dados transparentes

3. Truques CSS - Fallbacks do SVG

O seguinte snippet JavaScript, copiado do primeiro link, é tudo o que você precisa para detectar o suporte ao SVG na maioria, se não em todos os navegadores, e alterar o nome do arquivo para fornecer fallbacks PNG.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Quando usar SVG

• Sempre que possível, como normalmente é o menor tamanho de arquivo e independente de resolução, significa que ele pode lidar com qualquer proporção de pixels do dispositivo (telas de retina, por exemplo)
• Quando sua arte é adequada para formatos de arquivo vetorial (ícones em particular)
• Quando você tem o luxo de ter que segmentar apenas navegadores modernos (o suporte SVG é relativamente novo para alguns navegadores)

Quando usar fontes de ícone

• Quando você precisa de um extenso conjunto de ícones
• Quando, como o SVG, você deseja os benefícios dos formatos de arquivo vetorial
• Quando você tem o luxo de ter que segmentar apenas navegadores modernos (o suporte a fontes da Web é relativamente novo para alguns navegadores)

</DA01>

Por que SVG é a melhor opção?

• Dimensione lindamente para qualquer tamanho de um arquivo (não é necessário exibir @2x.jpgtelas de retina ou esticar o gráfico)

• Muitas vezes, tamanhos de arquivo menores que JPEG e PNG

• Quase nunca é preciso sacrificar a qualidade do logotipo

• Facilita o design responsivo de várias maneiras

Notas

• O suporte é menos comum para SVGs embutidos; portanto, por segurança, é melhor vincular os arquivos por meio de tags de imagem no momento. (Se você deseja reutilizar o gráfico em qualquer outro lugar, por exemplo, ícones de navegação, deseja vinculá-lo externamente de qualquer maneira, para que o navegador o armazene em cache e economize tempo carregando outras páginas.)

• O IE não suporta SVGZ, o formato compactado disponível para gráficos SVG. Para maior compatibilidade entre navegadores e versões anteriores, é melhor usá SVG 1.0-lo neste momento.

• Você ainda pode criar folhas de sprite com SVG da mesma maneira que faria com outros formatos de imagem, mas, em vez de usar valores de pixels reais para definir as coordenadas xey de cada imagem, use valores baseados em porcentagem.

  E os casos em que os valores percentuais não são precisos o suficiente?

  Você deve construir a folha de sprite com o objetivo de poder dividir a largura e a altura por 100 e obter números inteiros ou números com 1 casa decimal no máximo. Como exemplo, se você estiver organizando 7 x 10px x 10pxícones juntos em uma folha de sprite, não crie uma tela que seja 70px x 10px.

  Por quê? Porque quando você divide 100 por 7, obtém 14.285714285714285714285714285714, o que, como uma porcentagem arredondada, definitivamente causaria alguma matemática imperfeita em algum lugar.

  Em vez disso, crie uma 80px x 10pxtela e não se preocupe com os 12,5% vazios. Os ícones terão exatamente 12,5% de incremento, o que, desnecessário dizer, é muito mais fácil de trabalhar.

Você deve usar .jpeg para fotografias ou imagens com muitas cores. O tipo de arquivo .gif é útil para imagens animadas ou onde a transparência é necessária, mas está diminuindo em uso. O formato mais popular é .png, que também pode oferecer transparência alfa e maior variedade de cores que o tipo de arquivo .gif. Para uma visão geral mais detalhada, consulte o artigo de Jonathan Snook, Qual formato de imagem é melhor .

Uma boa fórmula poderia ser usar JPEG para fotos e PNG para todo o resto.

Obviamente, se você possui gráficos que não precisam de transparência alfa e têm menos de 256 cores, o GIF pode economizar uma certa largura de banda, mas definitivamente está saindo.

Eu uso PNG para praticamente tudo, pois ele não possui os artefatos de compactação que o JEPG possui e é quase universalmente compatível nos dias de hoje (eu vi alguns editores de sites que não aceitam bem isso, como a versão desktop do software SiteBuilder da Homestead, mas é isso).

Você deve escolher sua imagem com base no nível de compactação / qualidade que deseja obter.

A Web tem tudo a ver com velocidade no download de informações e quanto menor o tamanho de uma imagem, melhor é a velocidade de carregamento de uma página.

JPG : Para imagens com milhões de cores (fotografia)

PNG e GIF : para transparência e pouca quantidade de cores. Eu o uso apenas sob 64/128 cores diferentes, mas geralmente abaixo de 256. (ícones, imagens vetoriais que precisam ser rasterizadas, cores de alto contraste, gradientes com poucas cores)

Como escolher entre PNG e GIF?

Antes de tudo, verifique a otimização da compactação / qualidade e escolha quem oferece melhores resultados com menos peso. Eu ainda uso amplamente GIF, e às vezes é melhor que PNG para o mesmo tipo de imagens. Não discrimine um formato para outro, basta verificar o que parece mais adequado para sua otimização.

• Escolha GIF: para imagens animadas com até 256 cores
• Se você não precisar de animação, poderá escolher o PNG. Escolha o PNG correto: Existem 2 tipos de 8 bits e 24 bits. 8 bits , costuma ser uma versão melhor do GIF sem animação para qualidade / compactação (mas como eu disse nem sempre, verifique quando você salva na Web). O 24bit não possui compactação (portanto, use-o apenas para obter algum efeito gráfico especial) e possui o alfa alpha para usar a transparência de cores (os navegadores antigos do IE não suportam isso, se você não aplicar um filtro especial ou comportamento .htc à página )

Posso ver em vários artigos que 90% dos web designers ainda pensam que PNG é apenas um formato sem perdas . Muitos profissionais nem sabem da existência do PNG-8.

Mas, obviamente, PNG-8 é o que eles deveriam usar para a Web, em vez de PNG-32. Porque ele fornece tamanhos de arquivo 2x-5x menores, com qualidade aceitável.

Às vezes, é difícil decidir qual compactação é melhor para uma imagem. Por exemplo, se não é uma foto, mas tem muitas cores e gradientes. Essa ferramenta permite comparar visualmente os dois formatos com perdas e escolher a melhor variante.

Aqui está uma boa ferramenta para comparar os formatos PNG e JPEG com perdas: PNG vs JPEG

Os principais formatos gráficos da Web são GIF, JPG e PNG. É importante conhecer as diferenças e escolher o melhor formato para cada imagem, para que as imagens tenham boa aparência e sejam o mais compactas possível, para que apareçam rapidamente na tela do visitante do site.

GIF - Formato de informação gráfica

O formato de gráficos GIF é melhor para imagens com apenas algumas cores: tabelas, gráficos ou texto definido como gráficos. Quanto menos cores você usar, mais eficientes serão os arquivos GIF. Arquivos GIF ...

• pode conter até 256 cores.

• suporta um recurso chamado transparência, no qual uma das 256 cores está definida para ser transparente. Isso evita que os gráficos pareçam estar em caixas, porque o plano de fundo do arquivo é invisível, permitindo a exibição do plano de fundo da página da Web.

• pode ser animado. Dentro de um único arquivo são armazenados muitos quadros de imagem e um índice informando quanto tempo cada quadro deve ser mostrado. O GIF animado é tratado como um arquivo de imagem padrão e, portanto, é carregado com a tag padrão.

• são sem perdas, o que significa que a qualidade da imagem não é degradada pelo processo de compactação.

• podem ser entrelaçados para que pareçam desbotar, de menor para maior qualidade, durante o carregamento. Isso dá aos visitantes algo para olhar enquanto esperam.

• não é bom para fotografias - você perde qualidade e os arquivos não são compactos. Use o formato gráfico JPG para fotos.

JPG - Grupo misto de especialistas em fotografia

O formato gráfico JPG é melhor para imagens com muitas cores, como fotografias ou arte digitalizada. Arquivos JPG ...

• pode conter até 16 milhões de cores.

• suporta compressão variável. Você pode aplicar mais ou menos compactação a cada imagem individual. Quanto mais compressão você aplicar, mais qualidade perderá. Embora o tamanho dos arquivos possa ser reduzido com esse formato gráfico, você geralmente precisa comprometer o tamanho do arquivo e a qualidade da imagem. O software gráfico mais recente fornece uma visualização antes de salvar - isso permite que você experimente vários níveis de compactação para escolher o melhor compromisso entre qualidade e tamanho do arquivo.

• vêm em três tipos: linha de base ou padrão, linha de base otimizada ou padrão otimizado e progressiva. A linha de base foi projetada para navegadores que consideramos antigos hoje em dia (como o Internet Explorer versão 1). A linha de base otimizada oferece mais compactação em relação à linha de base padrão e praticamente todos os navegadores atuais podem ler essa imagem. Um JPG progressivo, como um arquivo GIF entrelaçado, cria à medida que é baixado, passando de uma representação bruta da imagem para a aparência final. Embora este seja um bom formato gráfico da Web, nem todos os navegadores mais antigos suportam esse formato.

• não são boas para imagens com apenas algumas cores, como texto definido como gráficos ou imagens com áreas de cores planas. Se você usar JPG para esses gráficos, eles serão maiores que o necessário e parecerão "manchados".

PNG - Gráficos de rede progressivos

PNG é o mais novo formato de gráficos da Web. Arquivos PNG ...

• são suportados por todos os navegadores modernos. Esses arquivos podem não aparecer em navegadores mais antigos; portanto, o uso desse formato de gráfico pode fazer com que alguns visitantes do site não consigam ver suas imagens.

• são compactos e versáteis e podem combinar os melhores recursos de GIF e JPG, como a capacidade de ter fundos transparentes ou a capacidade de conter imagens com milhões de cores.

• ainda não são amplamente utilizados, principalmente porque não são suportados por navegadores mais antigos.

Quando usar qual?

Escolher o formato gráfico da Web certo pode garantir que suas imagens tenham boa aparência e apareçam rapidamente no computador do visitante. Escolher o formato errado faz com que suas imagens fiquem ruins e levem uma eternidade para fazer o download.

O erro gráfico mais comum que as pessoas cometem na Web é usar o formato gráfico errado para suas imagens. Mas a escolha é realmente bastante simples ...

• Se seus gráficos tiverem muitas cores (como uma foto), escolha JPG.

• Se seus gráficos tiverem poucas cores, escolha GIF. Ao usar o GIF, tente paletas otimizadas que contenham apenas as cores usadas - elas podem cortar pela metade o tamanho dos arquivos.

Em um mundo ideal, tudo se resumia a isso:

JPEG - Para imagens e fotografias raster

PNG - Para gráficos vetoriais (por exemplo, logotipos etc.)

Infelizmente, o Internet Explorer 6 (ainda assim, infelizmente, um grande número de usuários) não suporta transparência em imagens PNG. Portanto, se o PNG contiver transparência, pode haver problemas. Felizmente, existe um hack que pode ser usado para contornar esse problema, embora não de maneira elegante:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: Além disso, acho que até o IE 7 tem problemas com alguns recursos dos PNGs.)

Os GIFs têm apenas duas vantagens sobre o PNG:

1. Suporte (quase) perfeito ao navegador (embora sem transparência, portanto, isso não é um bônus)
2. Eles podem ser animados, porém os gráficos animados devem ser usados ​​com moderação no design da web.

EDIT: PNG é sempre preferível ao GIF, onde é suportado e utilizável, já que PNG é um formato aberto.

Como já foi mencionado, o JPEG é bom para fotografia e o PNG é bom para gráficos com textos e gráficos. O GIF tem a única vantagem, que suporta animação, que deve ser usado com muito cuidado.

Uma boa dica é exportar sua imagem como JPEG e PNG. Quase sempre, o formato melhor para os gráficos resulta em um arquivo menor. As fotografias ficam menores como JPEG e os gráficos menores como PNGs. Portanto, se você não souber qual escolher, pode ser uma boa decisão.