Como reduzir o tamanho do arquivo PNG para a web?

16

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?

ArquivoPNGdaqui: link

Exemplo de imagem enviada Tentei todas as sugestões, mas sem bons resultados, por favor, informe

obrigado

    
por Welliam 04.07.2012 / 16:09

10 respostas

5

O 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 cor, para que a compactação PNG tenha menos complexidade para trabalhar.

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

    
por 04.07.2012 / 17:15
9

RIOT pode fazer isso e muito mais.

Radical Image Optimization Tool (RIOT for short) is a free image optimizer that will let you to visually adjust compression parameters while keeping minimum file size.

It uses with a side by side (dual view) or single view interface to compare the original with the optimized image in real time and instantly see the resulting file size.

The image optimizer is lightweight, fast and simple to use, yet powerful for advanced users. You will be able to control compression, number of colours, meta data settings and much more, and select image format (JPEG, GIF or PNG) for your output file.

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

Here are the instructions how to convert png24 images into png8 for ie6 goodness, all through the command line using open source tools (i think) pngquant +pngout + pngcrush.

1- quantize image into 256 (so basically png8′s look crap with large sprites or sprites with a large colour range).

pngquant 256 some_24_bit.png

     

2- converta o formato de 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

    
por 04.07.2012 / 16:58
6

Experimente TinyPNG

Do site deles:

How does it work?

When you upload a PNG (Portable Network Graphics) file, similar colors in your image are combined. This technique is called “quantization”. Because the number of colors is reduced, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata is stripped too. The result: tiny PNG files with 100% support for transparency.

Eles têm duas opções:

  • Arraste e solte as imagens em seu website e elas serão processadas automaticamente. Serviço gratuito. (Até 20 imagens. Máx. 5 MB cada)
  • Plugin do Photoshop. Isso custa $.

Eu não tentei o plugin PS, então não posso comentar como funciona.

    
por 10.07.2014 / 02:46
5

Se você não se importar com a linha de comando, dê uma olhada em OptiPNG , pode ser o que você está procurando.

OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information. This program also converts external formats (BMP, GIF, PNM and TIFF) to optimized PNG, and performs PNG integrity checks and corrections.

    
por 04.07.2012 / 16:17
3

Use a combinação de pngout e deflopt . pngout determinará automaticamente se suas cores PNG cabem no PNG-8 e as usarão. deflopt irá extrair alguns bytes extras da imagem já otimizada - é um utilitário para trabalhar com qualquer dado deflacionado e o PNG é um desses.

    
por 04.07.2012 / 16:53
3

Uma boa ideia para manipular o PNG com o canal alfa no contexto do desenvolvimento do website seria deixar o servidor fazer o truque para você: separar dinamicamente os dados da imagem do canal alfa no servidor, otimize ambos separadamente e recombine-os usando o elemento canvas e algum JavaScript no navegador. Ta-Da! Funciona com todos os navegadores modernos.

Aqui é explicado como isso é feito:

link

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.

    
por 07.09.2012 / 10:45
1

Se você realmente precisa reduzir uma imagem, e todas as sugestões fáceis não funcionam, 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 cor com linhas verticais e algumas manchas / ruído. Divida isso nas seguintes camadas:

  1. O gradiente de cores sem linhas ou ruído. Isso irá compactar bem em PNG e muito bem em JPEG. Melhor ainda, use JavaScript para gerar o gradiente de cor no cliente. Você provavelmente poderia fazer isso 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 você pode esticar. Isso comprimiria muito bem no PNG.
  3. O barulho. Mais uma vez, tudo o que você precisa é de um único canal de 4 bits (alfa ou cinza). Sem cor ou linhas, isso deve compactar muito bem em PNG ou JPEG.

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

Este tipo de trabalho foi padrão da indústria em jogos por décadas, e ainda é. O melhor é que o Photoshop já tem todas essas camadas separadas, se você criou sua imagem como um profissional.

    
por 10.07.2014 / 03:07
1

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 muito usados para imagens em sites, especialmente para fins de design.

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

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

Outra ferramenta on-line que encontrei com bons resultados é esta: link

    
por 06.11.2014 / 18:17
1

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

Resultados do teste e comparação com outras soluções.

    
por 06.01.2017 / 03:44
0

ScriptPNG link

dá-lhe cerca de 10 opções diferentes, incluindo lossy! Eu tentei um monte e este arquivo de lote do Windows (com monte de .exes) é ótimo

Eu pessoalmente uso para comprimir a 8bit com perdas. Não tenho certeza de como isso funciona, mas minhas imagens parecem as mesmas. Eu uso para comprimir screenshots. Eu tinha cerca de 2GB de png, agora apenas 700mb

    
por 23.10.2014 / 18:39