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.