Como otimizar o GIF e PNG imagens 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 ficheiro.
Para ajudar a compensar a degradação da qualidade de imagem que pode acontecer quando as cores são removidas, 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. No Photoshop Elements, Fireworks, 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 várias versões da mesma imagem para facilitar a comparação.
4 para cima torna possível visualizar 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. A redução do número de cores e outras opções pode afectar dramaticamente a imagem.
Por exemplo, a quarta versão, mostra a imagem com apenas duas cores mostra. Nos outros três quadrados, a imagem inclui mais cores - e apesar de parecer melhor, o tamanho do arquivo 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, pouco menos de 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 de 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 como uma imagem pequena quanto 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 na 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 na imagem, essa 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 desejadas.
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 é aberta.
Digite um nome para a imagem e guardá-lo para 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 você 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.