Maximize a qualidade da imagem com Next.js

Ajude seu aplicativo a viver da melhor maneira possível; economize tempo e espaço com fácil otimização de imagem.

As imagens são uma parte importante de qualquer site ou aplicativo. Eles ajudam a tornar o conteúdo mais envolvente e visualmente atraente.

No entanto, se as imagens não forem otimizadas adequadamente, elas também podem tornar um site ou aplicativo mais lento.

Por que otimizar imagens?

Existem alguns motivos pelos quais é importante otimizar imagens.

Pode ajudar a melhorar o tempo de carregamento do site ou aplicativo.
Ele pode reduzir a quantidade de dados que um cliente precisa baixar, o que pode economizar custos de largura de banda.
Pode ajudar a melhorar o desempenho geral do site ou aplicativo.

Como otimizar imagens em Next.js

Existem várias maneiras de otimizar imagens em Next.js. Uma é usar o componente Imagem. Este componente otimiza automaticamente as imagens para desempenho.

Outra maneira de otimizar imagens é usar recursos integrados de processamento de imagens. Next.js pode redimensionar, compactar e otimizar imagens automaticamente para desempenho.

Finalmente, você pode usar uma biblioteca de terceiros como react-optimized-image. Esta biblioteca oferece uma variedade de recursos de otimização de imagem.

Usando o componente de imagem

O componente Imagem é a maneira mais fácil de otimizar imagens em Next.js. Para utilizá-lo, basta importar o componente do pacote next/image.

Depois de importar o componente, você poderá usá-lo como qualquer outro no React. O componente Image possui alguns adereços que você pode usar para controlar como ele renderiza as imagens.

import Image from 'next/image'
export default function MyImage() {
  return (
    <Image
      src="/my-image.jpg"
      width="200"
      height="200"
      quality="100"
      alt="My image"
    />
  )
}

Neste exemplo, o componente Imagem renderiza uma imagem com largura de 200px e altura de 200px. Você também pode usar CSS ou uma estrutura como o Tailwind para estilizar seu aplicativo e imagens.

Alguns dos acessórios necessários para o componente Imagem são largura, altura, src e alt. A propriedade src é a URL da imagem que você deseja usar. Use os adereços de largura e altura para definir a largura e a altura da imagem, em pixels. O alt prop é o texto alternativo da imagem.

Alguns acessórios opcionais para o componente Imagem são layout, carregador, espaço reservado e prioridade. A propriedade layout especifica o layout da imagem. Você pode usar a propriedade loader para especificar um carregador de imagem personalizado. A propriedade placeholder especifica um espaço reservado para imagem personalizado. A propriedade prioridade especifica a prioridade da imagem.

Alguns dos benefícios de usar o componente Imagem são:

Desempenho melhorado: Um dos principais benefícios do uso do componente Imagem é o desempenho aprimorado. O componente otimiza automaticamente as imagens para desempenho.
Redimensionamento automático de imagens: Outro benefício de usar o componente Imagem é o redimensionamento automático de imagens. O componente pode redimensionar imagens automaticamente para caber nos acessórios de largura e altura.
Compactação automática de imagens: O componente Imagem também pode compactar imagens automaticamente para reduzir o tamanho do arquivo.
Suporte para carregamento lento: O componente Imagem também suporta carregamento lento. Isso significa que ele só carregará imagens quando elas estiverem visíveis na tela.

Usando uma biblioteca de terceiros

Se precisar de mais controle sobre a otimização de imagens, você pode usar uma biblioteca de terceiros como react-optimized-image. Esta biblioteca oferece uma variedade de recursos de otimização de imagem.

Alguns dos recursos da imagem otimizada para reação incluem:

Otimizar imagens no cliente e no servidor: react-optimized-image pode otimizar imagens no cliente e no servidor. Isso significa que as imagens são otimizadas em termos de desempenho e também de tamanho de arquivo.
Redimensionamento automático de imagem: react-optimized-image pode redimensionar imagens automaticamente para caber nos adereços de largura e altura.
Compressão automática de imagem: react-optimized-image também pode compactar imagens automaticamente para reduzir o tamanho do arquivo.
Suporte para carregamento lento: react-optimized-image também suporta carregamento lento. Isso significa que ele só carregará imagens quando elas estiverem visíveis na tela.
Suporte para vários formatos de imagem: react-optimized-image suporta vários formatos de imagem, incluindo JPEG, PNG e WebP.

Para usar react-optimized-image, basta instalar a biblioteca com npm.

Depois de instalar a biblioteca, você pode importá-la para o seu projeto.

import Img from 'react-optimized-image'
export default function NextImg() {
  return (
    <Img
      src="/my-image.jpg"
      sizes={[400, 800]}
      alt="My image"
    />
  )
}

Você também pode usar arquivos SVG com imagem otimizada para reação.

import {Svg} from 'react-optimized-image'
export default function NextImg() {
  return (
    <Svg
      src="/my-image.svg"
      className=&ldquo;filled-red&rdquo;
    />
  )
}

Este exemplo usa a propriedade className para especificar um nome de classe para o SVG. Você pode usar esse nome de classe para estilizar o SVG com CSS ou interagir com ele usando JavaScript.

react-optimized-image também oferece alguns outros benefícios em relação aos recursos integrados de otimização de imagem.

Um benefício de usar um pacote em vez de recursos integrados é que ele pode gerar automaticamente diferentes tamanhos de imagens. Isso significa que você não precisa criar versões diferentes da mesma imagem.

Outro benefício é que ele pode exibir automaticamente o tamanho de imagem apropriado para o dispositivo do usuário. Isso significa que dispositivos com telas de alta resolução obterão uma imagem de alta resolução e dispositivos com telas de baixa resolução obterão uma imagem de baixa resolução.

Finalmente, react-optimized-image é um projeto totalmente de código aberto. Isso significa que você pode contribuir com a biblioteca se precisar de um recurso específico ou correção de bug.

Qual método você deve usar?

Então, qual método você deve usar para otimizar imagens em Next.js?

Se precisar de otimização básica de imagem, você pode usar os recursos integrados de processamento de imagem. Esta é a maneira mais fácil de começar a otimizar imagens.

Se precisar de mais controle sobre a otimização de imagens, você pode usar uma biblioteca de terceiros como react-optimized-image. Esta biblioteca fornece recursos de otimização de imagem mais avançados.

Se você precisar do melhor desempenho absoluto, poderá usar uma combinação dos recursos integrados de processamento de imagem e uma biblioteca de terceiros. Isso lhe dará o melhor dos dois mundos. No entanto, esta abordagem não é recomendada para iniciantes, pois requer mais configuração.

Melhore o SEO com imagens otimizadas

Ao otimizar as imagens do seu site ou aplicativo, você pode melhorar o seu SEO. O algoritmo do Google leva em consideração a velocidade de carregamento de sites e aplicativos. Se o seu site ou aplicativo carregar lentamente, isso terá um impacto negativo no seu SEO.

Com imagens otimizadas, você pode melhorar o tempo de carregamento do seu site ou aplicativo, o que pode melhorar o seu SEO. Depois disso, você também pode adicionar protocolo de gráfico aberto para um desempenho ainda melhor.