A tag IMG do HTML é uma velha conhecida, uma senhora da terceira idade, mas que negócio é esse de <Image> do NextJs?
Acredite meu camarada, se você trabalha com Front deve se preocupar com isso agora, seu SEO tem relação com essa tag.
Pra que serve e porque usar?
Vamos entender porque a Vercel criou essa tag estendida do HTML e quais as vantagens de usar nos seus projetos.
Primeiro é preciso entender as principais métricas que o Google usa para analisar seu site e ranqueá-lo, isso foi divulgado em Jul/21, quando o Google deixou claro as principais métricas.
A tag
<Image>tem relação direta com as métricas CLS e LCP, mas o que é isso?
LCP (Largest Contentful Paint) é basicamente o tempo de carregamento da página, quanto tempo leva pra que o usuário tenha todos os elementos na tela e que possa ler, visualizar.
CLS (Cumulative Layout Shift) é a métrica que identifica mudanças bruscas de layout no site durante o carregamento.
Você já deve ter vivido essa experiência, veja esse exemplo... você acessa um site, um determinado item carrega na página, mas quando você vai clicar, de repente aparece outro elemento e causa uma mudança no layout, empurrando o item que você queria pra baixo e te fazendo clicar em outra coisa.
Isso afeta a experiência do usuário e por isso é analisado e ranqueado pelo Google.
Bom, agora que entendemos o que é CLS e LCP podemos voltar propriamente a tag <Image> e entender como ela trabalha e como auxilia seu SEO.
Essa tag trabalha com 3 princípios:
1. Otimização
O Next utiliza o Lazy Loading, carregando imagens apenas quando estão visíveis na tela. Além disso, ela gera várias versões otimizadas de uma imagem, escolhendo automaticamente a melhor para exibir com base no tamanho do dispositivo e na resolução da tela.
2. Estabilidade
Previne mudança de layout automática quando as imagens estão sendo carregadas, esse é o principal conceito pra uma bom ranqueamento em CLS.
3. Cargas mais Rápidas
Melhora a experiência do usuário, fornecendo imagens mais rápidas, reduzindo a quantidade de dados transferidos e melhorando a velocidade de carregamento. Aqui afeta diretamente o LCP.
Como usar em seus projetos
Primeiro você importa o componente Image
import Image from 'next/image';
Aqui pode ser de duas forma, neste exemplo abaixo eu importei a imagem e chamo ela dentro do componente <Image>.
import Pexels1 from "../public/pexels-1.jpg";
E no local onde eu usaria a tag <img> eu substituo pela <Image>
<Image
width={600}
height={400}
src={Pexels1} //estou chamando a imagem
alt="descrição da imagem - também importante pro SEO"
className="rounded-lg"
/>
Simples assim!
Você também pode colocar o caminho da imagem diretamente no componente, como nesse exemplo:
<Image
width={600}
height={400}
src="../public/pexels-1.jpg" // chamando a imagem diretamente
alt="descrição da imagem - também importante pro SEO"
className="rounded-lg"
/>
Mas lembre-se, você precisa fornecer o Width e Height nas props do componente, isso é importante pro Next calcular o tamanho da imagem de acordo com a tela e criar as versões de otimização da imagem.
Comparativo
Agora vamos aos comparativos, essa é a parte legal.
Numa mesma página eu chamei o mesmo arquivo pelo componente <Image> e pela tag <img>
Nessa primeira imagem está o jpg que chamei pela tag <img>. Ela tem 2.7 Mb e demorou 45ms pra carregar, mas lembre-se que estou rodando em localhost, por isso ainda foi rápido.
Agora veja a mesma imagem que chamei pelo componente <Image>.
O Next converteu automaticamente pro formato Webp e a imagem agora tem 115Kb e demorou 1ms pra carregar.
Top comments (0)