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.

capa-como-editar-foto-imagem-internet
Tempo médio de leitura: 5 minutos

    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 imagens.

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 e o formato
  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

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 tributos: exposição, brilho, contraste e saturação. Alguns outros atributos auxiliam em uma correção mais fina, como realces, sombras, estrutura e nitidez. Geralmente você os ajusta livremente até encontrar o melhor resultado. Somente com a prática você vai saber definir exatamente cada atributo. Mas atenção, 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 mobile, 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. A etapa mais básica de edição em mobile consiste em aumentar o brilho na região do rosto para destaca-lo.

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 porém é 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.

    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 comprimir ainda mais depois, 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

    O nome do arquivo deve conter as palavras-chaves separadas por hifens. 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.

Instagram

    Algumas dicas específicas de edição e publicação para essa rede social focada em fotografias:

  1. Perfil: Manter seu feed homogêneo e organizado, seguindo um padrão de cores e filtros causa uma boa impressão
  2. Formatos: O formato quadrado e retrato ocupam mais espaço na tela, com mais destaque aumentam o engajamento
  3. Hashtags: O uso correto de hashtags organizadas de acordo com a popularidade aumenta o alcance, e elas podem ser usadas nos comentários agora. A média segundo algumas pesquisas é de cerca de 11 hashtags por foto. Configurar atalhos para essas hashtags no celular também é muito prático.
  4. Engajamento: Manter o engajamento rápido possível, até 1 hora depois que publicar. Responda rapidamente os comentários e interaja com hashtags como likes4likes assim que publicar. No mais mantenha o foco nas hashtags do seu nicho.

    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