Otimizar imagens para site

Se você chegou neste texto provavelmente se deparou com uma lentidão incômoda em seu site ou precisa aumentar os resultados orgânicos com o SEO. Aqui ensinaremos tudo o que você precisa saber para otimizar imagens para site.

O que você irá aprender:

1. Dimensão adequada para banners e outras imagens
2. Melhor formato de imagem
3. Forma mais fácil de comprimir imagens
4. O que é o cache e como utilizá-lo ao seu favor
5. Como aparecer nas pesquisas do Google com aplicação de SEO em imagens
6. Resumo

1) Dimensão

Antes de mais nada você precisa saber que a tela de um computador tem por padrão 1920px de largura. Isso quer dizer que apenas imagens que ocupam a tela toda como banners, por exemplo, precisam desta largura.

Percebeu o motivo de uma imagem precisar ter mais largura do que a outra?

O que acontece quando a imagem é menor do que o espaço da tela em que você irá inseri-la é a perda parcial ou total da qualidade, podendo ficar com aspecto granulado.

Por outro lado, imagens muito maiores do que o necessário só servem para deixar o site lento. Ninguém quer isso, não é mesmo?

A altura também irá depender do quanto você quer que a imagem ocupe da tela, ou seja, quanto o usuário precisará rolar para visualizá-la.

Por isso, anote nosso guia de tamanhos e seja feliz.

Dimensão de imagem para banner

1920 de largura x altura desejada.

500 de altura costuma ocupar em média metade da tela.

Por isso, caso queira um banner pequeno pode-se utilizar 1920×500, aumentando ou diminuindo a altura conforme desejar.

Dimensão de imagens para site

Para selecionar a largura e altura correta das imagens do site é preciso primeiro entender qual a proporção da imagem na tela. Para entender a proporção é necessário conhecer a estrutura de um site responsivo.

Abaixo é possível verificar como funciona uma ferramenta chamada bootstrap, muito utilizada para que sites se adaptem automaticamente a todos os tamanhos de tela.

Mas o que isso tem a ver com o tamanho das imagens? Tudo!

Se uma tela consegue ser dividida em 12 quer dizer que quanto menor a divisão maior a necessidade de largura.

Caso a imagem escolhida utilize em média 1/3 da tela contando com os espaços será necessário uma largura equivalente.

Exemplo: 640px de largura x a altura que desejar.

Se a intenção é apresentar imagens quadradas basta utilizar a mesma proporção entre altura e largura: 640×640

 No exemplo abaixo é possível utilizar 640×800

Já neste outro 300×300 já é suficiente

Dicas:

• Evite utilizar altura em que o usuário precise rolar a página para uma visualização completa. Isso proporciona uma visão desfragmentada da imagem, além de pesar a navegação e desviar o foco do que importa: a comunicação.
• Não insira imagens com textos pois, além de não ser bom para o SEO, cada tela tem um tamanho. A chance da imagem ficar cortada e ilegível para alguns usuários é alta. Caso precise escrever na imagem faça sempre com uma margem de segurança.
• A menos que haja uma programação para manter uma estrutura fixa de banner, a altura irá mudar de acordo com os diferentes tamanhos de tela, por isso, assim como a responsividade e o mobile first seja flexível.

2) Melhor formato

O formato JPG apresenta uma boa relação qualidade x leveza, sendo o formato mais indicado para apoiar a otimização das imagens para um site.

O formato PNG é recomendado apenas quando a imagem precisa ter fundo transparente.

Imagens de última geração

O WebP é um formato criado exclusivamente para imagens utilizadas na web. Infelizmente ainda não são todos os navegadores com suporte para visualizar imagens neste formato, por isso, pelo menos por enquanto é necessário utilizar ferramentas que apresentam o formato da imagem de acordo com a capacidade do navegador.

Como transformar imagens em WebP:

1. Convertendo em sites como WebP
2. Utilizando plugins no WordPress que converte automaticamente e armazena as imagens no formato original para garantir a experiência do usuário em qualquer navegador. Assim se o navegador do usuário tem suporte o plugin apresenta a versão WebP, caso contrário, apresenta a versão original em JPG, por exemplo. Aqui na agência utilizamos o WebP Express

Para sites desenvolvidos em HTML5 peça para seu desenvolvedor!

3) Compressão de imagens

Saiba que além da dimensão existe o tamanho ou peso da imagem, característica super importante quando o assunto é otimização de imagens para site.

Para saber quais são as características das imagens que você quer utilizar basta passar o mouse sobre a imagem.

As imagens do seu site, com exceção dos banners, não devem ultrapassar 300kb e os banners não devem ser superiores a 500kb.

Diferença entre KB e MB:

Um megabyte equivale a 1024 kilobytes.

Isso significa que nossa imagem de exemplo tem um peso quase 60x maior do que o recomendado.

Como diminuir o peso de uma imagem:

1. Ao diminuir a dimensão da imagem o peso é automaticamente reduzido, mas na maioria das vezes isso não é suficiente.
2. Além de diminuir a dimensão será necessário comprimir a imagem. É como mágica, você consegue reduzir em até 20x o peso sem comprometer a qualidade de uma forma prática e rápida com o site TinyPNG.

4) Cache

Em resumo cache significa a fotografia de um site que pode ou não se manter na realidade.

Em termos técnicos cache são dados armazenados que permitem uma navegação futura mais rápida.

Isso quer dizer que ao acessar um site pela 2° vez provavelmente você estará visualizando os dados armazenados e não a experiência completa da primeira vez.

O cache é excelente para garantir leveza e velocidade já que o site não precisa ser processado em todo acesso.

A política de cache define as regras para determinar se uma solicitação pode ser atendida usando uma cópia ou não.

Na maioria dos casos para visualizar o site real e não a cópia armazenada basta limpar o cache do navegador ou acessar o site através da aba anônima (ctrl+shift+n).

Porém, algumas plataformas, como a VTEX, por exemplo, possuem um cache próprio, por isso, para algumas experiências de navegação o jeito é esperar a atualização natural.

É recomendada uma política de cache eficiente para todos os sites, blogs, portais e e-commerce, independente do tamanho e peso.

No WordPress existem plugins que facilitam o estabelecimento de uma política de cache eficiente como o WP Faster Cache, por exemplo.

Para sites desenvolvidos em HTML5 peça para seu desenvolvedor!

5) Otimização SEO em imagens

Sabe quando você faz uma pesquisa no Google e aparecem imagens como resultado?

Saiba que essa estratégia influencia não apenas na busca por imagens mas também no resultado geral do buscador.

Para otimizar suas imagens é necessário “marcá-las” com palavras-chave nos seguintes itens: título, descrição e texto alternativo.

No WordPress assim como na maioria dos painéis gerenciáveis isso é muito fácil de ser executado.

Para sites desenvolvidos em HTML5 peça para seu desenvolvedor!

Dicas:

• Selecione as melhores palavras-chave para sua empresa utilizando a ferramenta gratuita answer the public
• Cuidado para não ser penalizado utilizando Black Hat ao repetir a mesma palavra-chave diversas vezes ou utilizá-la fora de contexto. A palavra-chave precisa estar relacionada ao conteúdo da página e é necessário utilizar sinônimos de apoio para evitar a repetição robótica.
• Prefira palavras-chave de cauda longa, ou seja, específicas x abrangentes. Exemplo: site (abrangente) criação de sites em São Paulo (específica). Quanto mais específica menor a concorrência e maior a assertividade.

Otimizar imagens para site – resumo

Neste texto você aprendeu sobre dimensão, peso, formato, cache e SEO para imagens.

Relembre as principais dicas e comece a colocá-las em prática hoje mesmo.

• Banners: devem possuir uma largura exata de 1920, nem mais, nem menos. A altura dependerá do espaço que você quer que a imagem ocupe, mas no geral recomendamos 1920×800.
• Nenhuma outra imagem deve ser superior a 1000px. Recomendamos para imagens quadradas: 800×800, imagens altas 800×600 e imagens largas 600×800.
• PNG: apenas para imagens com fundo transparente.
• Melhor formato: 1° WebP e em segundo lugar JPG.
• Peso máximo: 300kb para imagens e 500kb para banners.
• Cache: pode ser inconveniente para visualizar atualizações mas é extremamente necessário para garantir leveza e velocidade para os usuários.
• Otimização SEO em imagens: palavras-chave nos títulos, descrições e textos alternativos.

Gostou? Então leia também Dicionário SEO completo para iniciantes