Next.js - Como obter o máximo do componente <Image/>
Tags: nextjs, javascript, programming, beginners
Published: 2022-02-25 16:30:27

![image Next](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g43ddds48jlmhwz6rir.png)
 
A maioria faz uso do `<Image/>` componente do Next.js sozinho e sem nenhuma configuração adicional, assumindo que as imagens são otimizadas ao máximo por conta própria, o que está errado!

Sim, usando o `<Image/>` componente, você obtém algum nível de otimização de imagem, mas pode ser otimizado ainda mais com base em vários fatores.

### Usando imagens locais

Ao usar imagens locais, você pode simplesmente importá -las de sua pasta pública e, como esta é uma imagem local, você pode pular adicionando a altura e a largura, pois o Next JS descobrirá durante o tempo de compilação

```javascript
import localImage from "../public/mountains.jpg";
import Image from "next/image";

<section>
  <Image
    src={localImage}
    alt="Picture of the author"
  />
</section>
```

### Usando Imagens Remotas

Ao falar sobre imagens remotas, entendemos claramente que precisaremos de uma string de URL de imagem que vá para `src={'image-url'}`, mas você também deve entender que o Next.js não tem acesso a esta imagem em tempo de compilação, o que significa ele não saberá a largura e a altura da imagem e, portanto, precisaremos fornecer a altura e a largura da imagem que precisamos.

```javascript
const remoteImage = "your-image-url"

<section>
  <Image
    src={remoteImage}
    alt="Picture of the author"
    width={400}
    height={500}
  />
</section>
```

### Imagens Remotas (com desfoque ao carregar)

Na maioria das vezes, você poderá ver um espaço vazio antes que a imagem seja carregada, e fica pior quando você precisa carregar um grande número de imagens de uma só vez, e isso é uma experiência ruim para o usuário se quisermos fazer isso, e isso é onde a propriedade `blurDataURL` e `placeholder` entra na imagem.
`placeholder` será definido como `blur` para que o efeito de desfoque aconteça antes que os dados completos da imagem sejam obtidos e `blurDataURL` será uma imagem codificada em base64 da sua imagem principal que deve ser carregada e normalmente essa base64 é bem pequena e ser ampliado como espaço reservado para o efeito de carregamento borrado.

⚠ Nota para imagens locais, você só precisará usar a propriedade `placeholder` com ela definida como `blur` e o `blurDataURL` pode ser ignorado, o próximo JS fará a mágica nos bastidores

```javascript
export const getStaticProps = async () => {
  const remoteImage =
  "https://images.unsplash.com/photo-1525824236856-8c0a31dfe3be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHdhdGVyZmFsbHxlbnwwfHwwfHw%3D";
  const { base64, img } = await getPlaiceholder(remoteImage, { size: 10 });

  return {
    props: {
      imageProps: { ...img, blurDataURL: base64, remoteImage },
    },
  };
};

<!-- The imageProps comes from the page component as props, check out the github repo attached in the article for details -->
<Image
  src={imageProps.remoteImage}
  alt="Picture of the author"
  blurDataURL={imageProps.blurDataURL}
  placeholder="blur"
  width={200}
  height={250}
/>
```

### Tipo de layout

O comportamento do layout da imagem conforme a janela de visualização muda de tamanho.

![Layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u72fetf3s6f5f2afxlt4.png)

- Quando `intrinsic`, a imagem reduzirá as dimensões para `viewports` menores, mas manterá as dimensões originais para `viewports` maiores.
- Quando `fixed`, as dimensões da imagem não serão alteradas à medida que a janela de visualização for alterada (sem capacidade de resposta) semelhante ao `img` elemento nativo.
- Quando responsive, a imagem reduzirá as dimensões para `viewports` menores e aumentará para `viewports` maiores. Certifique-se de que o elemento pai use `display: block` em sua folha de estilo.
- Quando `fill`, a imagem alongará a largura e a altura para as dimensões do elemento pai, desde que o elemento pai seja relativo. Isso geralmente é emparelhado com a `objectFit` propriedade. Certifique-se de que o elemento pai tenha `position: relative` em sua folha de estilo.

### Controle a qualidade de imagem que você precisa

A qualidade da imagem otimizada, um número inteiro entre `1` e `100` onde `100` é a melhor qualidade. Padrões para `75`.

```javascript
<section>
  <h2>5. Local Images (Quality of the images [1-100])</h2>
  <div>
    <p>Image with the quality set to its lowest (1)</p>
    <Image
      src={localImage}
      alt="Picture of the author"
      width={800}
      height={500}
      quality={1}
    />
  </div>
  <div>
    <p>Image with the quality set to its maximum (100)</p>
    <Image
      src={localImage}
      alt="Picture of the author"
      width={800}
      height={500}
      quality={100}
    />
  </div>
</section>
```

Portanto, essas são as 5 principais maneiras pelas quais você pode fazer bom uso de `<Image />` do Next.js

Fontes onde pesquisei esse conteúdo:

- https://nextjs.org/docs/api-reference/next/image
- https://nextjs.org/docs/basic-features/image-optimization