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 ativo inestimável para a rede mundial de computadores. Desde a visualização de dados até a divisão de parágrafos de texto e a exibição do trabalho do 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, há tamanhos de arquivo maiores, o que também significa tempos de carregamento mais lentos. AKA, as imagens são muitas vezes a causa do mau 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?

Ao otimizar suas imagens.

Há muitas pequenas coisas que você pode fazer durante o processo de criação de imagens para otimizar os tamanhos 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 imagem é 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 (como usar as opções corretas de “Exportar” no Photoshop) ou diretamente em seu site (como usar carregamento lento para exibir mídia em seu site). O objetivo é reduzir a quantidade de dados que um usuário precisa baixar, para que possa obter o conteúdo que procura mais rapidamente.

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

As pessoas têm períodos curtos 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 retardam seu site são suas imagens. (Mesmo que seu site esteja sendo executado nos melhores servidores, como você obterá com um host WordPress gerenciado, as imagens podem ser a queda do desempenho.)

Há outra razão pela qual a otimização de imagem é importante, no entanto, uma que está diretamente ligada aos resultados de sua empresa. Além de deixar 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 cobrada uma taxa de excesso ou pior – ter seu site encerrado.

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

Agora que você sabe o quão importante é a otimização de imagens, 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 no seu site.

Siga estas etapas para otimizar suas imagens e obter 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 plugin do WordPress.
6. Use a técnica de “desfoque” para carregar primeiro uma imagem de qualidade inferior.
7. Use 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 no seu site! No final, você poderá ver o impacto que causou (além disso, você pode compartilhar isso com sua equipe ou chefe, para obter elogios extras).

Como parte da equipe de suporte do Flywheel, estou familiarizado com alguns testes de velocidade, mas estes cinco são os meus favoritos:

• Informações do Google PageSpeed
• Ferramentas Pingdom
• GTMetrix
• Teste de página da Web
• Complemento de Insights de Desempenho do Flywheel

As quatro primeiras, as 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.

O Performance Insights, um complemento para a plataforma de hospedagem do Flywheel, vai além do básico para fornecer recomendações acionáveis ​​para o seu site, incluindo insights que somente seu host pode fornecer.

Além disso, você poderá acompanhar as métricas ao longo do tempo no painel, facilitando a visualização do impacto de suas alterações ao fazer coisas como otimizar imagens. Saiba mais aqui.

Essas ferramentas recomendarão várias etapas que você pode seguir para melhorar a velocidade e o desempenho do site, mas para os propósitos deste tutorial, concentre-se na pontuação por enquanto. Isso oferece uma ótima referência para que você saiba por onde está começando.

2. Saiba 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 que você pode adivinhar, todos eles têm seus próprios prós, contras e práticas recomendadas ao serem colocados em seu site.

JPEG

As imagens JPEG funcionam melhor para exibir fotografias coloridas complexas em seu site, pois permitem uma imagem de alta 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 isso, veja a próxima seção sobre PNGs!)

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

Aqui está uma ideia de como uma imagem não progressiva seria carregada:

Veja como uma imagem progressiva seria carregada:

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

PNG

Se você não tem muita cor em sua imagem (como ilustrações planas ou ícones), ou quer que ela seja transparente, eu recomendo exportar como PNG. Certifique-se de ter as dimensões de imagem corretas 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 esse tipo de arquivo!

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

3. Redimensione suas imagens antes de fazer o upload

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 raw 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 uma 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 cortar suas imagens antes de enviar, 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 imagem 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 seguir para otimizá-la antes de enviá-la para o seu site: compactá-la.

Esse processo ajudará você a diminuir o tamanho do arquivo sem perder a qualidade da imagem perceptível. Existem dois tipos principais de compressã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 maneira 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 seu site carregar e aparecer lentamente, isso pode ser um sinal de que ela precisa de compactação, redimensionamento ou ambos.

Para compactar suas imagens, tudo o que você precisa é de uma ferramenta de compactação de imagens. 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 o Local.

TinyPNG

Essa ferramenta baseada em navegador otimiza imagens usando compactação inteligente com perdas, reduzindo o tamanho do arquivo ao diminuir o número de cores usadas. (Mas não se preocupe, você nem vai notar!) É grátis 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.

JPEGmini

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, para que você possa testá-lo antes de comprar.

TUMULTO

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.

Image Optimizer, um complemento gratuito para o Local

Se você estiver usando o Local como seu ambiente de desenvolvimento local, poderá 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 seu site no processo.

5. Automatize a otimização de imagens com um plugin do WordPress

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

Eu tenho algumas recomendações, e cada uma delas tem características únicas. Mas geralmente, um plug-in de otimização de imagem compacta e redimensiona suas imagens quando você faz o upload para o seu site WordPress. Isso significa que você pode pular essas etapas em vez de fazê-las manualmente, uma grande economia de tempo.

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

• Nuvem do Otimizador de Imagem EWWW
• Comprimir imagens JPEG e PNG
• Kracken.io
• Imagify

Nuvem do Otimizador de Imagem EWWW

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

Comprimir imagens JPEG e PNG

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 plugin gratuito!

Kracken.io

O plugin Kracken.io pode otimizar imagens novas e existentes em seu site WordPress. Ele também suporta os modos de compactação sem perdas e com perdas, oferecendo muito controle sobre o resultado final.

Imagify

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

Nota: Antes de escolher um plugin, certifique-se de observar como eles funcionam. Alguns usam operações de taxação do servidor que podem causar problemas em seu site, enquanto outros usam opções de FTP para controlar a carga em seu servidor web.

6. Use a técnica de "desfoque" para carregar primeiro uma imagem de qualidade inferior

Mesmo depois de todas as etapas de otimização anteriores, há casos em que você ainda pode estar trabalhando com tamanhos de arquivo 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 sã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 “blur up”, que você pode aprender a implementar com este tutorial sobre CSS-Tricks.

7. Carregar lentamente as imagens do seu site

Semelhante à técnica de “blur up”, há mais um truque que o ajudará a dar a aparência de imagens de carregamento mais rápido: carregamento lento.

Quando alguém chega ao seu site, eles começam no topo da página. Provavelmente levará um momento para rolar a página inteira, especialmente se eles estiverem engajados. Em vez de tentar carregar todas as imagens de uma vez, o carregamento lento atua sob a suposição de que os usuários se preocupam mais com o conteúdo que podem ver. Portanto, as imagens na visualizaçã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 de fazer em um site WordPress, graças ao plugin BJ Lazy Load.

Isso conclui meu 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?

Entre um fluxo de trabalho otimizado e as ferramentas certas de otimização de imagem, você poderá ver um melhor desempenho do site a partir de imagens otimizadas em pouco tempo!

Vá além das imagens: saiba como melhorar a velocidade do site para um desempenho extremamente rápido

A plataforma de hospedagem WordPress gerenciada do Flywheel é otimizada para tornar os sites WordPress rápidos, mas seu servidor é apenas uma peça do quebra-cabeça. Com nosso complemento Performance Insights, você terá uma visão detalhada do desempenho do seu site (para saber exatamente onde fazer melhorias!), enquanto pode acompanhar as métricas ao longo do tempo para ver quando, se e como as coisas mudam.

SABER MAIS

Este guia foi escrito por Tyler Stokes, um engenheiro de felicidade da Flywheel. Ajudamos os criativos a otimizar seus sites todos os dias para um desempenho extremamente rápido.

Clique aqui para saber mais sobre a plataforma de hospedagem WordPress gerenciada do Flywheel !