Next.js - Como obter o máximo do componente <Image/>

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

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.

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

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.

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

<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