next image export optimizer
v1.18.0
Use o próximo.js componente avançado <imagem/> com a funcionalidade de exportação estática. Otimiza todas as imagens estáticas em uma etapa adicional após a próxima exportação estática.
Para imagens usando uma string de caminho: (por exemplo, src = "/perfil.png")
Coloque as imagens em uma pasta dentro da pasta pública como público/imagens
Para imagens usando uma importação estática: (por exemplo, src = {perfilImage})
Você pode colocar as imagens em qualquer lugar do seu projeto. As imagens serão otimizadas e copiadas para a pasta de exportação.
Para imagens remotas: (por exemplo, src = "https://example.com/image.jpg")
Consulte a seção em imagens remotas.
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
Adicione o seguinte ao seu next.config.js . Você também pode usar next.config.ts para projetos de texto datilografado.:
// next.config.js
module . exports = {
output : "export" ,
images : {
loader : "custom" ,
imageSizes : [ 16 , 32 , 48 , 64 , 96 , 128 , 256 , 384 ] ,
deviceSizes : [ 640 , 750 , 828 , 1080 , 1200 , 1920 , 2048 , 3840 ] ,
} ,
transpilePackages : [ "next-image-export-optimizer" ] ,
env : {
nextImageExportOptimizer_imageFolderPath : "public/images" ,
nextImageExportOptimizer_exportFolderPath : "out" ,
nextImageExportOptimizer_quality : "75" ,
nextImageExportOptimizer_storePicturesInWEBP : "true" ,
nextImageExportOptimizer_exportFolderName : "nextImageExportOptimizer" ,
nextImageExportOptimizer_generateAndUseBlurImages : "true" ,
nextImageExportOptimizer_remoteImageCacheTTL : "0" ,
} ,
} ; Atualize o comando Build em package.json
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}Substitua o componente <imagem /> pelo componente <exportEdImage /> :
Exemplo:
// Old
import Image from "next/image" ;
< Image
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ;
// Replace with either of the following:
// With static import (Recommended)
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" /> ;
// With dynamic import
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ; Para imagens remotas, você deve especificar o SRC como uma string que inicia com HTTP ou HTTPS no componente ExportEdImage.
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; Para que a otimização da imagem no horário de construção funcione corretamente, você deve especificar todos os URLs de imagem remota em um arquivo chamado RemoteOptimizedImages.js no diretório raiz do seu projeto (onde o next.config.js também é armazenado). O arquivo deve exportar uma matriz de strings contendo os URLs das imagens remotas. Retornando uma promessa de tal matriz também é suportada.
Exemplo:
// remoteOptimizedImages.js
module . exports = [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] ; // Or with a promise
module . exports = new Promise ( ( resolve ) =>
resolve ( [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] )
) ;
// Or with an async API call
module . exports = fetch ( "https://example.com/api/images" ) . catch ( ( error ) => {
console . error ( error ) ;
return [ ] ; // return an empty array in case of error
} ) ;No momento da construção, as imagens serão baixadas ou lidas no cache. Os URLs da imagem serão substituídos pelos URLs de imagem otimizados no componente de imagem exportado.
Você pode especificar o tempo para viver do cache em segundos, configurando a variável de ambiente nextImageExportOptimizer_remoteImageCacheTTL no seu arquivo next.config.js . O valor padrão é de 0 segundos (como a imagem pode ter mudado).
Defina -o como:
Se você deseja ocultar os URLs de imagem remota do usuário, poderá usar o suporte substituto do componente ExportEdImage. Isso substituirá o atributo SRC da tag de imagem pelo valor do substituto substituto.
Cuidado que o componente de imagem não pode voltar ao URL da imagem original se as imagens otimizadas ainda não forem geradas quando você usar o substituto SubstridesRC. Isso resultará em um link de imagem quebrado.
Você pode personalizar o nome do arquivo para imagens otimizadas remotas adicionando o seguinte ao seu next.config.js :
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; Se o seu projeto Next.js não estiver no diretório raiz, onde você está executando os comandos, por exemplo, quando estiver usando um monorepo, poderá especificar o local do next.config.js como um argumento para o script:
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "Especifique o caminho da pasta de saída através da variável de ambiente:
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }Ou passando o argumento para o script:
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder " Se você deseja implantar seu aplicativo em uma subpasta do seu domínio, poderá definir o Basepath no arquivo next.config.js :
module . exports = {
basePath : "/subfolder" ,
} ;O componente ExportEdImage possui um suporte de base que você pode usar para passar o Basepath para o componente.
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ; Se você não deseja a geração automática de imagens pequenas e embaçadas, defina a variável de ambiente nextImageExportOptimizer_generateAndUseBlurImages como false e defina o suporte placeholder do componente <exportIdImage /> para empty .
Se você deseja renomear o nome da pasta de exportação, defina a variável de ambiente nextImageExportOptimizer_exportFolderPath como o nome da pasta desejada. O padrão é nextImageExportOptimizer .
Por padrão, as imagens são armazenadas no formato Webp.
Se você não deseja usar o formato Webp, defina a nextImageExportOptimizer_storePicturesInWEBP Ambiente variável como false .
O componente <exportEdImage /> é um invólucro em torno do componente <imagem /> do próximo.js. Ele usa o recurso de carregador personalizado para gerar um srcset para diferentes resoluções da imagem original. O navegador pode então carregar o tamanho correto com base no tamanho atual da viewport.
A operação de transformação da imagem é otimizada, pois usa hashes para determinar se uma imagem já foi otimizada ou não. Dessa forma, as imagens são otimizadas apenas uma vez e nem toda vez que o comando de compilação é executado.
O componente <exportEdImage /> volta à imagem original se as imagens otimizadas ainda não forem geradas no modo de desenvolvimento. No aplicativo React estático exportado, as imagens responsivas estão disponíveis como SRCSET e carregadas dinamicamente pelo navegador.
O método de importação estática é recomendado, pois informa o cliente sobre o tamanho da imagem original. Quando as larguras maiores que a largura da imagem original forem solicitadas, o próximo maior tamanho de imagem na matriz Deconfitsizes (especificado no next.config.js ) será usado para a geração do atributo srcset. Quando você especifica as imagens como uma string de caminho, esta biblioteca cria duplicatas da imagem original para cada tamanho de imagem na matriz Devicesizes que é maior que o tamanho da imagem original.
Você pode produzir as imagens originais e não otimizadas usando o suporte unoptimized . Exemplo:
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ; Você ainda pode usar o componente de imagem herdado next/legacy/image :
import ExportedImage from "next-image-export-optimizer/legacy/ExportedImage" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" layout = "fixed" /> ;Imagens animadas: você pode usar imagens .gif e animada .webp. A próxima imagem-exportar otimizador otimizará automaticamente as imagens animadas e gerará o SRCSET para as diferentes resoluções.
Se você definir a variável NextImageExportOptimizer_StorePictureInWebp como True, as imagens animadas serão convertidas em formato .Webp, que podem reduzir significativamente o tamanho do arquivo. Observe que as imagens PNG animadas não são suportadas por este pacote.
Você pode ver um exemplo ao vivo do uso desta biblioteca em reactapp.dev/next-image-export-otimizer
AVISO A versão 1.0.0 é uma mudança de quebra. Segue -se as alterações introduzidas no próximo 13.0.0, que substitui o componente
next/imagepelonext/future/image. Se você estiver usando o próximo 12 ou menos, use a versão 0.17.1 .
