Photoshop: como reduzir o tamanho de um PNG para uso na web


10

Eu tenho um arquivo PNG com 2042 x 1250 e 6,1 MB. Quando abro com o Photoshop e faço "Salvar como> PNG 24" e escolho o tamanho do arquivo compactado das duas opções (a outra sem compressão), ainda recebo uma imagem da ordem de alguns MB, que, desde que vai ser um ativo da web, eu gostaria de estar no KB e não nos MB. Como compactar essa imagem de maneira inteligente em um intervalo aproximado de alguns milhares de KB?


11
Use file -> save for web e escolha png 24 na lista de formatos de arquivo (o JPG geralmente é o padrão).
AndrewH

O que faz você pensar que um arquivo pode ser compactado quantas vezes quiser? Você pode mudar para JPEG e mexer nas configurações de qualidade inferior.
usr2564301

Respostas:


13

Os detalhes nerds (você não pediu)

Alguns formatos de imagem, como JPG, oferecem suporte à compactação com perdas . Quando uma imagem compactada com perda é salva e, em seguida, renderizada, ela não é 100% exatamente como você a projetou, mas apenas "próxima" a ela, como uma espécie de esboço. Alguns dos detalhes originais estão perdidos . Como não há expectativa de precisão, as imagens Lossy Compressed têm o luxo de armazenar pouca informação sobre o design original, resultando em arquivos pequenos. Eles ainda permitem que você especifique quão preciso o resultado deve ser: quanto menos preciso ele for, menor será o arquivo.

Por outro lado, o formato PNG, por design, suporta compactação sem perdas . Isso significa que, depois que a imagem é salva em um arquivo, quando é renderizada novamente, todos os pixels são renderizados exatamente como você os projetou, sem perder nenhum detalhe. Isso é ótimo, mas infelizmente significa que ele precisa armazenar muitas informações para renderizar a imagem perfeitamente, resultando em arquivos grandes.

O PNG faz de tudo para otimizar as informações necessárias antes de salvá-las em um arquivo, mas você não pode especificar, como faz com os JPGs, o quão compactado ou preciso você deseja que o arquivo seja. O resultado é o que é e você não tem controle sobre o tamanho do arquivo.

Algumas sugestões

Dito isto, há algumas coisas que você pode fazer para tentar obter um arquivo menor.

  • Grandes áreas de cores planas são compactadas melhor do que áreas complexas. Veja se você pode simplificar sua imagem.
  • Você tem muito espaço negativo ao redor da imagem? Tente reduzi-lo ao mínimo.
  • Você está usando transparência? Caso contrário, considere salvar a imagem como JPG.
  • Se você não puder salvá-lo como JPG por qualquer motivo, mas não estiver usando transparência, desmarque a opção "transparência" nas opções de salvamento. Isso reduzirá um pouco o seu resultado final.
  • Considere cortar a imagem em partes e compor no HTML final, como uma espécie de quebra-cabeça. Você pode salvar as partes que exigem transparência como PNGs e as outras partes como JPGs altamente compactados. O resultado total deve ser menos pesado.
  • Use uma ferramenta de compactação PNG (por exemplo, https://tinypng.com/ ). Lembre-se, essas ferramentas usam um algoritmo com perdas. Eles tentam simplificar sua imagem para poder salvá-la como um arquivo menor. Eles reduzem drasticamente o tamanho do arquivo, mas o resultado final pode perder muitos detalhes. Você sempre pode experimentá-los e julgar o resultado, dependendo da aplicação.

Se você compartilhar sua imagem, eu posso lhe dar algumas sugestões.


O TinyPNG converte em PNG de 8 bits que se parece com um GIF.
Hannes Schneidermayer

@Heanz. Verdade. Ele converte em 8 bits. Mas não é um GIF, no entanto. Ele suporta transparência alfa. Na minha experiência, nunca notei a diferença entre o PNG completo e o que eles produzem.
cockypup

@cokcypup Para logotipos que sejam verdadeiros, mas para um rosto humano, de jeito nenhum.
Hannes Schneidermayer

@Heanz eu nunca usei para rostos humanos, mas eu o uso regularmente para fotos de embalagens de cosméticos. Eu não posso dizer a diferença naqueles. Ainda assim, meu comentário sobre alfa está correto. O formato GIF não suporta transparência alfa.
cockypup

2

Tente adicionar uma camada de ajuste Posterize à imagem e reduza o número de cores. Acho que você ainda pode manter a alta qualidade e reduzir o tamanho do arquivo por esse método.


Funciona como um encanto!
Christian Strang

0

Um PNG de 6,1 MB está longe da faixa de KBs; portanto, as sugestões de Cokypup seriam melhores.

Para outros PNGs que você pode criar, a melhor maneira de salvá-los para uso na Web é salvar no Photoshop com "Salvar para a Web" em vez de "Salvar como". O "Save for Web" do Photoshop faz alguma otimização que reduzirá drasticamente o tamanho do arquivo.

Depois, eu usaria uma ferramenta de compactação para PNGs, como o Tiny PNG. O
Tiny PNG usa uma compactação com perdas, como você faria ao salvar um JPG. Isso reduz drasticamente o tamanho do arquivo e, como você pode ver no exemplo no site, a compactação com perdas que ele realiza é quase imperceptível.


Quase imperceptível depende muito da imagem que você está alimentando através do algoritmo que encontrei, use com cuidado e nunca substitua o arquivo original.
PieBie

Está convertendo para 8 bits e parece um GIF em fotos coloridas.
Hannes Schneidermayer

-1

provavelmente não é preciso dizer, mas muitas pessoas esquecem de definir sua resolução em 72 pixels / polegada para os recursos da Web.

Imagem> Tamanho da imagem> defina a resolução para 72 ppi.


que não tem efeito sobre as imagens usadas para web, apenas o tamanho em px
Luciano
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.