Otimização de imagem para a Web: SEO 2022 e técnicas de velocidade do site
Publicados: 2022-10-29Originalmente publicado em agosto de 2020 e atualizado para abrangência em outubro de 2022.
SEO, velocidade da página e experiência do usuário se beneficiam enormemente da aplicação de técnicas de otimização de imagem.
E neste guia, você aprenderá exatamente como otimizar suas imagens para a web. Passo a passo, com exemplos reais.
Agora, existem toneladas de técnicas de otimização de imagem. É por isso que este guia está dividido em 2 seções:
Otimização de imagem para SEO e acessibilidade :
Esta seção contém dicas comprovadas de SEO, como escrever um bom texto alternativo e usar dados estruturados. A maioria das dicas vem diretamente do Google, então não espere muitas surpresas.
Otimização de imagem para velocidade do site e experiência do usuário :
A segunda seção ajudará você a escolher o tipo de imagem e o nível de compactação corretos, implementar imagens responsivas, decidir quando usar fotos de banco de imagens e muito mais.
Com isso em mente, vamos começar.
Técnicas de otimização de imagem: SEO e acessibilidade
Vamos tirar o óbvio do caminho:
Imagens não otimizadas prejudicarão seus rankings orgânicos. Período.
Repetidas vezes, o Google reiterou a importância da otimização de imagem. Na verdade, é um dos tópicos sobre os quais o Google tem sido mais aberto quando se trata de SEO.
Teste as poderosas otimizações de imagem do NitroPack em seu site
No momento, as imagens aparecem na Pesquisa do Google e no Imagens do Google.
Por exemplo, aqui está o SERP para uma palavra-chave altamente competitiva - “receita à bolonhesa”.
(Se você está lendo isso antes do almoço, me desculpe)
Procure a mesma palavra-chave no Google Imagens e você encontrará a mesma imagem.
Este exemplo ilustra perfeitamente o poder da otimização de imagem para SEO.
Com apenas uma imagem , o site da BBC acessa duas fontes de tráfego maciço .
É isso que estamos tentando fazer com essas técnicas de SEO e Acessibilidade.
Vamos ver como podemos chegar lá.
Renomeie seus arquivos de imagem
Por padrão, a maioria dos arquivos de imagem são nomeados como “IMG_010204”.
Isso não é particularmente útil para ninguém, incluindo o Google.
Você quer ter certeza de que o Google entende o que cada imagem representa. É por isso que dar aos seus arquivos de imagem um nome descritivo é uma vitória fácil.
Por exemplo, este é o nome do arquivo da foto de espaguete acima:
(Sério, se você estiver com fome, vá comer alguma coisa. Estarei falando sobre essa imagem ao longo de todo o guia)
Como você pode ver, o nome não é chique, mas faz o trabalho.
E essa é a melhor coisa sobre nomes de arquivos:
Eles não precisam ser muito detalhados . Esse é o trabalho da descrição alt.
Além de escrever um nome de arquivo claro, você também quer evitar o excesso de palavras-chave. Você pode ser penalizado por adicionar palavras-chave desnecessárias.
Por exemplo, se o nome do arquivo da foto fosse “amazing-spaghetti-fettuccine-pasta-dish-recipe-cook.jpg” , seria um candidato principal para uma penalidade de preenchimento de palavras-chave.
Resumindo, mantenha os nomes dos arquivos simples e descritivos . Não é ciência de foguetes.
Usar texto alternativo descritivo
O texto alternativo é a descrição (ou o texto equivalente) da imagem.
Adicioná-lo é crucial para o Google e para pessoas com leitores de tela.
É incrivelmente importante escrever um bom texto alternativo para todas as suas imagens. Também é super fácil.
Você só precisa adicionar um atributo alt à tag da imagem, assim:
Se houver um problema de renderização da imagem, o navegador exibirá o texto alternativo. Dessa forma, os visitantes ainda podem entender a imagem, mesmo que ela não apareça.
Então, como você escreve um bom texto alternativo?
Primeiro, você deve ser muito mais descritivo com seu texto alternativo do que com o nome do arquivo.
Vamos voltar para a imagem da nossa receita:
Este é um exemplo de ótimo texto alternativo - é descritivo e detalhado, sem conjunções ou palavras-chave desnecessárias.
Qualquer um pode visualizar a imagem sem sequer olhar para ela.
Portanto, ser descritivo é sua prioridade número um.
Evitar o preenchimento de palavras -chave também é vital. Eu não posso enfatizar este ponto o suficiente - é super fácil ser penalizado pelo seu texto alternativo.
Além disso, não use expressões desnecessárias como “Esta é uma imagem de…”. Claro que é uma imagem, por que mais teria texto alternativo?
Para resumir:
Descreva a imagem em detalhes;
Evite o preenchimento de palavras-chave;
Não escreva esclarecimentos redundantes como “Esta é uma foto de…”
Então, como você escreveria uma descrição alternativa para a imagem abaixo?
Fonte de fotos - https://unsplash.com/photos/eDXRq-2LfNM
Uma boa versão seria “Black modern ford mustang estacionado perto de uma árvore ao pôr do sol”.
Você pode usar ferramentas como Ahrefs e Screaming Frog para verificar todas as imagens do seu site para texto alternativo. É muito mais fácil do que fazê-lo à mão.
A extensão Alt Text Tester Chrome também é ótima para isso.
Ele permite que você verifique o texto alternativo passando o mouse sobre a imagem. Você também pode tocar duas vezes para copiar.
Não coloque texto importante em uma imagem
Esta não é uma técnica tanto quanto o senso comum.
No entanto, as pessoas ainda erram o tempo todo.
Então, deixe-me colocar isso claramente:
Se você deseja classificar uma palavra-chave ou transmitir uma mensagem vital - escreva-a como texto, não a coloque dentro de uma imagem.
Confira este exemplo:
Fonte da Foto Stock - https://unsplash.com/photos/l8p1aWZqHvE
À primeira vista, você pode pensar que não há nada de errado. Na verdade, as pessoas podem ver essas informações importantes instantaneamente, em vez de rolar pelo texto.
Mas essa forma de transmitir informações pode arruinar seu SEO.
Aqui está o porquê:
O Google não pode ver e interpretar este texto. Se você não tiver escrito no HTML, não será classificado para palavras-chave cruciais.
Pessoas com leitores de tela também perderão tudo isso.
Além disso, os visitantes não podem destacar ou copiar o texto, o que pode ser super irritante.
E se por algum motivo a imagem não renderizar ou carregar lentamente - você perdeu sua única chance de transmitir sua mensagem.
Portanto, seja simples - não coloque texto importante, como palavras-chave de SEO, apenas em imagens. Certifique-se de anotá-lo no HTML.
Use dados estruturados para produtos, vídeos e receitas
Dados estruturados são códigos escritos em um formato específico que facilita a interpretação dos mecanismos de pesquisa.
Como muitas outras técnicas aqui, os dados estruturados facilitam a vida do Google. Usá-lo permite que você alimente os detalhes do mecanismo de pesquisa, como preço, quantidade ou marca.
Vejamos um exemplo.
Confira como o Google fornece pequenas informações nesta imagem:
Dados estruturados tornam isso possível.
Veja como fica no código da página:
Outro exemplo é a nossa página de receita anterior:
São muitas informações úteis para os visitantes antes mesmo de clicarem no link.
E ao combinar dados estruturados com outras técnicas de SEO, essa receita ocupa os 2 primeiros lugares no SERP:
Você pode usar dados estruturados em qualquer página. Nem sempre é obrigatório, mas páginas de produtos, receitas e vídeos têm uma pequena chance de classificar bem sem ele.
Você pode encontrar várias dicas e truques para implementar dados estruturados online.
Mas no final das contas, ninguém pode lhe dizer como fazer isso melhor do que o Google.
Portanto, sempre siga as diretrizes oficiais do Google para:
Adicionando marcação às páginas do produto ;
Adicionando marcação às páginas de vídeos ;
Adicionando marcação a receitas
Criar um Sitemap de imagem
Sitemaps de imagem não são obrigatórios, mas podem definitivamente ajudar sites maiores.
Esses sitemaps ajudam o Google a encontrar imagens que, de outra forma, poderiam ter perdido.
Por exemplo, se o seu site acessar algumas imagens com JavaScript, o Google poderá ter problemas para encontrá-las sem um mapa do site de imagens.
Novamente, siga as diretrizes oficiais do Google para criar um sitemap de imagem.
Além disso, se você é um usuário do WordPress, existem alguns plugins de sitemap de imagem. Teste-os - é muito mais fácil do que criá-lo você mesmo.
E com isso, terminamos as dicas de otimização de imagem de SEO e Acessibilidade.
Vamos passar para a velocidade e a experiência do usuário.
Técnicas de otimização de imagem para a Web: velocidade do site e experiência do usuário
Você não pode ter um site rápido com imagens não otimizadas.
E um site rápido é crucial para manter seus visitantes felizes.
Veja alguns exemplos do poder da velocidade da página:
Em 2012, o Walmart reduziu o tempo de carregamento de seu site em 1s e viu um aumento de 2% nas conversões;
Em 2017, a Zitmaxx Wonnen reduziu o tempo de carregamento para 3 segundos e obteve 50% mais conversões móveis e um aumento de 98,7% na receita móvel;
Por fim, em 2020, a NDTV reduziu sua taxa de rejeição em 50%, melhorando o LCP e o CLS.
Eu posso continuar, mas você entendeu. Se você precisar de mais provas, confira esta coleção de 18 estudos de caso de desempenho na web.
Obviamente, a otimização de velocidade é mais do que apenas otimização de imagem.
Mas aqui está o kicker:
As imagens costumam ser a maior razão para um tempo de carregamento lento do site. Na verdade, cerca de 50% de todos os bytes na página média são bytes de imagem. E desde 2011, os bytes de imagem aumentaram quase 5x na página média de desktop e mais de 7x na página média móvel!
Origem - estado das imagens do arquivo HTTP
É por isso que otimizar suas imagens é uma grande vitória na velocidade do site.
Otimizar imagens para velocidade e experiência do usuário é encontrar um equilíbrio entre tamanho, qualidade e quantidade da imagem.
Aumente a velocidade do seu site com o NitroPack - não é necessário ter habilidades de codificação
Com isso em mente, vamos começar.
Escolha o formato de imagem correto
Aqui está uma lista de verificação rápida para escolher o formato de imagem correto:
Quando você pode sacrificar a qualidade pelo desempenho, use JPEG . Uma ferramenta gratuita de otimização de imagem como o Optimizilla pode ajudá-lo a ajustar o nível de compactação (falaremos sobre compactação daqui a pouco) para testar diferentes proporções de qualidade/tamanho;
Quando você precisar preservar detalhes e exibir a imagem da mais alta qualidade possível, use PNG . Mas tome cuidado para não exagerar. Quanto mais você aumenta a qualidade, maior fica o arquivo;
Para logotipos, formas geométricas e belas artes, use SVG . Em geral, use imagens vetoriais sempre que possível. Eles ficam incríveis em todos os dispositivos e não perdem qualidade quando expandidos ou reduzidos;
Por fim, um formato de imagem de última geração como o WebP pode aumentar ainda mais o desempenho, sem sacrificar tanta qualidade. De acordo com o Google, as imagens WebP são 26% menores que PNGs e 25-34% menores que JPEGs com qualidade comparável. A única desvantagem é que os formatos de última geração (incluindo WebP) não têm 100% de suporte ao navegador. Isso os torna mais complicados de servir, pois você precisa manter um backup para navegadores mais antigos.
Isso é realmente tudo que você precisa para escolher um formato de arquivo. Para se aprofundar no assunto, confira o artigo da Shutterstock sobre imagens raster vs. vetoriais.
Reduzir o tamanho do arquivo de imagem
Existem duas maneiras de compactar o tamanho do arquivo de imagem - compactação com e sem perdas.
A compactação de imagem com perdas elimina alguns dos dados de pixel. A compressão sem perdas não.
Na verdade, a diferença entre os formatos de imagem que acabamos de falar (JPEG, PNG, WebP, etc.) é como eles aplicam esses dois tipos de compactação.
JPEG é um exemplo clássico de um tipo de imagem com perdas. PNG é um tipo sem perdas. E o WebP usa compressão com e sem perdas.
Este é um tema bastante complexo, que não posso abordar em detalhes aqui. Se você estiver interessado, confira este mergulho profundo em compactação de imagem.
Por enquanto, é importante saber que não existe um nível de compressão “bom” ou “ruim”. Tudo depende do seu site.
Aqui está o que quero dizer:
Se você tiver um blog, site de notícias ou qualquer outro site que não exija imagens de alta qualidade, poderá aumentar a compactação com perdas.
Por remover dados, essa compactação leva a uma grande redução no tamanho do arquivo . Claro, isso vem à custa da qualidade da imagem.
Por outro lado, se você tem um site de fotografia ou moda, provavelmente precisará de imagens incríveis para se destacar da multidão. Nesse caso, a compactação sem perdas é sua melhor aposta.
Você não verá uma grande redução no tamanho do arquivo, mas manterá a incrível qualidade .
Existem várias ferramentas de compactação de imagem que você pode usar:
Para o público mais técnico, Guetzli e Imagemin podem fazer um trabalho incrível;
Mesmo ferramentas online gratuitas como Compress JPEG, TinyJPG e Optimizilla podem produzir bons resultados;
Na NitroPack, também oferecemos qualidade de imagem ajustável como parte de nossos recursos de otimização de imagem.
A parte difícil não é encontrar uma ferramenta. É encontrar um equilíbrio entre o desempenho do site e a qualidade da imagem.
E não há outra maneira de fazer isso além de testar.
Recentemente, lançamos um novo recurso sofisticado que reduz o tamanho do arquivo de imagem em até 4x – Dimensionamento de imagem adaptável. Esse tipo de otimização visa todas as imagens identificadas por um elemento de marcação para uma imagem em HTML (incluindo galerias, carrosséis, controles deslizantes, imagens acima e abaixo da dobra).
A maneira como funciona é fazer com que todas as imagens correspondam às dimensões dos contêineres em que são exibidas em computadores, dispositivos móveis e tablets. E, sim, isso significa que você pode fazer uma pausa no redimensionamento repetitivo de imagens em massa!
Use uma rede de entrega de conteúdo (CDN)
Configurar um CDN é uma das melhores coisas que você pode fazer para a velocidade do site em geral.
Isso também se aplica à otimização de imagem.
Se você não estiver familiarizado com CDNs, confira nosso guia CDN para iniciantes. Por enquanto, aqui está o rápido TL;DR:
Digamos que seu site esteja hospedado em um servidor nos EUA. Quando um usuário da Europa visita, os dados terão que viajar dos EUA para a Europa.
A distância é tão grande que a latência é inevitável.
CDNs resolvem esse problema.
Veja como:
A CDN armazena versões em cache do seu site em diferentes localizações geográficas .
Assim, quando visitantes da Europa chegam ao seu site, os dados não chegam dos EUA. Virá de um local próximo a eles.
O mesmo vale para visitantes na América do Sul, África, Ásia ou em qualquer outro lugar onde o provedor CDN tenha servidores.
Esse é o poder de um CDN - ele encurta a distância entre seus visitantes e seu site .
E como as outras partes do seu site, as imagens também chegam aos visitantes mais rapidamente.
Você também pode usar CDNs de imagem - que é um CDN projetado especificamente para entrega de imagens. Eles têm alguns benefícios interessantes, mas não são obrigatórios. Para a maioria dos sites, um CDN regular serve.
Exibir imagens responsivas
Um erro comum que as pessoas cometem é carregar apenas uma imagem grande e exibi-la em todas as janelas de visualização.
A princípio, parece uma boa ideia. Uma imagem grande não perde qualidade quando reduzida. Portanto, para garantir que fique bem em todos os dispositivos, basta fazer o upload da maior versão que você possui e pronto!
Exceto que não é tão simples.
Se a sua imagem tiver 700px de largura, pode ficar bem em uma tela de 300px. Mas todos os 700px ainda precisam ser processados. Isso é um enorme desperdício de largura de banda.
Então, como você pode manter sua imagem de qualidade e não desperdiçar largura de banda?
Use o atributo srcset .
Este atributo aponta o navegador para diferentes versões de imagem. A partir daí, o navegador decide qual deles servir com base no dispositivo.
Vejamos um exemplo rápido.
Este é um código HTML padrão para carregar uma imagem:
Este pedaço de código usa o atributo src , que informa ao navegador onde encontrar a imagem.
Vamos adicionar srcset à mistura:
Agora estamos fornecendo links para 3 outras versões - pequena, média e grande. A partir daí, o navegador escolhe o melhor, dependendo da janela de visualização .
Esse é o poder do srcset . Nossas imagens sempre ficam incríveis e não precisamos fazer nada após a configuração inicial. O navegador faz todo o trabalho pesado.
O site do Airbnb usa essa abordagem:
Tudo o que você precisa fazer é executar alguns testes para ver como suas imagens ficam em diferentes dispositivos. Isso ajudará a determinar quais tamanhos de imagem fornecer.
Para fazer isso, use o DevTools do Chrome.
Abra sua página, clique com o botão direito do mouse e selecione “Inspecionar”. A aba “Elements” tem informações sobre suas imagens.
A partir daí, você pode selecionar diferentes dispositivos, diminuir ou expandir a janela de visualização e fazer todos os tipos de testes.
Uma nota final: o WordPress (desde a versão 4.4) cria automaticamente diferentes versões de suas imagens. Ele também adiciona o atributo srcset .
Se você é um usuário do WordPress, você só precisa fornecer os tamanhos de imagem corretos.
Remover imagens desnecessárias
Esta é a dica de otimização de imagem mais simples e negligenciada.
Se uma imagem não contribui para a experiência do usuário ou não ajuda a explicar seu ponto de vista, ela não deveria estar lá . Claro e simples.
Aqui está o que você pode fazer:
Abra suas páginas mais importantes e pense no que elas estão tentando realizar;
À medida que você passar por elas, ficará claro quais imagens devem estar lá e quais não devem. Mas não comece a deletar ainda;
Primeiro, certifique-se de ter seu rastreamento configurado. Visualizações de página, taxas de rejeição, conversões, tempo na página - todas essas coisas boas;
É importante basear essa decisão em dados, não em sua opinião subjetiva. Ao salvar esses dados, você pode comparar sua página antes e depois de remover as imagens em questão;
Teste ambas as versões por algumas semanas e escolha um vencedor.
E se você quiser comparar as duas versões em tempo real, pode usar uma ferramenta como o Google Optimize.
Não abuse do banco de imagens
Não me entenda mal - eu amo coisas grátis tanto quanto qualquer outro cara.
E as pessoas que distribuem gratuitamente suas imagens de alta qualidade merecem muitos elogios.
Mas…
As fotos de banco de imagens são usadas em demasia. Não parecem originais, porque não são.
Por exemplo, com que frequência você viu esses caras em um artigo sobre trabalho em equipe, colaboração ou um tópico genérico semelhante:
Fonte de fotos - https://unsplash.com/photos/Oalh2MojUuk
Ou esta foto em sites que vendem cursos ou serviços jurídicos:
Fonte da Foto Stock - https://unsplash.com/photos/5fNmWej4tAA
Uma rápida pesquisa reversa de imagens para a primeira foto retorna cerca de 5800 resultados .
E cerca de 13 500 para o segundo.
Sim, isso não é super original. Mas mesmo assim, isso é realmente um grande negócio?
É sim.
Pesquisas recentes confirmam que as fotos de banco de imagens podem impactar negativamente tanto a imagem da sua marca quanto o SEO . Eu recomendo muito que você leia.
Se você não tiver tempo, aqui está uma citação que descreve perfeitamente os problemas com fotos de banco de imagens:
A pior parte é que eles mostram uma completa falta de esforço.
Agora, estou ciente de que nem todos podem comprar fotos ou designs profissionais. E não estou dizendo que você nunca deve usar fotos de banco de imagens. Você deve.
Mas, por favor, seja estratégico quanto a isso.
Quero dizer três coisas com isso:
Primeiro, se você precisar de uma imagem de pessoas trabalhando em um escritório, basta tirar algumas fotos do seu escritório . Seus visitantes apreciarão a autenticidade.
Em segundo lugar, quando você tiver que usar fotos de banco de imagens, vá um pouco mais fundo e encontre aquelas que não foram exploradas tanto. Aqui está uma lista de 24 sites exclusivos de fotos que você pode acessar.
Terceiro, não use uma foto de banco de imagens em sua página inicial ou em outras páginas vitais. Entre em contato com um fotógrafo/designer freelancer e obtenha algumas imagens personalizadas. Não são tão caros.
Dica de bônus: carregamento lento (adiar) imagens fora da tela
Esta dica final não é realmente sobre otimização de imagem, mas pode ter um grande impacto no tempo de carregamento inicial.
Na verdade, o carregamento lento de imagens pode acelerar o tempo de carregamento ainda mais do que a otimização de imagem!
Veja como funciona:
O carregamento lento (ou adiamento) de imagens fora da tela significa usar um conjunto de técnicas para carregar apenas as imagens que os visitantes estão visualizando no momento .
As imagens fora da tela não ficam visíveis antes que o usuário navegue até elas. Adiá-los garante que eles sejam carregados após outros recursos mais críticos.
Além disso, o tempo de carregamento inicial da página é muito mais rápido, pois o navegador precisa processar menos recursos de uma só vez.
Aqui está um exemplo de como o carregamento lento funciona:
Como você pode ver, a maioria das imagens abaixo da dobra são carregadas à medida que o usuário rola a página, não quando chega nela.
Agora, existem diferentes maneiras de implementar essa técnica:
Você pode tentar o carregamento lento nativo usando o atributo de carregamento com um valor de lazy . Esse método é bem fácil, mas não tem suporte ao navegador;
Você pode usar o Observador de Interseção para registrar quais imagens devem ser carregadas lentamente. Este método requer escrever um pouco de JavaScript. Você pode encontrar um ótimo exemplo do Intersection Observer em ação aqui;
Você também pode automatizar o processo com o NitroPack. Nosso serviço carrega todas as imagens (incluindo as de fundo).
Para se aprofundar neste tópico, confira nosso artigo sobre como adiar imagens fora da tela.
Otimizando imagens com plugins e serviços do WordPress
Normalmente, a maioria das otimizações discutidas aqui não são feitas manualmente, especialmente em sites WordPress.
Se você tem um site WordPress, é provável que use um plugin de otimização de imagem, caso ainda não o tenha. Não vou listar plugins de otimização de imagem aqui, pois há muitas opções.
Em vez disso, vou me concentrar apenas em um fator crucial a ser considerado ao escolher um plug-in de otimização de imagem:
A otimização da imagem deve ser feita na nuvem, ou seja, não no seu servidor . Dessa forma, sua infraestrutura não lidará com operações pesadas, como compactação e redimensionamento.
Por exemplo, um plug-in de otimização de imagem executado no mesmo servidor que o CMS provavelmente exigirá tempo de CPU adicional para redimensionar e compactar imagens. Por outro lado, um serviço baseado em nuvem (como NitroPack) faz o trabalho pesado para você, otimizando imagens na nuvem e entregando-as por meio de um CDN.
Esteja sempre atento à sobrecarga que cada plug-in adiciona aos seus servidores. Alguns plugins pesados podem realmente tornar seu site mais lento, aumentando a quantidade de código que deve ser executado.
Otimização de imagem e os principais elementos vitais da Web do Google
Se você se preocupa com SEO, provavelmente também se preocupa com o Core Web Vitals.
Dois dos três principais elementos vitais da Web - a maior pintura de conteúdo (LCP) e o deslocamento de layout cumulativo (CLS) - podem ser bastante afetados pela otimização de imagem.
Aqui está o porquê:
O LCP mede quanto tempo leva para o maior elemento acima da dobra aparecer em uma página. Esse elemento é geralmente uma imagem. Se a imagem não for otimizada e entregue rapidamente, o LCP sofre um impacto, o que pode resultar em desempenho insatisfatório do Core Web Vitals;
O CLS mede a estabilidade visual de uma página. Quando as imagens não possuem dimensões (atributos de largura e altura ), o navegador não sabe antecipadamente quanto espaço alocar para elas. Isso resulta em mudanças inesperadas de layout quando as imagens aparecem na tela, o que piora sua pontuação no CLS.
Praticamente todas as técnicas discutidas neste artigo podem melhorar o LCP ou o CLS de alguma forma. Para alguns sites, a otimização de imagem por si só pode ser a diferença entre ser aprovado e reprovado na avaliação do Core Web Vitals.
No entanto, uma palavra de cautela quando se trata de carregamento lento:
O carregamento lento de imagens sem reservar espaço suficiente para elas é uma receita para o desastre.
Lembre-se de que as imagens adiadas aparecem quando os usuários rolam até elas. Se não houver espaço suficiente alocado com antecedência (por exemplo, por meio de um espaço reservado), haverá uma grande mudança de layout quando a imagem aparecer na tela. Novamente, isso pode arruinar sua pontuação no CLS e a experiência dos visitantes.
Existem diferentes maneiras de carregar imagens lentamente e reservar espaço para elas. Para mais detalhes, confira nosso artigo sobre como adiar imagens fora da tela.
Pensamentos finais
Agora que você entende o que a otimização de imagem pode fazer, deixe-me reiterar três pontos cruciais:
Primeiro, quando se trata de SEO, sempre siga as melhores práticas do Google para trabalhar com imagens. Você realmente não precisa de um guru aqui. O Google fornece todas as informações gratuitamente;
Em segundo lugar, não tenha medo de excluir imagens se elas não ajudarem seus resultados. Eu sei que remover imagens sempre parece muito fácil de trabalhar. Mas sim;
Por fim, considere usar uma ferramenta para automatizar o aspecto de desempenho da otimização de imagem para você. Fazer tudo à mão pode ser bom para um site pequeno, mas à medida que você adiciona mais e mais imagens, redimensionar, compactar e alterar os tipos de imagem consome muito tempo.
Por exemplo, veja o que o NitroPack pode fazer por você:
Compressão de imagem. Por padrão, o NitroPack usa compactação com perdas para reduzir o tamanho do arquivo de imagem. Você também pode ajustar manualmente a qualidade da imagem nas Configurações Avançadas;
Conversão WebP. Para todos os navegadores que oferecem suporte WebP, o NitroPack servirá uma versão WebP de suas imagens;
Dimensionamento preventivo de imagens. O NitroPack resolve o problema da falta de atributos de largura e altura sem adicioná-los. Isso acelera a renderização e reduz as mudanças de layout;
Dimensionamento de imagem adaptável (disponível em pré-lançamento). Esse recurso garante que as imagens correspondam e não transbordem seus contêineres;
O NitroPack também vem com um CDN embutido e carrega automaticamente todas as imagens, vídeos e iFrames.
Finalmente, o NitroPack tem tudo o que você precisa para um site rápido.
Se você quiser testar todos esses recursos, inscreva-se para um plano NitroPack gratuito hoje (sem necessidade de cartão de crédito).