Sua imagem é Web-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 percorrer as etapas para tornar a sua imagem prontos para a web usando os recursos de web-savvy dentro Photoshop.

É tentador basta salvar o arquivo como um jpg ou gif usando o Arquivo / Salvar como opção dentro de Photoshop e chamar a imagem prontos para a web. No entanto, se fizermos desta forma, perdemos aproveitando a imagem encolhe ferramentas encontradas somente dentro do Photoshop caixa de diálogo "Save for Web". Esses recursos vamos afinar a poupança 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 gama maior de cores, enquanto que GIF é mais usado para a cor sólida e imagens a cores repetitivas. Eu uso o JPEG para fotografias e GIFS para arte de linha, logotipos, e algumas ilustrações. Posso também usar o formato PNG, se eu preciso de uma alta qualidade de imagem e salvá-lo como um JPEG com os resultados da qualidade desejada em um arquivo que é muito grande. (Ou seja, leva muito tempo para download)

Vamos seguir os passos para tornar a sua imagem prontos para a web.

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

Imagem da caixa de diálogo Tamanho

Salvar para a Web e Dispositivos
O Salvar para a Web e Dispositivos de recurso dentro do menu Arquivo do Photoshop nos permite ajustar o processo de gravação para dar-nos o tamanho do arquivo melhor possível. Esta opção também nos permite comparar visualmente diversas configurações antes de salvar o arquivo.

Depois de selecionar Arquivo> Salvar para a Web e Dispositivos, a seguinte caixa de diálogo aparece:

Salvar para a Web e Dispositivos Dialog Box

Nesta janela, selecione a guia 4-up no topo da janela. Isto dá-nos três visuais diferentes da imagem (além do original) em diferentes configurações. Vamos dar uma olhada na caixa de diálogo.

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

Antes de fazer qualquer alteração que eu olhar para a informação de arquivo em cada imagem.

Informações da imagem

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

À direita desta informação é a "qualidade" parâmetro - o menor a qualidade, maior será a compressão. Como a qualidade diminui, a representação visual também diminui. Podemos perder detalhe. Ou, a imagem pode começar a olhar fuzzy. Nosso objetivo é usar a imagem de menor qualidade, sem comprometer a representação visual da imagem.

Formato de arquivo de configuração e Qualidade

Ajustes Painel de direito

O formato de arquivo (JPEG, GIF, etc) ea qualidade podem ser alteradas a parte superior do painel direito. Existem outros parâmetros também, mas vamos nos concentrar nestes dois. No painel central, selecione a imagem que está mais próximo do tamanho do arquivo desejado e ainda mantém a sua integridade visual. Isto 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 deslizante de qualidade. Derrubar a qualidade até que é o menor tamanho de arquivo possível e a qualidade desejada ainda está intacto. Se você quiser comparar visualmente lado a lado várias opções, fazer ajustes semelhantes aos outros dois imagens.

Quando a imagem está no menor tamanho de arquivo possível com a integridade visual desejado, selecione a imagem para torná-lo 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 é definido para apenas imagens. Clique em Salvar.

Salvar Apenas imagens

Depois que o arquivo é salvo, a imagem está pronta para ser utilizada 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 prontos para a web.