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 paraviewports
menores, mas manterá as dimensões originais paraviewports
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 aoimg
elemento nativo. - Quando responsive, a imagem reduzirá as dimensões para
viewports
menores e aumentará paraviewports
maiores. Certifique-se de que o elemento pai usedisplay: 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 aobjectFit
propriedade. Certifique-se de que o elemento pai tenhaposition: 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:
Top comments (0)