Para muitos empresários e profissionais de marketing, os recursos visuais são essenciais para seus negócios. As imagens podem ter um impacto tremendo tanto sobre os usuários quanto sobre o desempenho de um site, e é por isso que dominar a otimização de imagens é essencial para o bem-estar do seu site.
O que exatamente é otimização de imagens e como você otimiza imagens para sites? Compartilharemos com você todas as etapas necessárias de que você precisa para cuidar para garantir que suas imagens carreguem sem problemas.
Neste resumo, vamos guiá-lo pelos seguintes tópicos:
Ao otimizar imagens, você reduz seu tamanho sem comprometer a qualidade da imagem. E quando você reduz o tamanho de seus arquivos, suas páginas carregam mais rápido. Isso é importante tanto para o seu SEO quanto para os visitantes. Quanto mais rápido for o carregamento completo do seu conteúdo, menor será a taxa de rejeição. Outra coisa a ter em conta quando se trata de imagens é o imperativo de uma boa resolução, o que significa imagens de alta qualidade. Aumentar a resolução de uma imagem usando ferramentas como o Photoshop é bastante fácil, então você tem que se desculpar por omitir isso. Mas, vamos voltar ao nosso tópico de hoje, que é a otimização de imagens para fins de velocidade.
Cerca de uma década atrás, o Google decidiu incluir a velocidade do site entre seus fatores de classificação relevantes. Um de seus webmasters, John Mueller, escreveu em 2016 que os sites devem levar menos de 2-3 segundos para carregar, e isso ainda é relevante até hoje.
Com o tempo, o Google até desenvolveu ferramentas como PageSpeed Insights do Google, para ajudar as pessoas a avaliar a velocidade de seus sites. Inúmeras outras ferramentas têm o mesmo propósito, por exemplo, Pingdom, GTmetrix, ou Peso da página (que informa o quanto as imagens afetam a velocidade da página), mas o PageSpeed Insights continua bastante popular entre os especialistas em SEO.
Não se esqueça de usar ferramentas de otimização para uma melhor classificação, algumas das quais totalmente gratuitas.
Se suas imagens forem muito grandes, o Google provavelmente não conseguirá rastreá-las e indexá-las, e isso pode ser outro fator que contribui para classificações mais baixas. Não se esqueça de que alguns de seus visitantes vêm da Pesquisa de imagens do Google (você pode verifique o tráfego de imagens no Google Analytics), então faça o seu melhor para mantê-los.
Outro benefício de usar arquivos de imagem menores é que você pode criar backups em nenhum momento. Eles também ocupar menos espaço de armazenamento (o que reduziria o custo de armazenamento de backup) e consumir menos largura de banda. A maioria dos planos de hospedagem vem com certos limites de largura de banda por plano, então você deve usar suas imagens de uma maneira inteligente.
Formatação de arquivo
Vamos começar mostrando como escolher o formato de arquivo apropriado. Existem vários formatos de imagem, mas os três mais comuns são:
Dimensões da imagem
As imagens que você tira com seu smartphone ou câmera profissional têm grandes resoluções de cerca de 300 dpi e dimensões de pelo menos 2.000 px ou mais. Mas fotos tão grandes não são adequadas para sites, elas demoram uma eternidade para carregar. Claro, você quer que seu visual pareça impressionante, mas ainda assim, o tempo de carregamento precisa ser baixo. É por isso que você precisa alterar o tamanho da imagem no Photoshop ou outro software de edição de imagem de sua escolha antes de adicioná-los ao seu site. A resolução em si não importa tanto quanto o peso da imagem, que precisa ficar abaixo de 100 kb ou 150 kb no máximo. Mais sobre isso no próximo capítulo.
Compressão de imagem
Se você exagerar e compactar demais a imagem, o resultado será um arquivo pequeno e uma imagem de baixa qualidade. Por outro lado, quando a taxa de compressão não é grande, as imagens têm ótima qualidade, mas também são grandes.
Como um princípio básico, o peso total do seu site não deve ultrapassar 2 MB. Idealmente, o tamanho do site de carregamento rápido deve ser de cerca de 1 MB.
Com aquilo em mente, considere manter suas imagens em torno de 150 KB ou menos. Se você estiver usando o formato PNG, não ultrapasse 100 KB.
Existem dois tipos de compressão: com perdas e sem perdas.
Compressão com perdas ou irreversível significa que alguns dos dados e qualidade serão perdidos da versão original. Mesmo depois de reduzir consideravelmente o tamanho do arquivo, parecerá que não há diferenças perceptíveis. Claro, em uma inspeção mais próxima, essas diferenças serão mais aparentes. Se o novo tamanho de arquivo for muito pequeno, você poderá ver algumas áreas pixeladas e bordas irregulares em sua imagem.
Compressão sem perdas é um método que permite reduzir o tamanho da imagem sem degradar sua qualidade. Nenhum dado é perdido quando um arquivo é compactado sem perdas, o que significa que os dados originais podem ser recuperados a qualquer momento. No entanto, como nenhum dado é removido, os arquivos não podem ser compactados em mais de 50%.
Nome da Imagem
Não ignore esta etapa. Dar nomes próprios aos seus arquivos de imagem é importante para o SEO de imagens, uma vez que o Google e outros motores de busca rastreiam os nomes dos seus arquivos de imagem. Evite nomes genéricos, mas sim siga a rota descritiva e incluir palavras-chave. Por exemplo, se houver uma imagem de um carro em seu site, você pode especificar sua marca e modelo no nome do arquivo.
É também importante otimizar os atributos alt, também conhecidos como alternativas de texto para imagens. Se, por algum motivo, um navegador não puder renderizar uma imagem, o texto alternativo será exibido. Mesmo quando uma página é totalmente carregada, se você passar o mouse sobre uma imagem, os atributos alt aparecem. Eles são muito importantes, pois afetam o SEO do seu site e aumentam as chances de suas imagens aparecerem na pesquisa de imagens do Google. Apenas tome cuidado para não sobrecarregar seus atributos alt com palavras-chave, pois os motores de busca podem penalizá-lo por fazer isso.
Visualização de imagem borrada
Esta etapa é sobre criando a impressão de imagens de carregamento rápido e de alta qualidade, carregando primeiro a versão de qualidade inferior de uma imagem. Enquanto os visitantes esperam que o site carregue totalmente, a versão menor da imagem é exibida. Está esticado para o tamanho original e parece borrado, mas dura apenas um pouquinho de tempo, antes que a imagem em tamanho real carregue. Embora exija algum conhecimento básico de CSS, criando o efeito de desfoque é bastante factível.
As ferramentas de otimização de imagem permitem que você modifique suas imagens de acordo com suas necessidades. Você pode compactá-los, alterar os tipos de arquivo, modificar as dimensões da imagem, etc.
Adobe Photoshop
A ferramenta de edição de imagem mais popular é, sem dúvida, Adobe Photoshop. Ele contém alguns recursos de edição de imagem impressionantes, mas o Salvar para a web opção é particularmente interessante.
Quando precisar reduzir o tamanho de uma de suas fotos sem comprometer a qualidade, use esta opção. Isso vai permitir que você escolha o tipo de imagem, qualidade de imagem e dimensões. Prestar atenção em Qualidade e desfoque opções. Ao modificá-los (mesmo sem tocar em outras configurações), você pode manter uma imagem de alta qualidade que não pesa muito.
Plug-ins de otimização de imagem no WordPress
O WordPress vem com vários plug-ins interessantes que podem ajudá-lo a otimizar suas fotos sem muito barulho. Mas, não importa o quão poderoso cada um deles seja, você ainda deve redimensione suas imagens antes de enviá-las para o WordPress, ou então você pode perder muito espaço de hospedagem precioso.
Alguns dos melhores plug-ins para otimização de imagem incluem Optimole, Nuvem de otimizador de imagem EWWW, Imagify, Smush, Optimus – Otimizador de Imagem WordPress, e Comprimir imagens JPEG e PNG.
Smush é o mais popular, com mais de 1 milhão de downloads ativos, mas não importa o plugin que você escolher, todos irão ajudá-lo a otimizar as imagens para que seu site carregue mais rápido. A única coisa que você pode observar é que um plugin que você instala pode comprimir e otimizar imagens externamente, em seus próprios servidores. Dessa forma, o tempo de carregamento da página não será afetado pelo tamanho da imagem.
Conclusão
A otimização da imagem é um dos fatores determinantes para o desempenho impecável do seu site. Se feito de maneira inadequada, você corre o risco de obter classificações baixas, tempos de carregamento altos, assim como uma grande rejeição e taxas de conversão baixas. Otimizar as imagens de maneira adequada não apenas ajudará você a ter um negócio online mais bem-sucedido, mas também economizará muito espaço de armazenamento do site de que certamente precisará à medida que seu site se desenvolve e se expande.
Nada de bom veio de uma UX ruim, então siga nossas dicas sobre como otimizar imagens para a web e seu site funcionará como um relógio.
Apoie o nosso trabalho ❤️
Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.
