Como otimizar imagens para web [softwares, sites e plugins]

Mais rápido que o Flash. Otimize imagens para web e conquiste qualidade, velocidade de carregamento e melhor posição no Google

Tatiana Vieira
• Atualizado há 1 ano e 7 meses

Uma das principais causas de lentidão em sites e aplicativos é o uso inadequado de imagens. Aprenda como otimizar imagens para web, torne-as poderosas aliadas às ferramentas de busca e contribua para uma maior taxa de permanência.

Entender o básico sobre compressão, qualidade da imagem e vantagens no uso de cada tipo de imagem nos possibilita fazer escolhas melhores. Isso pode significar imagens em melhor qualidade e com maior velocidade de carregamento.

Como otimizar imagens para web

O que é otimizar uma imagem?

Uma imagem otimizada significa que ela possui alta performance, ou seja:

  • Alta qualidade de formato de arquivo;
  • Tamanho do arquivo em dimensões ideais utiliza o menor valor seguro possível.

Por que otimizar imagens para web?

A partir de relatórios feitos em milhares de sites, identificaram que o tempo ideal de carregamento de um site é de, no máximo 3 segundos. Falta de paciência ou não, o que o estudo aponta é que mais da metade dos visitantes desistem, caso o intervalo seja superior a esse tempo. Além disso, imagens otimizadas:

  • Aprimoram a experiência do usuário;
  • Reduzem o abandono precoce do usuário;
  • Permitem que o visitante se aprofunde e visite mais páginas do site;
  • Melhoram o rankeamento, sua posição nos mecanismos de busca  – mais chances frente aos concorrentes, sem custos.

Erros comuns cometidos na hora de escolher o tipo de arquivo:

  • Tamanho inadequado – imagens grandes na altura e largura;
  • Formato inadequado – cada formato tem um melhor uso em determinada situação;
  • Imagens pesadas – excesso de KB;
  • Menor armazenamento e largura de banda – possível economia em hospedagem e CDN (Content Delivery Network – Rede de Distribuição de Conteúdo;
  • Backups mais rápidos do conteúdo do site.

Como otimizar imagens para web

Você pode fazer a otimização da imagem original, utilizando um software gráfico, site, utilitário do computador ou pluging.

Usando o Photoshop

  1. Abra a imagem no Photoshop;
  2. Menu “File” (Arquivo) > “Save for Web” (Salvar para Web);
  3. Na caixa de diálogo, escolha a opção JPEG e uma das opções de qualidade;
  4. Pode clicar em “Preview” para ver como a imagem ficou e clique em “Save” para confirmar.
Como otimizar imagens para web

Usando o GIMP

  1. Abra a imagem no GIMP;
  2. Menu Arquivo > Exportar como;
  3. Na caixa de diálogo, nomeie o arquivo e clique em “Exportar”.
Como otimizar imagens para web

Usando o Affinity Photo

  1. Abra a imagen no Affinity Photo;
  2. Menu “File” > “Export”;
  3. Na caixa de diálogo, escolha a opção JPEG;
  4. Reduza a qualidade da imagem para em torno dos 80%;
  5. Na parte inferior da caixa de exportação, clique em “More” (Mais) e selecione “Progressive” (Progressivo);
  6. Desmarque “Embed ICC Profile” (Incorporar Perfil ICC) e “Embed Metadata” (Incorporar Metadados);
  7. Clique em “Close” (Fechar).
Como otimizar imagens para web

Remover os metadados anexados à imagem faz com que o que não é necessário para a web seja eliminado, tornando a imagem mais leve.

Algumas sugestões de medidas:

  • Banner grandes: 1200px – 1400px;
  • Imagens que são metade da página da web e além do conteúdo: de 600px a 800px;
  • Imagens menores e thumbnails: de 250px a 450 px.

Usando o site  TinyPNG/TinyJPG

Ambos são aplicativos gratuitos que usam uma técnica inteligente de compactação com alguma perda ao reduzir o tamanho de arquivos PNG e JPG, respectivamente.

  1. Visite o site TinyPNG/TinyJPG;
  2. Faça upload ou simplesmente arraste e solte as imagens na caixa indicada;
  3. Terminada a compactação, faça download dos arquivos.

Eles também têm uma extensão para Photoshop que combina o melhor do TinyPNG e TinyJPG dentro do Photoshop.

Como otimizar imagens para web

Usando o site JPEG Mini

Usa uma tecnologia de compactação sem perdas, que reduz significativamente o tamanho das imagens, sem afetar a qualidade e com comparativo em tempo real da qualidade de sua imagem original e a imagem compactada.

Você pode usar a versão web gratuitamente ou comprar o programa para o seu computador. Eles também têm uma API paga para automatizar o processo para o seu servidor.

Como otimizar imagens para web

Usando o utilitário ImageOptim (iOS) ou o Trimage (Windows)

Para quem preferir usar utilitários, ambos permitem compactação sem perda de qualidade, buscando melhores parâmetros de compactação ao remover perfis de cores desnecessários.

Como otimizar imagens para web

Usando plugins de otimização de imagens para o WordPress

Se você possui um site com vários autores e precisa de uma solução automatizada, pode experimentar um plugin de compactação de imagens do WordPress. O uso de qualquer um desses o ajudará a acelerar seu site.

  1. Optimiole – plugin popular pela equipe por trás do ThemeIsle;Como otimizar imagens para web
  2. EWWW Image Optimizer – permite otimizar imagens automaticamente durante o download, de imagens mais antigas, com a vantagem de otimizar imagens geradas por outros plugins do WordPress e armazenadas fora da sua biblioteca de mídias.Como otimizar imagens para web
  3. Compress JPG & PNG images – plugin da equipe TinyPNG. Exige criar conta e tem limite de 100 fotos otimizadas por mês, na conta gratuita;Como otimizar imagens para web
  4. Imagify – plugin da WP Rocket. Comprime as imagens, baseando-se em algoritmos. Restaura as imagens da galeria automaticamente, quando desinstalado.Como otimizar imagens para web
  5. ShortPixel – otimiza as imagens assim que o plugin é ativado e armazena as imagens originais em uma pasta separada. A conta gratuita só permite 100 imagens por mês;Como otimizar imagens para web
  6. Smush – detecta imagens que são maiores do que o espaço em que ela está sendo usada. O plugin destaca a imagem no site para que ela seja otimizada para o tamanho exato e pode otimizar várias imagens simultaneamente;
    Como otimizar imagens para web
  7. reSmush.it – permite otimizar imagens automaticamente durante o download e oferece opção de otimização de imagens mais antigas. Se você não está procurando opções muito flexíveis de compactação de imagens, ele oferece o melhor desempenho, fazendo diferença real no tamanho do arquivo.Como otimizar imagens para web

Com informações: hobo e wpbeginner

Relacionados

Escrito por

Tatiana Vieira

Tatiana Vieira

Ex-redatora

Tatiana Vieira é formada em design gráfico e pós-graduada em artes visuais. Integrou a equipe de redatores do Tecnoblog entre 2020 e 2022, escrevendo sobre Apple, softwares de edição, redes sociais e fotografia. Também conhecida como Etérea, é professora de yoga, viaja o mundo em busca de mais conhecimento e se autodenomina uma "cientista natural".