Em um jogo 2D em HTML5, qual é o melhor formato de imagem a ser usado e por quê? Devo usar diferentes formatos em diferentes situações? Por exemplo, .png para a imagem de fundo, .jpeg para os quadros de animação e assim por diante ...
A parte "por que" é importante para mim. Realmente não precisa ser localizado no HTML5, mas também pode ser um conselho geral.
O formato da imagem é apenas uma maneira de salvar dados brutos de pixels, desde que você use bitmaps, o formato geralmente não faz diferença na execução após a etapa de carregamento. O que importa são os dados de pixel fornecidos à API de gráficos. Existem três formatos comumente usados na web:
.gif O formato GIF (agora normalmente obsoleto) é usado para imagens com 256 cores ou menos, resultando em um tamanho muito pequeno. O GIF também é frequentemente usado para animações. Ao usar apenas 256 ou menos cores, é um formato sem perdas, o que significa que nenhuma qualidade é perdida em termos de compactação. Caso contrário, a variedade de cores deve ser reduzida para 256, levando à redução da qualidade.
.png O formato Portable Network Graphics é, na minha opinião, o formato de imagem mais usado, pois possui uma boa taxa de compactação, além de poder salvar mais cores que o GIF. PNG também é capaz de translucidez (ou normalmente chamado de transparência, que é o nome errado, pois um pixel precisa ser 100% translúcido para ser chamado de transparente). É também um formato sem perdas e teve como objetivo melhorar e substituir o GIF em 2006 ( fonte , primeiro parágrafo). Eu pessoalmente o uso como um tipo de imagem em sites e jogos.
.jpeg O formato JPEG é comumente usado para fotos e outras coisas. Não é capaz de translucidez, nem garante a compactação sem perdas. É comum especificar a qualidade ao compactar, levando a uma troca entre espaço e qualidade.
Vamos ver alguns casos de uso:
Lembre-se de que o consumo de memória e o desempenho da API de gráficos geralmente são iguais entre esses formatos. O que importa é tamanho e velocidade de carregamento (você pode mergulhar nos algoritmos desses formatos se desejar estimar o custo de carregamento). O consumo de memória de qualquer imagem no estado bruto é geralmente definido pelo width*height*4byte de regra geral para um formato de pixel RGBA, que é o mais comum.
Apenas algumas coisas a acrescentar à resposta de @ Marco:
.gif está desatualizado. Eu evitaria completamente o uso de arquivos .gif, tanto quanto possível. Acho que as pessoas só as usam hoje em dia por causa de animações no navegador e pngs animados não são bem suportados no momento.
Então, tudo o que você tem é jpg e png.
PNG: É sem perdas . A única coisa que você está considerando aqui é a taxa de compressão que você obtém. Geralmente, um bom trabalho é compactar blocos de cores sólidas , mas um trabalho ruim é compactar cenas com muita variação.
JPG: faz um trabalho horrendo com blocos de cores sólidas (perde detalhes e ocupa mais espaço que png), mas faz um ótimo trabalho com fotos com muita variação (boa compactação, perda quase imperceptível da qualidade da imagem).
Por exemplo
4Kb Megaman, em formato PNG:
Esta mesma imagem tem 36 KB em JPG
E a perda de detalhes (que vem GRATUITAMENTE com compressão jpg)
Portanto, aqui, com os blocos sólidos da imagem colorida, perdemos detalhes e incorremos em tamanho adicional usando o JPG . Conclusão: não use jPG para imagens com grandes blocos de cores sólidas.
Agora, pense em uma cena colorida:
1,63 MB PNG:
O JPG de 277 k :
perdas aproximadas (usei jpg para fazer upload disso! mas mostra as perdas
Então, em suma
fonte
Vamos abstrair ainda mais a questão:
Em um jogo rodando em sua plataforma designada, quais são as considerações para a mídia que ela usa?
Consideração nº 1: tamanho, também conhecido como velocidade de carregamento
Independentemente da plataforma, do jogo e do tipo de mídia, o fato é que ele precisa ser trazido para um contexto de renderização. Em uma plataforma baseada na Web, isso significa fazer o download. Em um ambiente de desktop ou console, significa carregar de uma mídia de armazenamento local. Carregar sua mídia leva tempo. As plataformas baseadas na Web podem ser especialmente prejudicadas se for necessário fazer o download de muita mídia em uma conexão lenta.
Consideração # 2: consumo de memória
Relacionado a, mas não o mesmo que tamanho. Uma mídia pode ser compactada enquanto estiver no disco ou em um pacote ou qualquer outra coisa, mas depois de carregada como uma textura ou buffer de som para algo, pode ser um pouco maior. O dispositivo no qual o jogo está sendo executado não possui uma quantidade infinita de memória.
Consideração # 3: qualidade e estilo
A mídia é de qualidade suficiente? Isso pode ser crucial para o seu jogo e geralmente está em desacordo com a consideração do tamanho. Muitas vezes é necessário um equilíbrio entre os dois. Alguns jogos têm gráficos incrivelmente simples (minecraft) e ainda são muito bem-sucedidos. Outros têm gráficos realmente impressionantes que ocupam muito e muito da memória, mas oferecem uma qualidade imersiva com fundos incríveis. Alguns jogos se destacam com blips e bloops para efeitos sonoros, enquanto outros precisam ter 41k de música estéreo.
Portanto, com base no que é mais importante, você toma a decisão certa para o seu jogo. A decisão é por jogo, não um tamanho único.
fonte
Geralmente, você escolhe o menor tamanho de arquivo que ainda oferece uma qualidade de imagem aceitável. Além disso, o png suporta alfa, para que você não precise lidar com imagens adicionais para lidar com uma camada alfa.
Para que / quando usar png (em geral ):
PNG é sem perdas, mas a profundidade da cor pode ser alterada.
Use jpg para os demais casos - imagens fotográficas, pinturas, fotos com muitos pequenos detalhes, cores e gradientes. Se você tentar usar PNG para armazenar essas imagens, notará que o tamanho do arquivo é muito maior que o jpg.
Ferramentas como o Adobe Image Ready oferecem uma visualização da sua imagem junto com o tamanho do arquivo em uma variedade de formatos e configurações de qualidade.
fonte