Como reduzir o tamanho do arquivo PNG para web?

Eu tenho um arquivo PNG-24 com fundo transparente e seu tamanho atual é de 1,5 MB. Como reduzir o tamanho ou usar o formato de arquivo PNG-8 e manter a mesma qualidade?

Arquivo PNG a partir daqui: http://www19.zippyshare.com/v/69590430/file.html

Exemplo Imagem carregada Tentei todas as sugestões, mas sem bons resultados, por favor, informe

obrigado

PNG é um formato de compactação sem perdas - sem alterar o material de origem no arquivo, há muito pouca maneira de aumentar a compactação além da compactação de nível mais alto padrão. A única maneira real de reduzir o tamanho será alterar a imagem, reduzindo a resolução ou a profundidade de cores, para que a compactação PNG tenha menos complexidade para trabalhar.

Se você deseja altos níveis de compactação para a imagem e não se preocupa com o armazenamento de dados sem perdas, use JPEG.

O RIOT pode fazer isso e muito mais.

A Radical Image Optimization Tool (RIOT para abreviar) é um otimizador de imagens gratuito que permite ajustar visualmente os parâmetros de compactação, mantendo o tamanho mínimo do arquivo.

Ele usa uma interface lado a lado (visão dupla) ou visão única para comparar o original com a imagem otimizada em tempo real e ver instantaneamente o tamanho do arquivo resultante.

O otimizador de imagem é leve, rápido e simples de usar, mas poderoso para usuários avançados. Você poderá controlar a compactação, número de cores, configurações de metadados e muito mais, além de selecionar o formato da imagem (JPEG, GIF ou PNG) para o seu arquivo de saída.

Outra possibilidade é usar uma combinação de pngquant, pngout e pngcrush, conforme descrito aqui , mas isso é da linha de comando.

Aqui estão as instruções sobre como converter imagens png24 em png8 para o bem ie6, em toda a linha de comando usando ferramentas de código aberto (eu acho) pngquant + pngout + pngcrush.

1- quantize a imagem em 256 (então, basicamente, os png8 são ruins com sprites grandes ou com uma grande variedade de cores).

pngquant 256 some_24_bit.png

2- converter imagem de um png24 para um png8

pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.png

3- comprimir imagem

pngcrush some_8_bit.png -bit_depth 8 -brute -rem alla -reduce some_8_bit_small.png

Experimente o TinyPNG

No site deles:

Como funciona?

Quando você carrega um arquivo PNG (Portable Network Graphics), cores semelhantes na sua imagem são combinadas. Essa técnica é chamada de "quantização". Como o número de cores é reduzido, os arquivos PNG de 24 bits podem ser convertidos em imagens coloridas indexadas de 8 bits muito menores. Todos os metadados desnecessários também são removidos. O resultado: pequenos arquivos PNG com suporte 100% à transparência.

Eles têm duas opções:

• Arraste e solte as imagens no site delas e elas serão processadas automaticamente. Serviço gratuito. (Até 20 imagens. Máximo de 5 MB cada)
• Plugin do Photoshop. Isso custa $.

Eu não tentei o plug-in PS, por isso não posso comentar como ele funciona.

Se você não se importa com a linha de comando, dê uma olhada no OptiPNG , talvez seja isso que você procura .

OptiPNG é um otimizador de PNG que recompacta os arquivos de imagem para um tamanho menor, sem perder nenhuma informação. Este programa também converte formatos externos (BMP, GIF, PNM e TIFF) para PNG otimizado e executa verificações e correções de integridade PNG.

Use a combinação de pngoutedeflopt . pngoutdeterminará automaticamente se as cores PNG se encaixam no PNG-8 e as utilizará. defloptcomprimirá alguns bytes extras da imagem já otimizada - é útil trabalhar com quaisquer dados desinflados e PNG é um desses.

Uma boa idéia para manipular PNG com canal alfa no contexto do desenvolvimento do site seria deixar o servidor fazer o truque para você: separar dinamicamente os dados da imagem do canal alfa no servidor, otimizar os dois separadamente e recombiná-los usando o elemento canvas e algum JavaScript no navegador. Ta-Da! Funciona com todos os navegadores modernos.

Aqui está explicado como é feito:

http://headers-already-sent.com/artikel/shrinkimage-1/

Você também encontrará um pacote ZIP completo com o script PHP e um plug-in jQuery. Deixe-nos saber o que você pensa sobre isso.

Se você realmente precisar reduzir uma imagem e todas as sugestões fáceis não funcionarem, a resposta final é dividir a imagem em partes compactáveis ​​e recombiná-las no cliente com scripts.

A imagem da pergunta parece um gradiente de cores com linhas verticais e algumas manchas / ruído. Divida isso nas seguintes camadas:

1. O gradiente de cores sem linhas ou ruído. Isso compactará bem em PNG e muito bem em JPEG. Melhor ainda, use JavaScript para gerar o gradiente de cores no cliente. Você provavelmente poderia fazê-lo em menos de 200 bytes de JS.
2. As linhas verticais sem cor ou ruído. Você pode compactar isso em um único canal de 4 bits (alfa ou cinza). Você só precisa de uma imagem de 1 pixel de altura, que pode ser esticada. Isso comprimiria muito bem em PNG.
3. O barulho. Novamente, tudo o que você precisa é de um único canal de 4 bits (alfa ou cinza). Sem cores ou linhas, isso deve ser compactado muito bem em PNG ou JPEG.

Combine as camadas em uma única imagem com JavaScript, e toda a sua "imagem" poderá ter 15 KB ou menos.

Esse tipo de trabalho era padrão no setor de jogos há décadas e ainda é. O melhor é que o Photoshop já possui todas essas camadas separadas, se você criou sua imagem como um profissional.

Os arquivos PNG padrão já são o formato de imagem mais compactado que você pode usar, por isso os arquivos PNG são usados ​​tanto para imagens em sites, especialmente para fins de design.

Mas ainda existe uma maneira de compactar ainda mais os arquivos PNG; diminuindo o número de cores usadas na imagem. Isso geralmente pode reduzir o tamanho do arquivo em até 70% ou mais.

O melhor software livre automatizado com a maior porcentagem de compactação geral que encontrei é o FileOptimizer, que usa vários mecanismos (por exemplo, PngOptimizer, PNGOUT, pngwolf etc.) para compactar a imagem no menor tamanho possível.

Outra ferramenta online que encontrei com bons resultados é esta: http://www.giftofspeed.com/png-compressor/

Deixe-me apresentar o FileOptimizer . Ele combina vários métodos de otimização de imagem (incluindo a remoção de EXIF ​​para economizar alguns bytes extras - pode ser desativado).

Resultados dos testes e comparação com outras soluções.

ScriptPNG http://css-ig.net/scriptpng

fornece cerca de 10 opções diferentes, incluindo perdas! Eu tentei um monte e esse arquivo de lote do Windows (com monte de .exes) é ótimo

Eu pessoalmente o uso para comprimir em 8 bits com perdas. Não tenho muita certeza de como funciona, mas minhas capturas de tela têm a mesma aparência. Eu o uso para comprimir capturas de tela. Eu tinha cerca de 2 GB de pngs, agora apenas 700mb