Como otimizar imagens da Web em formatos PNG - manequins

Quando você está projetando para o iPhone, iPad ou iPod touch, você precisa escolher os melhores formatos de imagem e resolução, além de otimizar suas fotos e outros gráficos.

Se você estiver trabalhando com um gráfico, como um logotipo, personagem de desenho animado ou desenho que pode ser exibido em 256 cores ou menos, sua melhor aposta é usar o formato PNG 8 e reduzir o número total de cores usadas na imagem o máximo possível para reduzir o tamanho do arquivo.

Se você quer fazer uma cor na imagem transparente, e você está trabalhando com uma fotografia ou outro tipo de imagem com milhões de cores, suas melhores opções são PNG 24.

Para Ajude a compensar a degradação da qualidade de imagem que pode acontecer quando as cores são removidas, o PNG usa um truque de dithering . Dithering envolve a alternância de pixels em um padrão semelhante ao tabuleiro de damas para criar variações sutis de cores, mesmo com uma paleta de cores limitada. O efeito pode suavizar as bordas da imagem e fazer com que pareça ter mais cores do que realmente faz.

Para converter uma imagem para o formato PNG 8 ou 24 no Photoshop, siga estas etapas (em Photoshop Elements ou Fireworks, o processo é similar, embora as etapas específicas possam variar):

1 Com o imagem aberta no Photoshop, escolha Arquivo → Salvar para Web e Dispositivos (ou Arquivo → Salvar para Web).

A caixa de diálogo Salvar para Web e Dispositivos aparece. Neste exemplo, você vê o logotipo preto e branco para o site inplainsight art. O formato PNG 8 é o melhor para imagens com cores limitadas, como desenhos animados e arte de linha.

2 No canto superior esquerdo da caixa de diálogo, escolha 2-Up ou 4-Up para exibir várias versões da mesma imagem para facilitar a comparação lado-a-lado.

Este exemplo mostra 2-Up, o que permite visualizar a imagem original do logotipo na parte superior, bem como uma pré-visualização da versão otimizada na parte inferior.

3Selecione uma imagem de visualização para começar a mudar suas configurações.

Clique em qualquer imagem para ativá-la na janela de diálogo.

4 No lado direito da janela de diálogo, apenas sob Preset, clique na seta pequena para abrir a lista suspensa Otimizada de Formato de Arquivo e escolha PNG 8 ou 24.

Se você escolher PNG 8, você irá obter os menores tamanhos de arquivo. Escolha PNG 24 somente se desejar otimizar uma imagem com muitas cores e ainda conseguir uma cor transparente.

5 Na caixa Cores, selecione o número de cores, conforme mostrado na Figura 8-5.

Quanto menos cores você usar, menor será o tamanho do arquivo e mais rápido a imagem será baixada. Mas tenha cuidado; Se você reduzir as cores demais, você perderá detalhes.O número ideal de cores depende da sua imagem; Se você for longe demais, sua imagem parecerá terrível.

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

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

A transparência é um bom truque para fazer com que o texto ou uma imagem pareçam flutuar em uma página da Web. Isso ocorre porque um fundo transparente não aparece na página da Web. Você pode selecionar a transparência como uma opção em segundo plano na caixa de diálogo Novo arquivo ao criar uma nova imagem no Photoshop ou Photoshop Elements.

7Se você escolher Transparência, especifique também uma cor Matte.

Você quer que a cor mate corresponda ao fundo da sua página da web para que o dithering ao longo da borda transparente se funda com o plano de fundo. Se você não especificar uma cor mate, a transparência é definida para um fundo branco, o que pode causar um efeito halo quando a imagem é exibida em um plano de fundo colorido.

8Specifique outras configurações conforme desejado.

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

9Clique em Salvar.

A caixa de diálogo Salvar otimizado como é aberta.

10Introduza um nome para a imagem e guarde-a na pasta de imagens (ou em qualquer outra pasta) na pasta do site local.

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

Teste e erro é uma ótima técnica na caixa de diálogo Salvar para Web e Dispositivos. A janela de visualização mostra claramente o efeito cada vez mais degradante que a escolha de cada vez menos cores produz.