Como otimizar Web Imagens em PNG
Quando você está projetando para o iPhone, iPad ou iPod touch, você precisa escolher os melhores formatos de imagem e resolução, bem como optimizar as suas fotos e outros elementos gráficos.
Menu
- Com a imagem aberta no photoshop, escolha arquivo-salvar para web devices (ou file-save for web).
- 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.
- Selecione uma imagem de visualização para começar a mudar suas configurações.
- No lado direito da janela de diálogo, pouco menos de preset, clique na pequena seta para abrir a lista suspensa formato de arquivo otimizado e escolher ou png 8 ou 24.
- Na caixa de cores, selecione o número de cores, como mostrado na figura 8-5.
- Se você quiser manter uma área transparente na sua imagem, selecione a caixa de seleção transparência.
- Se você escolher transparência, também especificar uma cor matte.
- Especifique outras configurações desejadas.
- Clique em salvar.
- Digite um nome para a imagem e guardá-lo para a pasta de imagens (ou qualquer outra pasta) na pasta do site local.
Se você está trabalhando com um gráfico, como um logotipo, personagem de desenho animado, ou desenho que pode ser exibido em 256 cores ou menos, a sua melhor aposta é usar o formato PNG 8 e reduzir o número total de cores usadas na imagem tanto quanto possível para reduzir o tamanho do ficheiro.
Se você quiser 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 é PNG 24.
Para ajudar a compensar a degradação da qualidade de imagem que pode acontecer quando as cores são removidas, PNG usa 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 o PNG 8 ou 24 formato no Photoshop, siga estes passos (no Photoshop Elements ou Fireworks, o processo é semelhante, embora os passos específicos podem variar):
Com a imagem aberta no Photoshop, escolha Arquivo-Salvar para Web Devices (ou File-Save for Web).
A Save for Web caixa de diálogo Dispositivos aparece. Neste exemplo, você vê o logotipo preto-e-branco para o website arte inplainsight. O formato PNG 8 é melhor para imagens com cores limitadas, tais como desenhos animados e arte de linha.
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 torna possível ver a imagem original do logotipo na parte superior, bem como uma prévia da versão otimizada na parte inferior.
Selecione uma imagem de visualização para começar a mudar suas configurações.
Clique em qualquer imagem para torná-la ativa na janela de diálogo.
No lado direito da janela de diálogo, pouco menos de Preset, clique na pequena seta para abrir a lista suspensa Formato de arquivo otimizado e escolher ou PNG 8 ou 24.
Se você escolher PNG 8, você poderá obter os menores tamanhos de arquivo. Escolha PNG 24 somente se você deseja otimizar uma imagem com muitas cores e ainda ser capaz de definir uma cor para transparente.
Na caixa de cores, selecione o número de cores, como mostrado na Figura 8-5.
Quanto menos cores que você usa, menor o tamanho do arquivo e quanto mais rápido a imagem irá baixar. Mas tenha cuidado-se reduzir as cores demais, você perde detalhes. O número ideal de cores depende da sua imagem-se ir longe demais, 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.
A transparência é um bom truque para fazer um texto ou uma imagem parecem flutuar em uma página web. Isso 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 arquivo quando você cria uma nova imagem no Photoshop ou Photoshop Elements.
Se você escolher Transparência, também especificar uma cor Matte.
Você quer que a cor fosca para combinar o fundo de sua página web para que o pontilhado ao longo da borda transparente irá misturar-se com o fundo. Se você não especificar uma cor fosca, a transparência é definida para um fundo branco, o que pode causar uma halo efeito quando a imagem é exibida em um fundo colorido.
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 a pasta de imagens (ou qualquer outra pasta) na pasta do site local.
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. A janela de visualização mostra claramente o efeito cada vez mais degradante que a escolha cada vez menos cores produz.