Como otimizar imagens para SEO

A otimização de um site consiste em muitos aspectos. As imagens são apenas um aspecto, mas é importante. As imagens afetam o conteúdo e o tempo de carregamento da página. Essas são duas coisas que os mecanismos de pesquisa consideram especialmente importantes.

Neste artigo, examinamos a otimização:

  • Nomes de imagens
  • Atributos de imagem em HTML
  • Tamanho da imagem
  • Tamanho do arquivo de imagem
  • Formatos de arquivo de imagem

 

Resumindo, é assim que otimizamos imagens para SEO:

O nome da imagem deve descrever seu conteúdo. Use atributos de imagem para fornecer mais informações sobre o conteúdo da imagem. O tamanho da imagem deve corresponder ao tamanho em que é apresentada na página da web. E reduza o tamanho do arquivo da imagem tanto quanto possível. Aplicar todos esses fatores a todas as imagens relacionadas ao conteúdo beneficiará a otimização geral do site.

All optimizable aspects of images

Um mecanismo de busca como o Google analisa diferentes aspectos de uma imagem. Primeiro tenta entender o que está na imagem. Em seguida, também se concentra na experiência do usuário, principalmente, observando o tamanho do arquivo.
Sempre tenha em mente que toda a página precisa ser otimizada. O poder do SEO reside na otimização de todos os aspectos. Portanto, a otimização de imagens precisa ser feita dentro do assunto da página.

Otimizando Nomes de Imagens

O nome da imagem é o nome do arquivo. Para começar com um exemplo simples. Quando uma imagem mostra 2 cães, ambos Labradores, sentados em frente à sua casa, o nome da imagem não deve ser: MD837462712.jpg ou algo parecido.

Podemos renomear uma imagem como essa para: 2-labradores-caes-sentadas-em-frente-de-uma-casa.jpg

O nome da imagem deve ser uma breve descrição de seu conteúdo. A ênfase aqui está em “curto”. Algumas palavras, não frases longas. Não use espaços ou caracteres especiais. Você pode usar letras maiúsculas, mas não acredito que tenha valor para SEO.

Otimizando atributos de imagem em HTML

O código básico para uma imagem em HTML é

<img src = ”/ nome-imagem.jpg”>

Vários atributos podem ser adicionados para ajustar o tamanho da imagem, mas deixamos de fora neste exemplo. Podemos fornecer informações adicionais sobre a imagem usando o atributo alt e / ou title:

<img src = ”/ nome-da-imagem.jpg” alt = ”descrição da imagem”>

<img src = ”/ nome-da-imagem.jpg” title = ”descrição da imagem”>

Você pode escolher usar ambos ou apenas um. O atributo title exibe o texto ao mover o mouse sobre a imagem. Se isso é ou não é desejável, cabe a você decidir.

Otimizando o tamanho da imagem

Você sabe como é às vezes. Você abre um site e as imagens demoram muito para aparecer. Isso pode ser especialmente irritante em telefones celulares. Isso acontece porque as imagens são muito grandes.

Existem 2 maneiras de reduzir o tamanho da imagem. A maneira mais simples é criar cópias da imagem com o tamanho correto.

A câmera (do telefone) tira fotos em alta resolução. Por exemplo, 2048 pixels por 1364 pixels. Isso geralmente é maior do que os pixels da tela do seu computador/laptop/fone. Portanto, o navegador deve reduzir o tamanho da imagem para caber no espaço que ela deve ocupar. Em geral, uma imagem em um site é apresentada na faixa de 800 x 600 pixels. Ou ainda menor quando é uma lista de produtos, por exemplo. Essas imagens estão na faixa de 200 x 150 pixels.

Assim, otimizamos as imagens criando cópias que correspondem aos pixels apresentados no site. E sim, no caso de produtos, isso significa criar pequenas imagens para listas e versões maiores para páginas de produtos.
Isso também resulta em tamanhos de arquivo de imagem muito menores:

Otimizando o tamanho do arquivo de imagem

Além de reduzir a resolução de uma imagem, ainda podemos reduzir o tamanho do arquivo usando compactação. Embora isso reduza a qualidade da imagem, ainda é possível compactar uma imagem sem redução visível na qualidade da imagem (para olhos humanos).

A maioria dos softwares de designer permite que você escolha o tamanho e a compactação da imagem a serem usados ​​para salvar uma imagem. Os designers gostam de usar altas resoluções e nenhuma compressão porque isso facilita seu trabalho. E isso é bom. Mas assim que o trabalho estiver concluído, peça que forneçam as imagens na resolução e compactação de que você precisa. (ou faça você mesmo o redimensionamento e a compactação, pois isso geralmente é mais rápido e oferece a liberdade de ajustar as imagens novamente quando necessário).

Otimizando formatos de arquivo de imagem

.PNG (e outros formatos) é ideal no que diz respeito à qualidade de imagem. Ele também mantém camadas. Mas é um formato de arquivo que cria tamanhos de arquivo grandes. Formatos de imagem como JPEG 2000, JPEG XR e WebP geralmente são uma melhor compactação do PNG ou JPEG, o que significa downloads mais rápidos e menor consumo de dados. A menos que você tenha um motivo específico para usar outros formatos, use os formatos sugeridos.

Como descobrir o quanto uma imagem pode ser otimizada

O Google tem um excelente analisador de velocidade de página que pode ser encontrado aqui:

https://developers.google.com/speed/pagespeed/insights/?hl=pt-br

Você simplesmente deixa que ele analise uma de suas páginas. Leva um ou dois minutos e fornece muitas informações sobre sua página, inclusive sobre suas imagens. O que mais gosto nessa ferramenta é que ela diz a você o que fazer para reduzir o tamanho das imagens. É uma ferramenta valiosa que recomendo usar quando você leva a sério a otimização das imagens do seu site.

Como reduzir o tamanho e a resolução do arquivo de imagem

Existem várias maneiras de reduzir a resolução da imagem e o tamanho do arquivo. A maneira mais simples é usar o PAINT. Você abre a imagem no PAINT e usa o botão de redimensionamento no canto superior esquerdo. O PAINT também compacta imagens automaticamente. Às vezes, você pode reduzir uma imagem .JPG simplesmente abrindo-a no PAINT e salvando-a.

Mas o PAINT é limitada quanto ao que pode fazer, então o uso de um software de design específico lhe dará mais opções. Se você não é um designer e não possui um software de design (pode ser caro), sugiro usar o GIMP, um software de design de código aberto que é gratuito. Como não sou designer, não possuo software de designer caro. Então, eu uso o GIMP para esses tipos de tarefas.

É gratuito e fácil de usar. Este é o link:

https://www.gimpbrasil.org/downloads

 

Ao aplicar todas essas técnicas para otimizar imagens, você está melhorando o nível geral de otimização do seu site. Pode ser um pouco demorado, mas vale a pena investir neste tempo.

Como muitas pessoas usam o WordPress, considere fazer o download de plug-ins de otimização de imagem. Um que eu gosto muito é o Smush It. Ele reduz o tamanho da imagem automaticamente e ajuda a escolher o tamanho correto da imagem ao inserir uma.

Mesmo que esses tipos de plug-ins sejam úteis para reduzir a quantidade de tempo que você gasta na otimização do seu site, não conte cegamente com eles. O melhor SEO vem de você verificar tudo sozinho para ter certeza de que atingiu o nível máximo de otimização possível.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *