Como salvar imagens mais leves e compactas para Web no Photoshop

Trabalhar com imagens para internet é uma experiência completamente diferente de trabalhar com imagens para impressão. A começar pelo espectro de cores: na web, utilizamos o RGB (combinação de vermelho, verde e azul), que corresponde às cores disponíveis no monitor, enquanto na impressão utilizamos o CMYK (combinação de ciano, magenta, amarelo e preto), correspondentes às cores de tintas.

Além do espectro de cores, ao produzir imagens para a internet é necessário considerar o tamanho delas. E quando digo tamanho, me refiro tanto às dimensões da imagem quanto ao peso do arquivo gerado. Normalmente não se utiliza uma imagem de altíssima resolução pesando 1GB. Imagine um usuário no celular tentando visualizar esta imagem? Ou que tal um usuário do interior do Brasil que possui conexão de 1Mbps?

É para preparar imagens para utilização na internet que o Photoshop possui o recurso "Salvar para Web", que você aprende a utilizar neste tutorial.

Passo 1: abra a imagem no Photoshop

Inicie o Photoshop e abra a imagem que você deseja alterar usando o comando "Arquivo" > "Abrir"

(ou File > Open, em inglês). Você também pode utilizar o atalho de teclado “Ctrl + O” para este comando.

Selecionando o comando "Abrir" no Photoshop.

Localize em seu computador a imagem desejada e clique em “Abrir”. A imagem que vamos utilizar neste tutorial, para os três filtros, é a seguinte:

Para exemplificar os diferentes formatos disponíveis no "Salvar para Web", utilizaremos as imagens acima: uma fotografia e um desenho de cores sólidas.

Passo 2: acesse o recurso Salvar para Web

Com a imagem aberta, inicie a função de salvamento para internet usando o comando "Arquivo" > "Salvar para Web..."

(ou File > Save for Web, em inglês). Você também pode utilizar o atalho de teclado “Alt + Shift + Ctrl + S” para este comando.

Selecionando o comando de menu "Salvar para Web" em "Arquivo", no Photoshop.

Passo 3: ajustando a conversão da imagem

Você será apresentado à caixa de diálogo do comando "Salvar para Web":

Ajustando as opções do Salvar para Web no Photoshop.

Diferente da maioria dos filtros e ajustes do Photoshop, o "Salvar para Web" apresenta uma janela completa com ferramentas, barra lateral, visualização em tamanho grande e abas. Por isso vamos abordar as principais áreas desta janela.

No canto superior esquerdo podemos observar as abas de visualização da imagem . Essas abas permitem que você visualize somente a imagem otimizada para web, a imagem original e compare as duas lado a lado e até compare a orginal com outras 3 configurações de otimização. Mais para a esquerda, podemos visualizar a barra de ferramentas

, que conta com opções de zoom, conta-gotas para visualizar cores específicas da imagem, e o seletor de fatias. Fatias são criadas por uma ferramenta específica na janela principal do Photoshop que permite dividir a imagem em múltiplas partes. No Salvar para Web, é possível aplicar uma configuração de otimização diferente para cada fatia, mas este recurso já não é muito utilizado hoje em dia. Abaixo da visualização da imagem é possível consultar o tamanho do arquivo que seria gerado com as configurações selecionadas.

No lado direito da janela, temos a principal área a ser utilizada na função "Salvar para Web": a configuração do formato da imagem . Aqui é possível escolher se a imagem será exportada em JPEG, PNG ou GIF e selecionar o nível de qualidade dentro destes formatos. Esta parte veremos em detalhe mais à frente. Mais abaixo temos a opção "Tamanho da Imagem"

que já permite modificar as dimensões da foto a ser exportada (não alterando a original). Clicando no ícone da corrente, é possível ativar e desativar a mudança proporcional de tamanho, que evita que a imagem fique esticada.

Por fim, temos o botão "Salvar..." , que deve ser utilizado assim que terminar de fazer todas as alterações necessárias na imagem. Note que o "Salvar para Web" guardará um cópia da imagem com estar configurações - nenhuma delas será aplicada à imagem original.

Agora, vamos conhecer um pouco melhor os dois formatos mais populares e eficientes disponíveis: JPG e PNG, além de entender como eles fazem a compactação da imagem e as opções de cada formato dentro do "Salvar para Web".

1. O Formato JPG

Um dos formatos mais populares do mundo, JPG (que também é conhecido como JPEG, ou Joint Photographic Experts Group) é o tipo de arquivo ideal para fotografias e imagens que contém muitas cores e detalhes, com variações suaves de tom e cor. Ao selecionar a opção "JPEG" na área superior direita da janela "Salvar para Web", você terá acesso às seguintes opções:

Definindo as opções de qualidade do formato JPG.

É possível selecionar a qualidade da imagem no formato JPG de duas formas: selecionando um nível entre opções como "Baixa", "Média" e "Muito Alta", ou digitar um número de 0 a 100 no campo "Qualidade" . Não é necessário alterar as demais opções.

O formato JPG faz a compressão das imagens através de um algorítmo que elimina algumas informações, algo chamado de "método de compressão com perdas", o que muitas vezes resulta numa menor definição de imagem, além de pequenos pontinhos próximos aos contornos, chamados de "artefato" (algo que pode ser atenuado através do filtro "Reduzir Ruído" do Photoshop). Veja como ficaram nossos exemplos convertidos para JPG Qualidade 50:

Observe que, em comparação às imagens originais, o exemplo que mais foi prejudicado pela conversão em JPG foi o desenho. Isso acontece por causa da desfocagem e aparecimento de artefatos nos contornos da imagem. Não somente na qualidade, mas o JPG também promove uma menor redução do peso do arquivo em imagens como o nosso desenho, e uma maior redução para fotografias e imagens com muitos detalhes e cores.

1. O Formato PNG

Um formato mais recente e desenvolvido para ser o sucessor do GIF, o PNG (ou Portable Network Graphics) é o tipo de arquivo ideal para desenhos e imagens com poucas cores e detalhes. Ele também permite o canal alpha, ou seja, imagens com fundo transparente, diferente do JPG. Ao selecionar a opção "PNG-8" na área superior direita da janela "Salvar para Web", você terá acesso às seguintes opções:

Definindo as opções de qualidade do formato PNG.

No formato PNG, a qualidade da imagem resultante é definida pelo número de cores disponível no arquivo. Quanto menor a quantidade de cores, menor será a qualidade e o peso do arquivo. Também é possível escolher o método usado para a seleção destas cores

, o que pode alterar a qualidade final. Por conta da limitação de cores, o Photoshop ainda oferece a opções de pontilhamento , que permite criar gradação de cores com a difusão de pontos de cores próximas. Para imagens com fundo transparente, marque a opção "Transparência" . Não é necessário alterar as demais opções.

Como foi possível observar, o formato PNG faz a compressão das imagens através da redução do número de cores. Veja como ficaram nossos exemplos convertidos para PNG-8 de 64 cores:

Observe que, em comparação às imagens originais, o exemplo que mais foi prejudicado pela conversão em PNG foi a fotografia. A limitação de cores acabou criando áreas borradas de cor única, reduzindo a percepção de realismo da foto. Ativar o pontilhamento na imagem poderia atenuar esta impressão, mas criaria um efeito granulado (que também pode ser reduzido através do filtro "Reduzir Ruído" do Photoshop). Já no caso da imagem em desenho, praticamente não houve perdas, pois as cores e os contornos foram mantidos com boa qualidade. O Photoshop também oferece a opção "PNG-24" na seleção de formatos, ideal para manter a qualidade das imagens independente do tipo, sem perdas, pontilhamento ou artefatos, mas gerando um arquivo final maior.

Escolha o formato que oferecer uma melhor relação peso/qualidade para as fotos que desejar utilizar, sempre visualizando o resultado e o peso na área de visualização, não se esquecendo de salvar a versão otimizada quando ficar satisfeito com o resultado clicando no botão "Salvar..." dentro da caixa de diálogo "Salvar para Web".