Porque usar o componente Image do NextJs e o conceito CLS e LCP
Tags: nextjs, react, html, tag
Published: 2023-02-14 19:46:36

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](https://web.dev/vitals/).

![web vitals google SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c8dfhlgm149c7ry4ucm.JPG)


> _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.

![Image JPG - Sem tratamento algum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gopor30u1vr0iuy1av5.png)

---

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.

![image webp - nextjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzq6lmfvsny0qnzr55et.png)

<!--
---

**_Importante_**
Quando você usa imagens externas o Next não tem acesso a imagem antes do render, por exemplo quando estamos consumindo uma API. Neste caso pode afetar a **Otimização** e **Carga Rápida**, mas ao menos a **Estabilidade Visual** será preservar, já é um item importante pro ranqueamento, por isso atenção ao _Width_ e _Height_ ✌
-->