Is Your Web Image Ready?

Nosso objetivo, ao colocar imagens em uma página web, é fazer com que o arquivo tão pequeno quanto possível, sem comprometer a qualidade da imagem. Neste artigo, vamos seguir os passos para tornar a sua imagem na Internet-pronto usando o web-savvy recursos dentro do Photoshop.

É tentador apenas salvar o arquivo como JPG ou GIF usando o Arquivo / Salvar como opção dentro do Photoshop e chamar o web-imagem pronta. No entanto, se fizermos isso dessa maneira, perdemos aproveitando a imagem encolhe ferramentas encontradas apenas dentro do Photoshop "Save for Web caixa de diálogo". Esses recursos vamos afinar a conservação da imagem, resultando em mesmo tamanho de arquivo menor, sem comprometer a qualidade da imagem.

Antes de discutir os passos para salvar uma imagem para a web, vamos olhar para os dois formatos mais utilizados: JPEG e GIF. JPEG permite uma ampla gama de cores, enquanto o GIF é mais usado para a cor sólida e imagens a cores repetitivas. Eu uso JPEG para fotografias e GIFS para arte de linha, logotipos e algumas ilustrações. Posso também usar o formato PNG se eu precisar de uma alta qualidade de imagem e salvá-lo como um arquivo JPEG com os resultados da qualidade desejada em um arquivo que é muito grande. (ou seja, leva muito tempo para fazer download)

Vamos seguir os passos para tornar a sua imagem na Internet-pronto.

Definir resolução e tamanho de imagem
Antes de salvar o arquivo, eu sempre definir a resolução de 72 (resolução padrão dos monitores) e eu definir o tamanho da imagem para o tamanho que eu quero que a imagem seja na página da web. Ambas as opções são definidas na caixa de diálogo Image Size. Selecione Image> Image Size.

Tamanho da Imagem da caixa de diálogo

Salvar para a Web e Dispositivos
A Save for Web and Devices recurso dentro do menu Arquivo do Photoshop nos permite aperfeiçoar o processo de poupança para nos dar o melhor tamanho de arquivo possível. Esta opção também nos permite comparar visualmente diversas configurações antes de salvar o arquivo.

Depois de selecionar File> Save for Web and Devices, a seguinte caixa de diálogo aparece:

Salvar para a Web e Dispositivos Dialog Box

Nesta janela, selecione a aba 4-up na parte superior da janela. Isto dá-nos 3 diferentes visuais da imagem (para além do original) com diferentes configurações. Vamos dar uma olhada na caixa de diálogo.

Na parte superior esquerda da tela estão as ferramentas. A única ferramenta que pode usar é a ferramenta de zoom. Ele funciona da mesma forma como a ferramenta de zoom no Photoshop. O painel central apresenta representações visuais da imagem em diversas configurações. O painel da direita é onde temos várias opções para definir uma das imagens no painel central. A caixa azul em torno de um delimitador das imagens é a imagem selecionada.

Antes de fazer quaisquer mudanças que eu veja o arquivo de informações no âmbito de cada imagem.

Informações da Imagem

Esta informação diz-me o ficheiro (formato JPEG), o tamanho do arquivo, e quanto tempo vai demorar para fazer o download a uma velocidade específica. (Clique com o botão direito info a velocidade para selecionar uma velocidade de download diferente). Estamos mais interessados no tamanho do arquivo.

Para a direita destas informações é o parâmetro de "qualidade" - quanto menor a qualidade, maior a compressão. Como diminui a qualidade, a representação visual também diminui. Podemos perder detalhe. Ou, a imagem pode começar a olhar distorcido. Nosso objetivo é usar a imagem de menor qualidade, sem comprometer a representação visual da imagem.

Definindo formato de arquivo e Qualidade

Painel Direito Ajustes

O formato do arquivo (JPEG, GIF, etc) ea qualidade pode ser alterado na parte superior do painel direito. Existem outros parâmetros, bem como, mas vamos concentrar-nos sobre estes dois. No painel central, seleccione a imagem que está mais próximo do tamanho do arquivo desejado e que ainda mantém a sua integridade visual. Isso torna a imagem ativa. Todas as alterações que fazemos no painel direito, será aplicada a esta imagem.

Clique na seta para a direita no campo de Qualidade para abrir o controle de qualidade. Trazer para baixo a qualidade até que é o menor tamanho possível, a qualidade desejada ainda está intacto. Se você quiser comparar visualmente diversas opções lado a lado, fazer ajustes semelhantes a outras duas imagens.

Quando a imagem está no menor tamanho possível com a integridade visual desejado, selecione a imagem para tornar a imagem ativa e clique em Salvar. Isso abre a caixa de diálogo Salvar Otimizado. Navegue até onde você quer salvar o arquivo. Verifique se a opção Salvar como tipo está definido para apenas imagens. Clique em Salvar.

Save Images Only

Depois que o arquivo é salvo, a imagem está pronta para ser usada em sua página web. Você pode ter certeza que você tem o menor tamanho de arquivo, sem comprometer a qualidade da imagem. Sua imagem é agora web-pronto.