5 passos para otimizar suas imagens no Photoshop

2
141

Otimizar suas imagens é fundamental de você pretende usá-las para sites ou blogs na internet e pode poupar muito tempo de carregamento. Seja um blog pessoal ou um site de negócios, o fato é que as imagens são – na maioria dos casos – um aspecto importante do conteúdo de seu site. Portanto, é importante que as imagens sejam devidamente otimizadas sem sacrificar sua qualidade. Neste tutorial simples e rápido, vou mostrar como você pode reduzir o tamanho de suas imagens no Photoshop com 5 etapas fáceis e usar ações (actions) para processar lotes de imagens automaticamente.

Antes de começar, quero ressalvar o seguinte: este tutorial exclui outros processos de otimização que também são importante, como selecionar o formato correto (de arquivo) de acordo com suas necessidades, bem como otimizar o SEO como tags alt que podem melhorar a capacidade de pesquisa de suas imagens como por exemplo no Google Imagens. Este pequeno tutorial irá mostrar-lhe como reduzir as imagens para que você possa armazená-las online sem que ocupem muito espaço ou percam qualidade.

Passo 1: Abra o Photoshop e abra sua imagem

Vá em File> Open ( Ctrl / Command + O ) e traga a sua imagem para o seu espaço de trabalho.

Passo 2: Abra a peleta actions.

Vamos usar Ações/Actions para gravar cada comando neste processo, incluindo o comando Salvar para a Web para que eu possa processar, depois, lotes de várias imagens sem ter que abrir uma de cada vez mais tarde.

Exiba o painel Actions acessando Window> Actions (Alt+F9).

No Painel de Ações, clique no ícone Create new set e dê um nome para o seu novo conjunto de actions. Chamei de “minhas imagens”.

No Painel de Ações, clique no ícone Create new set e dê um nome para o seu novo conjunto de actions. Chamei de “minhas imagens”.

Para iniciar o processo de gravação, clique no ícone Create new action, dê a sua ação um nome. Chamei “Otimização de imagem”. Clique em Begin record para começar a gravar.

Para iniciar o processo de gravação, clique no ícone Create new action, dê a sua ação um nome. Chamei “Otimização de imagem”. Clique em Begin record para começar a gravar.

Lembre-se: a partir de agora todos os seus comandos serão gravados no seu Painel de Ações.

Passo 3: Salve sua imagem para a Web acessando File> Save for web… (Alt+Shift+Ctrl+S).

Você deverá ver uma janela de diálogo em seu espaço de trabalho. Eu vou manter a minha imagem com uma qualidade decente, por isso estou usando as seguintes configurações:

Preset: JPEG High (selecione JPEG com qualidade a 60)

Optimized: Habilitado

Convert to sRGB: Habilitado

Image size: mude de acordo com as especificações do seu site

Percent: 100%

Quality: Bicubic

Você deverá ver uma janela de diálogo em seu espaço de trabalho. Eu vou manter a minha imagem com uma qualidade decente, por isso estou usando as seguintes configurações:

Eu preciso ter certeza de que minha imagem não ultrapasse 600 pixels de largura, por isso redimensionei minha imagem com o botão de proporção (corrente) habilitado para que a imagem seja dimensionada proporcionalmente.

Sinta-se livre para fazer o mesmo se você precisa atender a uma exigência de largura / altura exata.

Sinta-se livre para fazer o mesmo se você precisa atender a uma exigência de largura / altura exata.

Dica: Clique na guia 4-Up na parte superior da janela para visualizar a imagem, bem como ver a diferença no tamanho do arquivo e comparação de qualidade. Sinta-se livre para brincar com as configurações até encontrar a qualidade e otimização que se adapte às suas necessidades.

Dica: Clique na guia 4-Up na parte superior da janela para visualizar a imagem, bem como ver a diferença no tamanho do arquivo e comparação de qualidade. Sinta-se livre para brincar com as configurações até encontrar a qualidade e otimização que se adapte às suas necessidades.

Você também pode clicar no ícone de velocidade de download para mudar o Tamanho/Tempo de Download para obter uma estimativa de quanto tempo vai demorar para baixar sua imagem no tamanho selecionado.

Você também pode clicar no ícone de velocidade de download para mudar o Tamanho/Tempo de Download para obter uma estimativa de quanto tempo vai demorar para baixar sua imagem no tamanho selecionado.

Para visualizar a imagem em tamanho real, clique no botão Preview para ver sua imagem no navegador da web.

Para visualizar a imagem em tamanho real, clique no botão Preview para ver sua imagem no navegador da web.

Se estiver satisfeito com o resultado, clique em Save.

Eu salvei minhas imagens em uma pasta diferente, já que quero preservar minhas imagens originais com as dimensões maiores para uso futuro (lembre-se que eu redimensionei minhas imagens para 600 pixels de largura).

Feche o arquivo da imagem do seu espaço de trabalho.

Vá para Painel de Ações, clique no botão Stop playing/recording para parar a gravação de Ações. Este, registrou tudo, inclusive o fechamento da sua imagem.

Vá para Painel de Ações, clique no botão Stop playing/recording para parar a gravação de Ações. Este, registrou tudo, inclusive o fechamento da sua imagem.

Lembre-se: Como escolhi salvar minha imagem em uma pasta separada e não salvar a imagem original depois de eu fechá-la, isso irá refletir em minhas ações gravadas. Se você quiser substituir sua imagem, certifique-se de fazê-lo enquanto está gravando.

Você pode ver os detalhes de suas ações gravadas clicando para expandir cada ação.

Você pode ver os detalhes de suas ações gravadas clicando para expandir cada ação.

Passo 4: Processar lotes de imagens

É hora de fazer o mesmo com o resto de suas imagens. Em vez de editar uma por uma, vamos colocar nossa ação recém-criada para trabalhar!

Vá em File> Automate> Batch. Use minhas configurações abaixo.

Vá em File> Automate> Batch. Use minhas configurações abaixo.

Você deve selecionar o conjuntos de ações e a ação que acabamos de criar.

Certifique-se de definir a origem das imagens e a pasta de destino, e habilitar a caixinha Override action “Save as” commands.

Ao habilitar a caixinha Override action “Save as” commands, estamos permitindo que o Photoshop inclua o comando de “Salvar para web” e suas configurações.

Estou mantendo minha Nomeação de arquivos com o nome do arquivo original, bem como sua extensão.

Passo 5: Ferramentas de Otimização de uso de imagens

Já reduzimos a nossa imagem original um pouco no Photoshop, mas vamos reduzi-la ainda mais, usando uma ferramenta de otimização de imagem. Existem muitas ferramentas legais que você pode escolher, mas o que eu gosto de usar é o Smush.it! É fácil, rápido e grátis.

Acesse o site do Smush.it! (URL completa: http://www.smushit.com/ysmush.it/).

Clique na aba UPLOADER.

Acesse o site do Smush.it! (URL completa: http://www.smushit.com/ysmush.it/).

Agora, clique em Select files anda Smush. A partir da janela de seleção de arquivos que aparece, navegue para arquivos de imagem.

Selecione as imagens e clique em Abrir.

Agora observe o otimizador em ação!

Agora observe o otimizador em ação!

Uma vez concluída, você receberá uma mensagem detalhando o percentual e o tamanho total salvos.

Certifique-se de "Manter estrutura de diretórios no arquivo zip" marcando a caixinha abaixo, o que permitirá que você substitua imagens facilmente se elas estão em subpastas diferentes quando você carrega-las.

Certifique-se de “Manter estrutura de diretórios no arquivo zip” marcando a caixinha abaixo, o que permitirá que você substitua imagens facilmente se elas estão em subpastas diferentes quando você carrega-las.

Clique em Download Smushed Images.

Abra o arquivo zip e substitua a imagem antigas com os arquivos de imagem recém reduzidos.

Resumo

Você acabou de conhecer uma rápida lista sobre como reduzir o tamanho de imagens no Photoshop e otimizá-las para uso na web com 5 passos fáceis. Você também criou ações para otimizar suas imagens de uma só vez, economizando tempo valioso. Caso você queira saber mais sobre como otimizar suas imagens para web e quais os melhores formatos de arquivo acesse o Guia completo para gravação de imagens para a web (em inglês).

E então? Já consegue otimizar suas próprias imagens?

Site original: Design Instruct

Comente! Sugestões, dúvidas e opiniões são ótimos para melhorar o conteúdo do Clube.

Aproveite para seguir o Clube no twitter, facebook, youtube ou google+, assim você fica por dentro das novidades, e acompanha os melhores links do blog. Você também pode assinar nosso feed de notícias e receber todas as atualizações de maneira exclusiva

2 COMENTÁRIOS

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here