Quando usar PNG ou JPG no desenvolvimento do iPhone?

98

Eu tenho um aplicativo que exibe um monte de imagens em uma apresentação de slides. Essas imagens farão parte do pacote, assim distribuídas com o app.

Todas as imagens são fotografias ou fotográficas, etc.

Eu li que é preferível usar PNG como formato de imagem, mas visto que a versão JPG será muito menor, prefiro usar isso.

Há alguma orientação sobre qual formato usar e em que caso?

Maverick
fonte
Queria acrescentar que as imagens originais já estão todas no formato JPG, se isso fizer alguma diferença.
Maverick de

Respostas:

140

PNGs são pixels perfeitos (sem perdas) e requerem muito pouca energia extra da CPU para serem exibidos. No entanto, PNGs grandes podem demorar mais para ler do armazenamento do que mais formatos de imagem compactados e, portanto, ser mais lentos para serem exibidos.

JPGs são menores para armazenar, mas com perdas (a quantidade depende do nível de compressão), e exibi-los requer um algoritmo de decodificação muito mais complicado. Mas a compressão e a qualidade de imagem típicas geralmente são suficientes para fotos.

Use JPGs para fotos e qualquer coisa grande, e PNGs para qualquer coisa pequena e / ou projetada para ser exibida "pixel perfeito" (por exemplo, ícones pequenos) ou como parte de uma sobreposição transparente composta, etc.

hotpaw2
fonte
1
Ainda não vi dados sobre o desempenho de decodificação de JPEG vs PNG vs iPNG. Às vezes, o formato mais compactado é melhor devido à necessidade de E / S reduzida; Não tenho certeza de quão rápido é o flash drive do iPhone. E eu definitivamente não diria que a descompressão PNG requer "muito pouca" energia; o arquivo Other.artwork parece ser um dado bitmap bruto, presumivelmente porque a sobrecarga de CPU / memória da descompressão PNG é muito grande para os componentes de interface do usuário comumente usados.
tc.
2
No meu projeto atual, temos arquivos PNG muito grandes devido a um requisito de transparência. O IO do disco supera em muito o tempo gasto na decodificação de um jpeg. Lembre-se de que os PNGs também são compactados, apenas usando um algoritmo diferente.
John
2
Achei que deveria adicionar uma dica suplementar para quem está tentando maximizar o desempenho da imagem. SE você tiver JPGs bem compactados, pode carregar os dados JPG brutos em objetos NSData com antecedência (talvez em uma matriz ou dicionário) e construir os JPGs usando UIImage: imageFromData quando quiser exibi-los. Os dados JPG podem ser 10-100x menores do que os dados de imagem de bitmap, mas permitem que você tire o IO (relativamente lento) do caminho mais cedo. Obviamente, tenha cuidado com a quantidade de dados que você armazena em cache / pré-carrega dessa maneira.
Nigel Flack
2
Encontrei alguns dados sobre tempos de compersão : cocoanetics.com/2012/09/… Parece que usar png não é mais rápido do que jpg;)
Maciej Kozieł
20

A Apple otimiza as imagens PNG incluídas no pacote do seu aplicativo para iPhone. Na verdade, o iPhone usa uma codificação especial na qual os bytes de cores são otimizados para o hardware. O XCode lida com essa codificação especial para você quando você constrói seu projeto. Portanto, você vê benefícios adicionais em usar PNGs em um iPhone, além do tamanho. Por esta razão, é definitivamente recomendado o uso de PNGs para quaisquer imagens que apareçam como parte da interface (em uma visão de tabela, rótulos, etc).

Quanto à exibição de uma imagem em tela cheia, como uma fotografia, você ainda pode colher benefícios com PNGs, uma vez que eles não apresentam perdas e a qualidade visual deve ser melhor do que um JPG, sem mencionar o uso de recursos para decodificar a imagem. Você pode precisar diminuir a qualidade de seus JPGs para ver um benefício real no tamanho do arquivo, mas você está exibindo imagens não ideais.

O tamanho do arquivo certamente é um fator, mas há outras considerações em jogo na escolha de um formato de imagem.

Shanezilla
fonte
5
Em meu benchmark, a otimização do Xcode realmente tornou os arquivos mais lentos, provavelmente porque o I / O do disco, e não a CPU, é o gargalo.
Kornel
1
"A Apple otimiza as imagens PNG incluídas no pacote do seu aplicativo para iPhone" - isso significa que os PNGs baixados dinamicamente não são otimizados?
Robert
1
Não, PNGs baixados dinamicamente não são otimizados. A otimização consiste basicamente em trocar a ordem dos bytes de RGBA para BGRA, que é o que o chip gráfico do iPhone usa internamente. Mais informações aqui: graphicsoptimization.com/blog/?p=259
Nick Lockwood
11

Há uma coisa importante a se pensar sobre PNGs. Se um PNG estiver incluído em sua compilação do Xcode, ele será otimizado para iOS. Isso é chamado de esmagamento PNG. Se seu PNG for baixado em tempo de execução, ele não será esmagado. PNGs esmagados são executados da mesma forma que JPGs 100%. JPGs de qualidade inferior funcionam melhor do que JPGs de qualidade superior. Portanto, do ponto de vista do desempenho, do mais rápido para o mais lento, ele mudaria para JPG de baixa qualidade, JPG de alta qualidade, PNG Crushed, PNG.

Se você precisar baixar PNGs, deve considerar a compressão dos PNGs no servidor antes do download.

http://www.cocoanetics.com/2011/10/avoiding-image-decompression-sickness/

respectTheCode
fonte
9

O blog Cocoanetics publicou um bom benchmark de desempenho do iOS de JPGs em vários níveis de qualidade e PNGs, com e sem esmagamento.

De sua conclusão:

Se você realmente precisa de um canal alfa ou precisa usar PNGs, é aconselhável instalar a ferramenta pngcrush em seu servidor da web e fazer com que processe todos os seus PNGs. Em quase todos os outros casos, JPEGs de alta qualidade combinam tamanhos de arquivo menores (ou seja, transmissão mais rápida) com compactação e renderização mais rápidas.

Acontece que PNGs são ótimos para pequenas imagens que você usaria para elementos de IU, mas não são razoáveis ​​para uso em aplicativos de tela inteira, como catálogos ou revistas. Nesse caso, você deve escolher uma qualidade de compressão entre 60 e 80%, dependendo do material de origem.

Em termos de conseguir que tudo seja exibido, você desejará manter as instâncias de UIImage das quais você desenhou uma vez, porque elas contêm uma versão não compactada em cache do arquivo. E onde você não faz uma pausa visual para que uma imagem grande apareça na tela, você terá que forçar a descompressão de algumas imagens com antecedência. Mas tenha em mente que isso vai consumir uma grande quantidade de RAM e se você está exagerando, isso pode fazer com que seu aplicativo seja encerrado. O NSCache é um ótimo lugar para colocar imagens usadas com frequência porque ele automaticamente se encarrega de despejar as imagens quando a RAM se torna escassa.

É uma pena que não temos como saber se uma imagem ainda precisa ser descompactada ou não. Além disso, uma imagem pode ter despejado a versão não compactada sem nos informar sobre esse efeito. Esse pode ser um bom radar para levantar no site de relatórios de bugs da Apple. Mas, felizmente, o acesso à imagem conforme mostrado acima não leva tempo se a imagem já estiver descompactada. Portanto, você pode fazer isso não apenas "na hora certa", mas também "apenas no caso".

Nate
fonte
Exatamente, e JPEGMini e ImageOptim tornam os JPEGs realmente pequenos!
electronix384128
7

Pensei em compartilhar alguns dados de desempenho de descompressão ...

Estou fazendo alguns protótipos de um visualizador de 360 ​​graus - um carrossel onde o usuário pode girar por uma série de fotos tiradas de diferentes ângulos, para dar a impressão de ser capaz de girar suavemente um objeto.

Eu carreguei os dados da imagem em uma matriz de NSData para tirar o arquivo i / o da equação, mas criei NSImage instantaneamente. Testando perto da taxa de quadros máxima (~ 25 fps) e assistindo em Instrumentos, vejo que o aplicativo está claramente vinculado à CPU e há um aumento de aproximadamente 10% na carga da CPU mostrando ~ 275 kb png's vs. ~ 75 kb jpg's.

Não posso dizer com certeza, mas meu palpite é que o limite da CPU é apenas da execução geral do programa e da movimentação de todos os dados na memória, mas a descompressão da imagem é feita na GPU. De qualquer maneira, o argumento de desempenho JPG vs. PNG parece favorecer o JPG, especialmente quando os tamanhos de arquivo menores (e, portanto, tamanhos menores de objetos na memória, pelo menos em algumas partes da cadeia) são levados em consideração.

Claro que cada situação é diferente, não há substituto para o teste ...

Nigel Flack
fonte
2
A GPU não pode descomprimir PNGs. O formato deflate que ele usa não é adequado para o tipo de paralelização que a GPU permite. Eu acho que a decodificação JPG pode ser parcialmente acelerada por GPU, pois há conversão de espaço de cores envolvida.
Kornel
5

Eu encontrei grandes diferenças no desempenho da animação ao usar JPEGs vs PNG. Por exemplo, colocar três JPEGs do tamanho de uma tela lado a lado em um UIScrollView e rolar horizontalmente em um iPhone4 resulta em lag e uma animação espasmódica totalmente desagradável. Com pngs não transparentes das mesmas dimensões, a rolagem é suave. Nunca uso JPEGs, mesmo que a imagem seja grande.

Undistraction
fonte
1

Eu acho que se você quiser usar transparente, você não tem escolha, exceto PNG. Mas, se o seu fundo já é opaco, então você pode usar JPG. Essa é a única diferença que eu posso ver

vodkhang
fonte
3
Isso não aborda quaisquer considerações de desempenho de JPG vs PNG.
daveMac de
0

'Use JPEG para fotos' conforme mencionado nas Diretrizes de Interface Humana na seção Produzir arte no formato apropriado.

Tanya Berezovsky
fonte