Imagine que um visitante do seu site acabou de ver uma nova promoção. Ele ficou tão interessado que decidiu conferir a oferta. Mas aí, infelizmente, ele não consegue carregar a página do carrinho e finalizar a compra. O que acabou de acontecer?
Diversos fatores podem causar problema no carregamento da página. Para começar, por exemplo, seu site talvez não tenha espaço de armazenamento online. O cache de memória talvez não tenha o tamanho necessário.
Mas, de todos os erros que você pode cometer ao criar um site, não otimizar as imagens para as páginas da web pode ser um dos mais problemáticos. Não otimizar corretamente as imagens para a web pode deixar o site mais lento e, consequentemente, resultar em menos tráfego e oportunidades de vendas. A seguir, mostramos como otimizar as imagens para a web e, assim, criar um site que traga resultados.
O que é otimização de imagem?
Cerca de 70% das pessoas relatam que a velocidade no carregamento das páginas da web afeta a vontade de fechar a compra online. Além disso, cerca de 45% dessas pessoas não compram no site se a página carregar mais devagar do que elas esperam.
Essas estatísticas ressaltam a importância da otimização das imagens na web. Se você não tomou medidas para que suas páginas carreguem rápido o suficiente, é por sorte que algum comprador já tenha chegado até a página de finalização da compra. Frequentemente, isso começa quando ele chega pela primeira vez à página inicial do site. Para evitar isso, faça a otimização das imagens do site.
Um dos motivos para o carregamento lento do site é a falta de otimização adequada das imagens. Os arquivos são tão grandes que sobrecarregam o restante do site e consomem todo o espaço de armazenamento.
A otimização das imagens, por outro lado, ajusta a resolução das imagens na página, além de reduzir o tamanho dos arquivos, de modo que o servidor do site tenha mais espaço disponível. Ao liberar espaço no servidor, você reduz o tempo de carregamento das páginas do site, ficando mais fácil e agradável de navegar.
Por que é importante otimizar imagens para a web?
As imagens otimizadas nas páginas da web deixa os usuários satisfeitos, e mantém os servidores do domínio funcionando como deveriam.
Lembre-se de que cerca de metade dos visitantes usam o celular para buscar informações online e visitar os sites. Assim, a otimização de imagens ajuda muito a otimizar a velocidade das páginas na versão móvel e a SEO móvel. Com a otimização das imagens na web, os visitantes podem ver seu conteúdo mesmo se a conexão Wi-Fi estiver lenta.
No fim das contas, otimizar as imagens para web ajuda você de várias formas. Abaixo, mostramos outras formas de como a otimização das imagens para a web melhora o seu site.
Faz as páginas carregarem mais rapidamente
Uma das principais razões para otimizar as imagens é para que elas carreguem mais rapidamente. Imagens não otimizadas podem deixar o site lento,difícil de navegar e chato de usar.
Dica: otimizar imagens significa envolve o tamanho da resolução, para que elas não ocupem muito espaço de armazenamento online do site. Você também pode compactar as imagens e manter a qualidade das originais; ou usar imagens e gráficos apenas quando necessário.
Otimize a experiência do usuário
Ao otimizar as imagens para a web, você também melhora a experiência dos usuários. Em outras palavras, você reduzi a frustração do cliente. Para que os visitantes não fiquem esperando até aquele espaço em branco mostrar texto e gráficos, é hora de mudar a resolução de cada imagem.
Os visitantes do site vão gostar da conveniência e do visual resultantes do carregamento mais rápido das páginas. Em vez de uma mensagem de erro no lugar das imagens, você verá os ícones e imagens que devem aparecer.
Turbina a SEO
Ao otimizar as imagens, você pode turbinar a SEO do site. Para melhorar a acessibilidade e otimizar a SEO, você também pode dar a cada imagem uma etiqueta alternativa. Em um criador de sites, é fácil fazer isso ao carregar as imagens para uma biblioteca de mídias.
A biblioteca de mídias, como as oferecidas pelo WordPress ou Mailchimp, traz caixas de texto onde você pode inserir etiquetas alternativas e palavras-chave. Elas são anexadas à imagem e aparecerão nos buscadores, desde que você tenha dado permissão para o site ser encontrado na web.
Minimiza o espaço de armazenamento no servidor
As imagens não otimizadas podem desacelerar os servidores do site. Se as mídias que você disponibiliza no site exceder o tamanho recomendado, a página pode demorar demais para carregar ou até não carregar.
Ao guardar menos arquivos de imagem no servidor, você mantém o site funcionando na velocidade que os seus visitantes esperam. Após você aprender a otimizar as imagens para web, fica fácil acelerar o carregamento da página.
Inscreva‑se para obter mais dicas de marketing diretamente na sua caixa de entrada.
Como otimizar imagens para a web
Não é preciso muito para aprender a otimizar imagens para a web. A seguir, explicamos como compactar as imagens para o seu site e abordamos o básico da otimização de imagens para a web.
Escolha um formato de arquivo
Você talvez encontre centenas de tipos de arquivo diferentes por aí. Os mais comuns são JPEG (ou .jpg), PNG e GIF. Mas, antes de seguir com a otimização das imagens para a web, vamos entender o propósito de cada formato de arquivo de imagem.
- JPEG – é um dos tipos de arquivo de imagem mais usados na web. Isso porque ele oferece uma qualidade decente e ocupa menos espaço do que um PNG. Alguns gráficos, no entanto, não mantêm o “brilho” se você reduzir o tamanho do arquivo de imagem JPEG (JPG).
- PNG – geralmente funciona melhor para reduzir o tamanho dos arquivos de imagem e manter a qualidade. Com ele, também é possível usar e compactar imagens com fundo transparente.
- GIF – não é particularmente o preferido para as imagens na web. Ele é mais usado para criar imagens animadas e vídeos de gráficos. Esse tipo de arquivo é melhor para tutoriais de demonstração. Hoje em dia, o GIF pode parecer obsoleto, pois é possível hospedar arquivos compactados MP4, MOV e WMV que produzem animações de melhor qualidade. Por outro lado, o GIF usa menos espaço e recursos do servidor web e não deixa a página lenta para carregar.
- SVG — passou a ser mais usado após a necessidade de fazer os gráficos se ajustarem a telas de diferentes tamanhos. O arquivo SVG se ajusta em todos os aparelhos, incluindo computadores, celulares e tablets, sem perder qualidade. Por outro lado, ele não aparece corretamente em todos os navegadores.
Em relação ao tipo de arquivo, todos eles se compactam de jeitos diferentes. Os arquivos JPEG, por exemplo, passam por uma compressão com perdas; assim, você precisa de uma imagem quase perfeita para ter a mesma qualidade.
A compressão sem perdas, por outro lado, não diminui a qualidade do arquivo quando o tamanho é reduzido. Isso geralmente acontece no caso das imagens PNG. Os tipos de compressão "com perda" e "sem perda" são alguns a considerar ao usar plugins para ajuste automático do tamanho. O tipo de arquivo influencia, mas o design do plugin também tem peso no resultado final da compressão.
Adiciona texto alternativo (do jeito fácil)
O texto alternativo faz mais do que incluir palavras-chave para otimizar a imagem para SEO. Ele também deixa a página da web mais acessível ao adicionar uma descrição aos gráficos que aparecem.
O texto alternativo oferece um meio para que pessoas com deficiência visual compreendam as fotos e gráficos. Ele também é útil quando as imagens não aparecem corretamente em um tutorial, pois ainda fica possível entenda as instruções.
O jeito mais fácil de adicionar texto alternativo é preenchê-lo no campo fornecido ao fazer upload de uma imagem para a biblioteca de imagens. Na maioria das plataformas de hospedagem de blogs, também é possível fazer upload das imagens para o blog. Ao criar um artigo no blog, você provavelmente notará um campo para inserir o texto alternativo ao adicionar as imagens.
Adiciona texto alternativo (do jeito difícil)
Se o blog ou criador de sites não tiver a opção de inserir rapidamente o texto alternativo e a descrição da imagem, você terá que usar HTML. Isso acontece tanto no blog quanto na caixa de texto da página, ou em um arquivo que você enviaria de um arquivo do Bloco de Notas para o seu servidor.
O uso do HTML é um pouco mais avançado do que apenas o editor visual do blog ou da página de site. Ele exige um código para você copiar e colar (ou escrever do zero) no modo “texto” em vez de “visual” ou “fonte”. Se você não tem ideia do que isso significa, confira este exemplo de como o código HTML se parece ao adicionar o texto alternativo a uma imagem.
Não se preocupe com isso se você está começando o site. É possível criar o texto alternativo sem precisar saber HTML — basta seguir o método mais fácil acima. Caso contrário, você pode pelo menos aprender o código HTML exigido para formatar a imagem depois de carregá-la no blog.
O "jeito difícil" de aprender o código da etiqueta alternativa do HTML geralmente é para quem quer aprender a criar um site do zero. Nesse caso, ele aprenderia a inserir em um arquivo de bloco de notas e fazer upload para o site via cliente FTP ou ao criar um site no editor de código.
Você provavelmente não precisará fazer isso se estiver começando a criar o site. No entanto, agora você sabe que essa é uma opção ao otimizar as imagens para a web.
Otimizar dimensões do arquivo
É mais fácil otimizar o tamanho dos arquivos se você ainda não os tiver carregado para a web. Nesse caso, você pode salvar as imagens no seu programa de edição de fotos no tamanho que precisar. Para os cabeçalhos, é aproximadamente 1.024 pixels de largura por 786 pixels de altura.
As imagens de fundo precisam ter cerca de 1.920 x 1.080 pixels. As imagens do logotipo variam de cerca de 100 a 400 pixels de largura e geralmente têm entre 50 e 100 pixels de altura. Lembre-se: principalmente nas imagens de fundo, o tamanho da imagem depende do tamanho do arquivo de imagem.
Comprimir as imagens
As imagens do site que podem afetar mais o tempo de carregamento incluem as imagens do cabeçalho e do fundo da página.
Nas imagens de cabeçalho e de fundo da página, o melhor é usar a compressão GIF ou JPEG. Reduza o máximo possível para dar ao site o visual profissional que você precisa.
Use ferramentas e plugins de otimização de imagens
Para não passar incontáveis horas otimizando manualmente as imagens para a web, adote uma ferramenta de otimização de imagens. Esses plugins geralmente já vêm na maioria das principais plataformas de blog e ajustam automaticamente o tamanho das imagens.
Os plugins e ferramentas de otimização de imagens também são uma maneira rápida de adicionar as etiquetas alternativas. Normalmente, basta selecionar as imagens da biblioteca de mídias para compactar. Depois, basta alguns cliques para reduzir o tamanho delas sem afetar a qualidade.
Ferramentas para otimização de imagens
Para otimizar as imagens uma a uma, você teria que conhecer código avançado. As ferramentas para otimização de imagens automatizam o processo e impedem que você precise apagar e reenviar dezenas ou até centenas de imagens ou arquivos gráficos.
Em vez de você fazer todo o trabalho de alterar os tipos e tamanhos dos arquivos de imagem, os plugins fazem isso. Algumas opções são LazyLoad, TinyPNG ou Shortpixel. No entanto, vai depender da plataforma de blog que você usa.
A quarta etapa que você vê acima se refere aos momentos em que um plugin de compressão de imagem não reconhece as imagens carregadas. Isso depende do plug-in que você usa, mas ele pode não detectar as imagens que você não alterou. No entanto, em alguns plugins de compressão de imagem, é possível modificar manualmente essas imagens.
Tipos de arquivo para otimização de imagens na web
Como já mencionamos, há vários tipos de arquivo para escolher ao otimizar as imagens para a web. Os mais comuns são JPG (JPEG), PNG, GIF e, em alguns casos, SVG.
Outro que você talvez encontre é o formato de imagem web (.webp), cada vez mais útil para universalizar as imagens nas telas de todos os aparelhos. Algumas versões do Chrome, Android, Microsoft Edge, Opera ou Firefox aceitam esse formato.
Otimização de imagens para aparelhos móveis
Muitas pessoas navegam pelo celular. Por isso, é crucial que esses usuários vejam corretamente as imagens. Os aparelhos móveis frequentemente enfrentam conexões mais lentas e planos de dados limitados. Por isso, cada byte do arquivo das suas imagens JPG e PNG é crucial.
Pense em alguém tentando acessar o seu site no metrô ou em uma lanchonete com Wi-Fi instável. Se as imagens não estiverem devidamente otimizadas para aparelhos móveis, com arquivos desnecessariamente grandes, os usuários provavelmente desistirão e irão para o site de um concorrente que carrega mais rapidamente.
A boa notícia é que há várias formas eficazes de otimizar as imagens para os usuários de aparelho móvel. Uma das melhores abordagens são as imagens responsivas, que se ajustam automaticamente com base no tamanho da tela e nas capacidades do aparelho do usuário.
Você também pode usar imagens adaptativas, que criam diferentes versões da imagem especificamente para os diferentes aparelhos e tamanhos de viewport. Diferente da imagens responsivas, que se ajustam de forma fluida, as imagens adaptativas trazem uma versão pré-pronta com a largura fixa de cada imagem com base nos pontos de interrupção específicos do aparelho. Quando alguém visita seu site, o servidor detecta o tipo de aparelho usado e entrega a versão pré-pronta adequada da imagem.
Já as imagens responsivas usam uma só imagem que se ajusta de forma flexível. As imagens adaptativas podem ter melhor desempenho, pois cada imagem é especificamente otimizada para o aparelho usar, embora isso exija várias versões de cada imagem.
A compressão sem perdas nas imagens PNG mantém a qualidade e reduz o tamanho do arquivo — importante principalmente para logotipos e gráficos com texto. Nas fotografias, a compressão JPG pode ser mais agressiva nos aparelhos móveis, pois as telas menores não mostram os detalhes com tanta clareza.
Aqui estão algumas dicas práticas para implementar a otimização de imagens em dispositivos móveis:
- Detecção do aparelho: preste atenção às dimensões da imagem e use as consultas de mídia CSS e JavaScript para detectar o tamanho da tela. Isso impede que os aparelhos móveis façam download de arquivos desnecessariamente grandes.
- Carregamento progressivo: implemente estratégias para os arquivos da imagem carregarem aos poucos. Isso dá aos usuários um retorno visual imediato enquanto esperam pela imagem completa.
- Escolhas de compressão: selecione o método de compressão correto para cada tipo de imagem. Use compressão sem perdas nos gráficos com texto ou bordas nítidas e compressão básica nas fotografias em qual a perda da qualidade não será perceptível na tela dos aparelhos móveis.
O impacto da otimização das imagens nos aparelhos móveis pode ser enorme. Quando bem otimizadas e com o tamanho apropriado do arquivo e das dimensões, elas reduzem bastante o tempo de carregamento das páginas móveis, mantendo a qualidade visual.
Técnicas avançadas de otimização de imagens
Mesmo após você dominar os fundamentos da otimização de imagens, algumas técnicas mais sofisticadas podem melhorar o desempenho do seu site.
Lazy loading é uma técnica inteligente que acelera drasticamente o carregamento das páginas. Em vez de carregar todas as imagens de uma vez quando alguém visita a página, ele carrega as imagens apenas quando estão prestes a aparecer na tela.
Imagine que o seu blog tenha um artigo com 20 imagens. Sem o lazy loading, o navegador do visitante precisa baixar todas as 20 imagens de imediato, mesmo que ele leia apenas o primeiro parágrafo e saia. É muito desperdício de largura de banda, além de deixar mais lento o carregamento inicial da página. Com o lazy loading, o navegador começa baixando apenas as primeiras imagens, o que deixa o carregamento da página muito mais rápido.
Além do lazy loading, você também pode usar o atributo srcset para usar as imagens com o tamanho apropriado ao aparelho. Em vez de uma abordagem universal, o srcset oferece várias versões da mesma imagem, para o navegador escolher a melhor opção. Assim, os usuários móveis não baixam imagens desnecessariamente grandes, e os usuários de desktop ainda têm visuais de qualidade.
Conclusão
Ao aprender a otimizar as imagens para páginas da web, lembre-se: é possível reduzir o tamanho sem perder tanto a qualidade.
É possível usar plugins para ajustar automaticamente o tamanho de todas as suas imagens. Os melhores resultados vêm quando você usa as ferramentas que sabem trabalhar com seus tipos de arquivo. Desde que você goste da imagem original, otimizá-la para a web não deve ser muito difícil.
Principais conclusões
- A otimização das imagens é crucial para o desempenho do site, pois impacta diretamente a velocidade de carregamento das páginas e a experiência dos usuários.
- A otimização eficaz das imagens envolve reduzir o tamanho dos arquivos sem perder a qualidade da imagem; usar técnicas como escolher o formato de arquivo adequado; comprimir as imagens; e adicionar texto alternativo para melhorar a SEO e a acessibilidade.
- Há várias ferramentas e técnicas para otimizar imagens, incluindo plugins de compressão automática, design de imagem responsivo e estratégias como lazy loading. Elas aceleram muito o carregamento do site e aumenta o envolvimento dos usuários em diferentes aparelhos.
Perguntas frequentes
Como compactar as imagens para o meu site?
Para comprimir as imagens para o seu site, você pode ajustar a imagem na resolução ideal antes de carregar para o site. Ou use um plugin automatizado para fazer isso. É melhor instalar o plugin no seu site ou blog antes de adicionar as novas imagens, para que elas sejam compactadas automaticamente. É possível reduzir manualmente o tamanho das imagens após carregá-las e antes de instalar um plugin de compressão. Isso pode ser necessário apenas se o plugin não detectar arquivos mais antigos.
Como otimizar um JPEG para a web?
Compactar imagens JPEG pode acelerar o carregamento das páginas e, em alguns casos, preservar a qualidade da imagem original durante o processo. Para ter os melhores resultados, no entanto, você precisa começar com uma imagem de qualidade desde o início.
Ao comprimir rapidamente um JPEG para a web, use ferramentas e plugins de otimização de imagens. Você pode usar o Estúdio de Conteúdo e o editor de fotos do Mailchimp para editar, ajustar o tamanho e otimizar vários tipos de imagem.
Qual é o tamanho ideal de imagem para um site?
O tamanho ideal da imagem varia dependendo do que você precisa. No caso do logotipo, por exemplo, é normalmente cerca de 100 pixels de largura e a largura da tela. O tamanho ideal da imagem do fundo do cabeçalho é de pelo menos 1.024 pixels, mas pode ter até 2.500 pixels de largura.
Lembre-se de que isso não considera a qualidade após a compactação. No entanto, os compressores automáticos chegam à melhor qualidade com o mínimo de esforço.