O que é um otimizador de imagem? | Como reduzir tamanhos de imagens

Os otimizadores de imagens reduzem o tamanho dos arquivos de imagem para que as imagens sejam otimizadas para a internet e possam ser carregadas rapidamente.

Objetivos de aprendizado

Após ler este artigo, você será capaz de:

  • Definir "otimizador de imagens".
  • Compreender outras maneiras de acelerar imagens

Copiar o link do artigo

O que é um otimizador de imagens?

Um otimizador de imagem é um serviço, produto ou biblioteca que torna os arquivos de imagem menores. Normalmente, um otimizador de imagens reduzirá o tamanho do arquivo de uma imagem, compactando e redimensionando, de preferência sem comprometer muito a qualidade da imagem. Isso otimiza as imagens para a web porque elas levam menos tempo para serem carregadas no navegador do usuário, aumentando a velocidade do site e a performance.

Por que é necessário reduzir o tamanho da imagem?

Todas as imagens que aparecem em uma página web precisam ser baixadas pelo navegador do usuário antes de serem exibidas. Quanto maior for uma imagem (em termos de tamanho de arquivo, não dimensões), mais tempo levará para fazer o download e mais largura de banda ocupará. Se os usuários estiverem em um dispositivo móvel, as imagens grandes também usarão muitos dados durante o download.

Portanto, manter as imagens pequenas é essencial para a performance do site, e a performance do site é extremamente importante para a SEO e para manter os usuários engajados e ativos em um site. O Google prioriza sites que carregam rapidamente e os usuários são mais propensos a sair da página e menos propensos a serem convertidos se uma página web demorar muito para carregar.

Como o tamanho do arquivo de imagem é reduzido?

A primeira etapa para reduzir o tamanho da imagem é diminuir suas dimensões. Por exemplo, um site típico não precisará de imagens com mais de 3.000 pixels de largura. (Na verdade, a maioria dos monitores de desktop tem 1.920 pixels de largura ou menos.) Os ajustes nas dimensões de uma imagem devem reduzir o tamanho do arquivo sem reduzir a qualidade.

As imagens também podem ser compactadas. Os compactadores de imagem (como o recurso "Salvar para a web" do Photoshop) podem reduzir os arquivos JPEG para um nível de resolução muito inferior e as imagens parecerão essencialmente iguais. No entanto, as imagens ainda devem parecer profissionais, não pixeladas. Há um ponto crítico em que a resolução se torna tão baixa que os ganhos de performance associados não valem a pena. O teste é importante; as imagens devem ter uma aparência profissional em monitores grandes e também nas telas pequenas dos smartphones.

Existem outras maneiras de otimizar as imagens além de redimensioná-las ou compactá-las?

O formato de arquivo usado para uma imagem afeta o tamanho do arquivo. A maioria das imagens para a web estão no formato JPEG, não PNG ou GIF. Isso ocorre porque é mais fácil ajustar a qualidade (que afeta o tamanho do arquivo) com arquivos JPEG. Os arquivos JPEG têm perdas, o que significa que perdem informações visuais quando são compactados. Como resultado, a compactação pode reduzir os arquivos JPEG a uma fração de seus tamanhos originais, o que, geralmente não, é possível com arquivos GIF e PNG (ambos não tem perdas).

Como uma CDN acelera as imagens?

A CDN, ou rede de distribuição de conteúdo, é um grupo de servidores distribuídos em todo o mundo que armazenam e fornecem conteúdo, incluindo imagens, aos usuários finais. Os servidores da CDN são otimizados para velocidade e estão localizados mais próximos dos usuários finais do que servidores de origem, reduzindo a latência e acelerando os tempos de carregamento de imagens, vídeo e outros conteúdos entregues na internet. Saiba mais sobre a CDN da Cloudflare.

O que é SEO de imagens?

A otimização do mecanismo de pesquisa de imagens e a otimização de imagens são separadas, mas estão relacionadas. Reduzir o tamanho do arquivo de imagem ajuda a otimizar as imagens para pesquisa, reduzindo os tempos de carregamento e o Google incentiva os desenvolvedores a compactar as imagens quando possível.

Entretanto, para que uma imagem seja realmente otimizada para a pesquisa, os desenvolvedores devem:

  1. Dar ao arquivo de imagem um nome relevante e legível e incluir uma palavra-chave relevante, se possível
  2. Incluir uma tag alt da imagem breve e descritiva que seja útil para os visitantes do site que usam leitores de tela e que contenha uma ou mais palavras-chave
  3. Tornar as imagens responsivas e compatíveis com dispositivos móveis
  4. Imagens de legenda, fazer isso melhora a experiência do usuário e os mantém engajados
  5. Incluir Open Graph e imagens de cartão do Twitter para compartilhamento social