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

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?

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.

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.

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.

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.