Os sites podem conter gráficos nos formatos JPEG, GIF, PNG, SVG. Quais devem ser usados e quando?
Os sites podem conter gráficos nos formatos JPEG, GIF, PNG, SVG. Quais devem ser usados e quando?
Respostas:
* 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
,, .png
e .gif
todos 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 .gif
imagens 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 .
Também existem diferentes profundidades de cores (paletas): cores indexadas e cores diretas .
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!
Vantagens:
Inconvenientes:
Usos:
Vantagens:
Inconvenientes:
Usos:
Vantagens:
Inconvenientes:
Usos:
Os sites podem conter gráficos nos formatos JPEG, GIF, PNG, SVG. Quais devem ser usados e quando?
Para fotos:
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:
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.
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:
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>
</DA01>
Dimensione lindamente para qualquer tamanho de um arquivo (não é necessário exibir @2x.jpg
telas 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
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.
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 10px
tela 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.
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:
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.