Índice:
Vídeo: Como otimizar imagens e deixar seu site WordPress mais rápido | WordPress sem Código 2.14 2024
Salvar arquivos para a web ou dispositivos móveis no Photoshop O Creative Suite 5 cria uma versão menor da sua imagem para que ela seja carregada rapidamente. A idéia é tornar a imagem tão pequena quanto possível, mantendo-a visualmente agradável.
Use o formato GIF se você tiver grandes áreas de cor sólida.
Uma imagem com muita cor sólida faz um bom GIF.O formato GIF não é com perdas ( não perde dados quando o arquivo é compactado neste formato), mas reduz o tamanho do arquivo usando um número limitado de cores em uma tabela de cores. Quanto menor o número de cores, menor o tamanho do arquivo. Se você já trabalhou no modo de cores Índice, você está familiarizado com esse processo.
A transparência é suportada pelo formato de arquivo GIF. Geralmente, os arquivos GIF não fazem um bom trabalho em qualquer coisa que precisa de transições suaves de uma cor para outra, devido ao suporte fraco do formato de anti-aliasing , , que é o método que o Photoshop usa para Bordas irregulares e irregulares. Quando uma imagem transita de uma cor para outra, o Photoshop produz várias cores de pixels para criar uma mistura uniforme entre as duas cores.
Como o anti-aliasing precisa criar várias cores para esse efeito, os arquivos GIF geralmente não são recomendados. Na verdade, quando você reduz o tamanho de um GIF, você está mais apto a ver bandas (um artefato que aparece como riscas na imagem) porque o anti-aliasing não pode ocorrer com o limite Número de cores disponíveis no formato GIF.
Você pode, naturalmente, aumentar drasticamente o número de cores para criar uma transição mais suave, mas você corre o risco de criar arquivos de monstro que demoram para o download.
Salvar como GIF
Quando você escolhe Arquivo → Salvar para Web e Dispositivos, primeiro veja as opções de formato GIF disponíveis. Eles podem ser mais claros para você se você tiver uma imagem aberta (com muita cor sólida nele).
Para salvar um arquivo para a Web como um GIF, siga estas etapas:
-
Escolha Arquivo → Salvar para Web e Dispositivos.
A caixa de diálogo Salvar para Web e Dispositivos aparece.
-
Na parte superior, clique na guia 2-Acima.
Você vê a imagem original à esquerda e a imagem otimizada à direita (ou superior e inferior, dependendo das proporções da imagem).
Na parte inferior do visor, você vê o tamanho do arquivo original em comparação com o tamanho otimizado do arquivo, bem como o tempo aproximado de download. O tempo de download é importante. A maioria das pessoas não espera mais de dez segundos para uma página da Web aparecer, então mantenha o tempo de download de cada imagem em cinco segundos ou menos.
Altere a velocidade de download escolhendo no menu Visualizar (procure a seta no lado superior direito da caixa de diálogo Salvar para Web e Dispositivos).
-
Escolha GIF 32 Não Dither na lista suspensa Preset.
Você pode ver uma alteração já. O Photoshop fornece-lhe presets para escolher, ou você pode personalizar e salvar o seu próprio.
-
Escolha se deseja que o dithering seja aplicado à imagem, selecionando uma opção na lista suspensa Especificar o Algoritmo Dither.
Esta escolha é puramente pessoal. Como você pode estar limitando cores, o Photoshop pode usar dithering para misturar os pixels das cores disponíveis para simular as cores que faltam. Muitos designers escolhem a opção Não Dither porque o dithering pode criar manchas de cores não naturais em uma imagem.
Escolha entre predefinições ou crie suas próprias configurações personalizadas. -
Se sua imagem estiver em uma camada transparente e você quiser manter essa transparência em uma página da Web, selecione a caixa de seleção Transparência.
Tabela de cores na caixa de diálogo Salvar para Web e Dispositivos
Quando você salva uma imagem no formato GIF usando a caixa de diálogo Salvar para Web e Dispositivos, você vê a tabela de cores para a imagem no lado direito da caixa de diálogo. A tabela de cores é importante porque não só permite ver as cores usadas na imagem, mas também permite que você personalize a tabela de cores usando as opções na parte inferior.
Você pode querer personalizar sua tabela de cores selecionando algumas cores para serem seguras e bloqueando as cores para que elas não sejam colididas, pois você reduz o número que é usado.
Para personalizar uma tabela de cores, siga estas etapas:
-
Se sua imagem tiver apenas algumas cores que você deseja converter em cores seguras para a Web, escolha a ferramenta Eyedropper à esquerda da caixa de diálogo Salvar para Web e Dispositivos caixa e clique na cor na vista otimizada.
A cor amostrada é destacada na tabela de cores.
-
Clique no botão Safe da Web na parte inferior da tabela de cores.
Quando você atravessa esse botão, aparece a dica de ferramenta Deslocando / Deslocamento de cores selecionadas para o painel da Web.
Aparece um diamante, indicando que a cor agora é segura na web.
-
Bloqueie as cores que você não deseja excluir, pois você reduz o número de cores na tabela de cores.
Selecione uma cor com a ferramenta Eyedropper, ou escolha-a na tabela de cores e clique no botão Bloquear cor. Um quadrado branco aparece no canto inferior direito, indicando que a cor está bloqueada.
Se você bloquear 32 cores e depois reduzir a tabela de cores para 24, algumas de suas cores bloqueadas serão excluídas. Se você optar por adicionar cores, essas cores bloqueadas são as primeiras a retornar.
Personalizar cores usando a tabela de cores na janela Salvar para Web e Dispositivos.
Como é criada a tabela de cores? Com base no método de algoritmo de redução de cor que você escolhe, o recurso Salvar para Web e Dispositivos mostra o número de cores que você indica. Se a manutenção de cores na web segura for importante, selecione a opção Restrictiva (Web) para o método; se quiser que sua imagem fique melhor na maioria dos monitores, mas não necessariamente para ser segura na web, escolha a opção Adaptável.
-
Use o menu suspenso Cores ou insira um número para adicionar ou excluir cores da tabela de cores.
-
Se sua imagem usar a transparência, selecione a caixa de seleção Transparência perto da parte superior da caixa de diálogo Salvar para Web e Dispositivos.
Lembre-se de que a transparência é contada como uma das suas cores na tabela de cores.
-
Selecione a caixa de seleção Interlaced somente se sua imagem GIF for grande (25K ou maior).
Selecionar esta opção faz com que a imagem seja criada em várias varreduras na página da Web - uma imagem de baixa resolução que aparece rapidamente e é atualizada com a imagem de resolução mais alta quando o download for concluído. Interlacing dá a ilusão do download ir mais rápido, mas torna o tamanho do arquivo maior, então use-o somente se necessário.
-
Clique em Salvar.
Agora, a imagem está pronta para ser anexada a uma mensagem de e-mail ou usada em uma página da web.