Como otimizar imagens GIF e PNG para o seu site de mídia social

Se você está trabalhando com um gráfico que pode ser exibido em 256 cores ou menos no seu site de mídia social - como um logotipo, personagem de desenho animado, ou desenho - sua melhor aposta é usar o formato PNG e reduzir o número total de cores usada na imagem, tanto quanto possível para reduzir o tamanho do arquivo.

Para ajudar a compensar a degradação na qualidade da imagem que pode acontecer quando as cores são removidos, GIF e PNG usar um truque dithering. dithering envolve alternando pixels em um padrão xadrez-like para criar variações de cores sutis, mesmo com uma paleta de cores limitada. O efeito pode suavizar as bordas da imagem e torná-lo parecem ter mais cores do que ele realmente faz.

Para converter uma imagem para um GIF ou PNG no Photoshop, siga estes passos. Em elementos de Photoshop, de artifício, ou GIMP o processo é semelhante, embora os passos específicos podem variar.

Com a imagem aberta no Photoshop, escolha Arquivo → Salvar para web & Dispositivos.

A Save for Web & caixa de diálogo Dispositivos aparece.

No canto superior esquerdo da caixa de diálogo, selecione a guia 2-Up ou 4-Up para exibir múltiplas versões da mesma imagem para facilitar a comparação.

4 para cima torna possível ver a imagem original (no canto superior esquerdo), bem como três prévias diferentes da mesma imagem.

Clique para selecionar qualquer uma das quatro imagens de visualização para ver o tamanho e ajustar suas configurações.

O tamanho, formato e outras configurações da imagem selecionada são mostrados no canto superior direito da caixa de diálogo. Reduzir o número de cores e outras opções podem afetar drasticamente a imagem.

Por exemplo, a quarta versão, mostra a imagem com apenas duas cores mostrando. Nas outras três praças, a imagem inclui mais cores - e embora eles olhar melhor, o tamanho do ficheiro será maior.

Alterar as imagens de visualização no modo de exibição 4-Up permite comparar a imagem original com até três versões diferentes, de diferentes cores, transparência, e outras configurações, cobertos nos passos que se seguem.

No lado direito da caixa de diálogo, apenas sob Preset, clique na pequena seta para abrir a lista suspensa Formato de arquivo otimizado e escolha PNG-24.

A opção PNG-24 produz uma imagem de melhor qualidade. A qualidade da imagem diminui rapidamente como você reduzir o número de cores no arquivo ou alterar o formato de GIF. No entanto, você também reduzir o tamanho do arquivo.

Na caixa Cores, selecione o número de cores.

Quanto menos cores que você usa, menor o tamanho do arquivo e quanto mais rápido a imagem irá baixar.

Se você reduzir as cores demais, você perde detalhes. O número ideal de cores depende de sua imagem. Você quer tão pequeno uma imagem possível, mas se você reduzir o número de cores muito longe, sua imagem vai olhar terrível.

Se você quiser manter uma área transparente em sua imagem, selecione a caixa de seleção Transparência.

Qualquer área da imagem que era transparente quando criou a imagem no editor aparece transparente na janela de visualização. Se você não tem uma área transparente em sua imagem, esta configuração não tem efeito.

Usando a transparência é um bom truque para fazer um texto ou uma imagem parecem flutuar, porque um fundo transparente não aparecem na página web. Você pode selecionar a transparência como uma opção de fundo na caixa de diálogo Novo, quando você cria uma nova imagem no Photoshop ou Photoshop Elements.

Especifique outras configurações conforme desejado.

O restante das configurações na caixa de diálogo pode ser deixado em seus padrões em Photoshop.

Clique em Salvar.

Salvar otimizado como caixa de diálogo será aberta.

Digite um nome para a imagem e salvá-lo em uma pasta que você pode rapidamente e facilmente localizar quando chega a hora de fazer o upload para o seu site de mídia social escolhida.

Repita essas etapas para cada imagem que deseja otimizar como um GIF ou PNG para o seu site.

Tentativa e erro é uma grande técnica no Salvar para Web & caixa de diálogo dispositivos. Em cada uma das três janelas de visualização exibindo versões otimizadas o desenho da casa, foram usados cada vez menos cores, o que reduz o tamanho do arquivo com um efeito cada vez mais degradante.