Como editar fotos e imagens para internet em 4 passos

 Você sabe editar e otimizar suas fotos corretamente para a web? A lentidão no carregamento da maioria dos sites poderia ser resolvida edito-as corretamente. Aprenda como manter a qualidade com o menor tamanho de arquivo e evitar a compressão nas diferentes plataformas.
miniatura como editar imagens para internet

 Hoje cada serviço na web tem seus próprios formatos e algoritmos de compressão, que são o suficiente para a maioria dos usuários. Porém profissionais e usuários mais avançados gostam de otimizar ao máximo seu conteúdo. A maioria das pessoas desiste quando algum site ou blog demora mais de 3 segundos para carregar, e isso pode fazer a diferença para ganhar mais acessos. Uma diferença de alguns poucos kilobytes em cada arquivo ajuda muito na velocidade de carregamento quando há muitas conexões simultâneas ou um extenso banco de dados.

Tutorial: Como editar fotos e imagens para internet

Os seguintes passos geralmente são uma rotina na otimização de fotos e imagens para web:

  1. Editar: faça a edição básica de exposição, brilho, contraste e saturação
  2. Estilizar: escolha as fontes, cores e filtros de acordo com o estilo
  3. Escala: enquadre a imagem usando os pontos de ouro e defina o tamanho correto
  4. SEO para imagens: salve o arquivo corretamente para web – 72 dpi. Em caso de sites e blogs escolha bem o nome do arquivo separando as palavras-chave com hifens e use o alt text na propriedade

Tempo médio de leitura: 5 minutos

Edição

 A etapa mais popular e praticamente o divisor de águas entre amadores e profissionais. A edição básica de qualquer fotografia corrige os seguintes atributos: exposiçãobrilhocontraste e saturação. Alguns outros atributos auxiliam em uma correção mais fina, como realcessombrasestrutura e nitidez. Geralmente você os ajusta livremente até encontrar o melhor resultado, somente com a prática você vai saber definir exatamente cada atributo. Atenção pois cada monitor pode exibir a imagem de um jeito diferente.

 Como a maior parte da internet hoje é acessada através dos celulares, o jeito mais prático de garantir uma boa exibição em dispositivos móveis acaba sendo editar também no celular. O Snapseed além de gratuito é um dos melhores editores para Android, sendo fácil de usar e com várias ferramentas de edição para usuários mais avançados, consegue ser melhor até mesmo que muitas alternativas pagas.
exemplo do histograma do lightroom
Esse é o histograma do Lightroom, para a foto ficar com a exposição correta o gráfico não pode tocar as extremidades nem da direita nem da esquerda. Alguns softwares mostram as partes da imagem que ficaram subexpostas (azul) ou superexpostas (vermelha), ou seja muito escuras ou muito claras

Estilo

 Também muito popular devido aos filtros do Instagram, muitas vezes é colocado como um processo dentro da própria edição. Estilizar a imagem é um ajuste um pouco mais fino e personalizado do que uma edição básica de brilho e contraste.

 No estilo você deve aplicar os famosos filtros, escolher se a imagem será preto e branco, ou irá saturar as cores um pouco mais. Também deve escolher corretamente a fonte caso sua imagem seja compostas por textos.

 É bom entender um pouco sobre a teoria das cores, o atributo calor por exemplo pode transmitir algumas sensações específicas: Uma imagem mais puxada para o azul por exemplo da uma sensação de frio enquanto que uma puxada para o vermelho ou laranja da uma sensação mais quente.
Exemplo Preto e Branco

Exemplo filtro frio

Exemplo filtro quente

Infográfico para consulta rápida da teoria das cores

Escala

 Servir as imagens do tamanho correto pode aumentar muito a velocidade do seu site ou blog, pois o navegador não precisa redimensiona-la além de diminuir o tamanho do arquivo.

 Caso esteja editando imagens para um site ou blog cada template trabalha com diferentes layouts, você terá que adaptar o tamanho de suas imagens de acordo. Mais importante que isso são os pontos por polegada (Dots per Inch), quanto mais pontos melhor a qualidade da imagem porém maior o tamanho do arquivo também, a melhor relação custo benefício para web fica entorno de 72 dpi.
Exemplo dpi
Quando for trabalhar com imagens em 72dpi é importante que seja apresentada no tamanho original, o mínimo zoom e já é possível ver a distorção na imagem. Imagens com 300dpi ou mais geralmente são usadas para impressão.

 Na escala também é a etapa que você pode estar ajustando o enquadramento e o formato, usando a regra dos pontos de ouro para melhor compor sua imagem.
Exemplo pontos de ouro
O objeto principal da imagem precisa estar próximo das interseções das linhas

 Quanto ao formato os aspectos mais populares são: 1:1 – quadrado, 4:5 – retrato e 16:9 – paisagem. Além disso cada rede social tem as próprias dimensões, e mudando periodicamente acaba sendo um transtorno manter um guia geral atualizado.

SEO para imagens

 Search Engine Optimization são técnicas para melhorar o conteúdo para os mecanismos de busca, como o Google.
 O nome do arquivo deve conter as palavras-chaves separadas por hífens. Os softwares de edição geralmente tem uma opção que otimiza as fotos para a internet, no Photoshop essa opção é "Salvar para Web". O formato mais popular é o Jpeg, mas se sua imagem tiver transparência ou for um logo PNG é mais aconselhável. Algumas vezes a opção "Salvar para Web" do Photoshop não funciona bem em logos, deixando uma borda branca e serrilhada nas imagens. Também existem sites que conseguem uma compressão ainda melhor como o TinyPNG.
 As fotos abaixo apresentam a mesma qualidade porém uma tem 719 kb e a outra 156 kb, você consegue dizer qual é qual?
foto sem compressão
foto com compressão
 Os bots de pesquisa não visualizam imagens, apenas texto e código. Então é fundamental trabalhar em cima dos alt text (textos alternativos) dentro da propriedade da imagem se estiver publicando em um site ou blog. O alt text irá aparece caso sua imagem não seja carregada, ou pode até mesmo auxiliar deficientes visuais.

 Essas são as etapas mais básicas para otimizar suas fotos e imagens para web, caso você tenha mais interesse no assunto pode consultar um guia do próprio Google.

Nenhum comentário:

Postar um comentário