Como otimizar imagens para a Web: um guia passo a passo para melhorar o desempenho do site

Não há dúvida de que as imagens são um recurso inestimável para a rede mundial de computadores. Desde a visualização de dados até a divisão de parágrafos de texto e exibição do trabalho de seu portfólio, fotos e gráficos são uma parte importante da maioria dos designs de sites e ajudam os usuários a ter ótimas experiências online.

Ter ótimos recursos visuais, no entanto, pode prejudicar seu site. Com resoluções mais altas, vêm tamanhos de arquivo maiores, o que também significa tempos de carregamento mais lentos. AKA, as imagens costumam ser a causa do baixo desempenho do site. E lembre-se, o objetivo de adicionar imagens ao seu site é criar uma experiência melhor para seus usuários (ou talvez até aumentar as vendas e conversões!), o que é difícil de fazer com um site lento.

Então, como você equilibra o desempenho do site com o design visual?

Otimizando suas imagens.

Há muitas pequenas coisas que você pode fazer durante o processo de criação da imagem para otimizar o tamanho dos arquivos, especificamente com o seu site em mente.

Neste guia passo a passo para otimização de imagem, abordarei:

• O que é otimização de imagem?
• Por que a otimização de imagens é importante?
• 7 maneiras de otimizar imagens para a web

O que é otimização de imagem?

De um modo geral, a otimização de imagem é o ato de diminuir o tamanho do arquivo sem perder a qualidade. Você pode otimizar suas imagens na fase de criação (usando as opções corretas de “Exportar” no Photoshop) ou diretamente em seu site (usando carregamento lento para exibir mídia em seu site). O objetivo é reduzir a quantidade de dados que um usuário precisa baixar, para que ele possa obter o conteúdo que procura mais rapidamente, sem sacrificar a qualidade.

Por que a otimização de imagens é importante?

As pessoas têm curtos períodos de atenção quando se trata da web, e é por isso que é importante fazer seu site carregar em dois segundos ou menos. E um dos fatores mais comuns que desaceleram seu site são suas imagens. (Mesmo que seu site esteja sendo executado nos melhores servidores, como você obterá com um host gerenciado do WordPress, as imagens podem ser a queda do desempenho.)

Ao aproveitar as melhores práticas de otimização de imagem, você manterá o tamanho do arquivo pequeno e o tempo de carregamento rápido, criando uma experiência melhor para os visitantes do site.

Há outra razão pela qual a otimização da imagem é importante, no entanto, uma razão diretamente ligada aos resultados financeiros do seu negócio. Além de tornar seu site mais lento, as imagens ocupam espaço em disco no servidor que alimenta seu site. A maioria dos provedores de hospedagem impõe um limite de largura de banda por plano, o que significa que você não tem recursos ilimitados - e suas imagens ocuparão rapidamente esse espaço.

Embora não seja o fim do mundo, se você exceder esse limite, poderá ser cobrado uma taxa de excesso ou, pior ainda, ter seu site desativado.

Ao otimizar suas imagens, você poderá aproveitar ao máximo o armazenamento do seu site e evitar o limite de largura de banda.

Agora que você sabe o quão importante é a otimização de imagem, vamos falar sobre como fazer isso! Este guia passo a passo cobrirá tudo, desde dicas do Photoshop até práticas de desenvolvimento.

Como otimizar imagens para a Web

Este guia passo a passo cobrirá tudo o que você pode fazer para otimizar imagens, começando no Photoshop e terminando em seu site.

Siga estas etapas para otimizar suas imagens para um melhor desempenho do site:

1. Compare a velocidade atual do seu site.
2. Saiba como escolher o melhor tipo de arquivo de imagem.
3. Redimensione suas imagens antes de exportar.
4. Comprima imagens para reduzir o tamanho do arquivo.
5. Automatize a otimização de imagens com um plug-in do WordPress.
6. Use a técnica de “desfoque” para carregar primeiro uma imagem de qualidade inferior.
7. Use o carregamento lento.

1. Compare a velocidade atual do seu site

Antes de fazer todo esse trabalho para otimizar suas imagens, comece fazendo um teste de velocidade em seu site! No final, você poderá ver o impacto que causou (além disso, poderá compartilhar isso com sua equipe ou chefe, para obter elogios extras). Algumas ferramentas populares de teste de velocidade são:

• Google PageSpeed ​​Insights
• Ferramentas Pingdom
• GTMetrixGenericName
• WebPageTest

Todas essas ferramentas baseadas em navegador funcionam de maneira bastante semelhante entre si: abra o link e insira sua URL para obter um relatório rápido sobre a velocidade e o desempenho do seu site.

2. Saiba como escolher o melhor tipo de arquivo de imagem

Quando terminar de criar imagens (seja salvando de sua câmera ou exportando de uma ferramenta como o Photoshop), você terá a opção de especificar o tipo de arquivo. Os tipos de arquivo mais comuns para uso na web são JPEGs, PNGs e GIFs. E, como tenho certeza de que você pode imaginar, todos eles têm seus próprios prós, contras e práticas recomendadas ao serem colocados em seu site.

JPEGs

As imagens JPEG funcionam melhor para exibir fotografias coloridas complexas em seu site, pois permitem uma imagem de maior qualidade com um tamanho de arquivo menor. Esse tipo de arquivo provavelmente funcionará para a maioria das imagens que você deseja usar em seu site, com uma grande exceção: imagens com fundo transparente. (Para esses, veja a próxima seção sobre PNGs!)

Ao usar uma imagem JPEG em seu site, considere exportá-la como “Progressiva”. Isso permite que o navegador carregue instantaneamente uma versão simples da imagem antes de carregar totalmente a resolução total no site.

Se estiver trabalhando no Photoshop, você encontrará essa configuração ao exportar como “Salvar para a Web”.

PNGs

Se você não tem muitas cores em sua imagem (como ilustrações planas ou ícones), ou deseja que ela tenha um fundo transparente, recomendo exportar como PNG. Certifique-se de ter as dimensões corretas da imagem e procure a opção de salvar como PNG-24 (ou 8, se não houver perda de qualidade).

Gifs

O terceiro formato de imagem mais comum para a web são os GIFs. Eles suportam apenas 256 cores, então você terá que ser seletivo com este tipo de arquivo!

Para otimizar GIFs para o seu site, pense criticamente sobre quanto tempo eles duram, se precisam repetir e quantos você realmente precisa em uma determinada página ou site.

3. Redimensione suas imagens antes de enviar

Uma das maneiras mais fáceis de otimizar imagens para a web é redimensioná-las antes de carregá-las em seu site. Especialmente se você estiver trabalhando com imagens brutas de uma câmera DSLR, as dimensões geralmente são muito maiores do que você realmente precisa.

Por exemplo, digamos que você esteja adicionando imagens a um artigo de blog em seu site. Se o seu tema WordPress exibe imagens em 500 x 500, mas você está carregando imagens com resolução de 1024 x 1024, todos esses pixels extras estão apenas aumentando o tamanho do arquivo e diminuindo a velocidade do site sem fornecer um benefício real.

Ao recortar ou redimensionar suas imagens antes do upload, você diminuirá o tamanho do arquivo, o que ajudará seu site a carregar um pouco mais rápido e economizará espaço em disco para ainda mais imagens.

Para redimensionar sua imagem, basta abrir o software de edição de imagens de sua escolha. O Photoshop funciona bem ou você também pode usar ferramentas mais simples, como Preview (para Macs), Paint (para Windows) ou Canva (uma ferramenta de navegador).

4. Comprima imagens para reduzir o tamanho do arquivo

Depois de ter sua imagem final, salva no formato certo e cortada em um tamanho apropriado, há mais uma etapa que você pode executar para otimizá-la antes de carregá-la em seu site: comprimi-la.

Esse processo ajudará você a diminuir o tamanho do arquivo sem perder a qualidade perceptível da imagem. Existem dois tipos principais de compactação: com perdas e sem perdas.

A compactação sem perdas manterá o mesmo nível de qualidade antes e depois da compactação. A compactação com perdas descartará alguns elementos da foto, mas normalmente de uma forma que o olho humano não notará. Para saber mais sobre esses tipos de compactação, recomendo este guia da Imagify.

Se você vir uma imagem específica no carregamento do seu site e aparecer lentamente, isso pode ser um sinal de que ela precisa ser compactada, redimensionada ou ambas.

Para compactar suas imagens, tudo o que você precisa é de uma ferramenta de compactação de imagem. Meus favoritos incluem:

• TinyPNG: Uma ferramenta gratuita baseada em navegador para compactar imagens PNG e JPEG.
• ImageOptim: Um aplicativo gratuito de código aberto para compactar imagens.
• JPEGmini: Um aplicativo de recompressão de fotos para Mac e Windows.
• RIOT: Um aplicativo gratuito do Windows para otimizar imagens.
• Image Optimizer: um complemento gratuito para Local.

TinyPNG

Essa ferramenta baseada em navegador otimiza imagens usando compactação com perda inteligente, reduzindo o tamanho do arquivo diminuindo o número de cores usadas. (Mas não se preocupe, você nem notará!) É gratuito e rápido de usar para PNGs e JPEGs.

ImageOptim

Este é um aplicativo gratuito para Mac que compacta imagens removendo o inchaço desnecessário, preservando o máximo de qualidade de imagem possível.

JPEG mini

JPEGmini é uma poderosa opção paga que ajuda a reduzir o tamanho do arquivo, mantendo a qualidade e o formato. Ele tem uma avaliação gratuita, então você pode fazer um teste antes de comprar.

REBELIÃO

A Radical Image Optimization Tool (RIOT) é um aplicativo gratuito do Windows para reduzir o tamanho do arquivo de imagem. Possui uma visualização lado a lado, para que você possa comparar a qualidade da imagem antes e depois da compactação.

Otimizador de imagens, um complemento gratuito para locais

Se estiver usando o Local como seu ambiente de desenvolvimento local, você pode usar o Complemento Image Optimizer para compactar automaticamente as imagens offline. Ele verifica seu site em busca de todos os arquivos de imagem, economizando o tempo de comprimi-los individualmente e acelerando o site no processo.

5. Automatize a otimização de imagem com um plug-in do WordPress

Neste ponto, você pode estar começando a pensar que a otimização de imagem é muito trabalhosa - e pode ser! Mas também há uma maneira fácil de simplificar algumas dessas etapas, instalando um plug-in de otimização de imagem em seu site WordPress.

Tenho algumas recomendações e cada uma delas tem recursos exclusivos. Mas, geralmente, um plug-in de otimização de imagem compactará e redimensionará suas imagens quando você fizer o upload para o seu site WordPress. Isso significa que você pode pular essas etapas em vez de executá-las manualmente, economizando muito tempo.

Esse método também é bom se você estiver construindo sites para clientes. É muita pressão para o usuário final e os criadores de conteúdo tentarem se lembrar de cada etapa do processo de otimização da imagem. Ao instalar um plug-in que fará a maior parte do trabalho para eles, você ajudará a garantir a velocidade e o desempenho do site que você construiu depois de entregá-lo.

Para otimizar imagens em um site WordPress, recomendo estes plugins:

• EWWW Image Optimizer Cloud
• TinyPNG
• Kracken.io
• imaginar

EWWW Image Optimizer Cloud

Este plug-in do WordPress otimizará automaticamente suas imagens quando você as carregar em seu site ou também pode otimizar imagens que você carregou no passado. Isso o torna incrivelmente benéfico se você estiver trabalhando com um site existente com imagens não otimizadas.

TinyPNG

Este plugin WordPress da equipe TinyPNG pode otimizar imagens JPEG e PNG no upload. Se você é fã da ferramenta baseada em navegador, simplifique o processo com o plug-in gratuito!

Kracken.io

O plug-in Kracken.io pode otimizar imagens novas e existentes em seu site WordPress. Ele também oferece suporte aos modos de compactação sem perdas e com perdas, oferecendo muito controle sobre o resultado final.

imaginar

Este plugin do WordPress ajudará a otimizar suas imagens sem perder a qualidade. Também é compatível com WooCommerce e NextGen Gallery, se você estiver usando esses plugins.

Observação: antes de escolher um plug-in, verifique como ele funciona. Alguns usam operações de taxação de servidor que podem causar problemas em seu site, enquanto outros usam opções de FTP para diminuir a carga em seu servidor web.

6. Use a técnica “Blur Up” para carregar uma imagem de qualidade inferior primeiro

Mesmo depois de todas as etapas de otimização anteriores, há casos em que você ainda pode estar trabalhando com arquivos grandes ou muitas imagens em uma página, diminuindo a velocidade do seu site. Nesses casos, às vezes é útil não apenas otimizar as imagens, mas também otimizar a experiência de carregamento para que os visitantes do site pensem que seus arquivos de mídia estão carregando mais rápido do que realmente estão.

É disso que tratam as próximas duas etapas — dar a aparência de imagens de carregamento mais rápido, para que os usuários não fiquem apenas olhando para uma página em branco enquanto seus arquivos são carregados.

Uma maneira de fazer isso é carregar primeiro uma imagem de qualidade inferior (LQI). Ao carregar uma versão menor da imagem antes de carregar o tamanho completo, dá ao usuário algo para olhar enquanto espera por todos os detalhes. Isso dá a percepção de um tempo de carregamento mais rápido mesmo que, tecnicamente, tudo esteja carregando na mesma taxa.

Uma maneira popular de fazer isso é a técnica de “blur up”, que você pode aprender como implementar com este tutorial sobre CSS-Tricks.

7. Carregue lentamente as imagens do seu site

Semelhante à técnica de “desfoque”, há mais um truque que ajudará você a dar a aparência de imagens de carregamento mais rápido: Lazy loading.

Quando alguém acessa seu site, eles começam no topo da página. Provavelmente, eles levarão um momento para rolar a página inteira, especialmente se estiverem engajados. Em vez de tentar carregar todas as imagens de uma vez, o carregamento lento age sob a suposição de que os usuários se preocupam mais com o conteúdo que podem ver. Portanto, as imagens na exibição do navegador são totalmente carregadas primeiro, enquanto as outras imagens carregam um espaço reservado primeiro, até que o usuário role para essa seção da página.

O carregamento lento é uma ótima técnica por si só e ainda mais poderosa quando combinada com o restante dessas dicas de otimização de imagem! E é muito fácil fazer isso em um site WordPress, graças ao plug-in Smush.

Isso conclui nosso guia passo a passo para melhorar o desempenho do site otimizando imagens! Para ver o impacto que isso causou em seu site, execute outro teste de velocidade. Como você fez?

Com as ferramentas certas de otimização de imagem, você poderá ver uma melhor velocidade e desempenho do site rapidamente!