next image export optimizer下载 - next image export optimizer源代码下载

next image export optimizer

Ai源码

v1.18.0

下载

下一个图像 - 远期访问器

使用Next.js Advanced <image/>组件具有静态导出功能。在下一个静态导出之后，在附加步骤中优化所有静态图像。

通过响应式图像大大减少图像大小和页面加载时间
使用Sharp.js快速图像转换（也由Next.js Server在生产中使用）
默认情况下，将JPEG和PNG文件转换为现代WebP格式
仅通过CDN提供导出的反应捆绑包。无需服务器
自动产生微小的占位符图像
最少的配置
支持打字稿
支持将下载和优化的远程图像
支持动画图像（接受格式：GIF和WebP）
请注意，只能将一个全局值用于图像质量设置。默认值为75。

图像的放置：

对于使用路径字符串的图像：（例如Src =“/profile.png”）

将图像放在公共文件夹中的文件夹中，例如公共/图像

对于使用静态导入的图像：（例如Src = {profileImage}）

您可以将图像放置在项目中的任何地方。这些图像将被优化并复制到导出文件夹。

对于远程图像：（例如src =“ https://example.com/image.jpg”）

请参阅远程图像的部分。

安装

 npm install next-image-export-optimizer

# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer

配置

基本配置

将以下内容添加到您的next.config.js 。您也可以将next.config.ts用于打字稿项目。

 // 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" ,
  } ,
} ;

在package.json中更新构建命令

{
-  "build": "next build",
+  "build": "next build && next-image-export-optimizer"
}

用<exportedImage />组件替换<image />组件：

例子：

 // 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 }
/> ;

高级配置

远程图像

对于远程图像，您必须将SRC指定为以HTTP或HTTPS在“导出图像组件”中的字符串。

 import ExportedImage from "next-image-export-optimizer" ;

< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ;

为了使构建时间在正确工作时的图像优化，您必须在项目的根目录中（其中也存储了next.config.js ）中的所有远程图像URL。该文件应导出包含远程图像URL的字符串。还支持返回这种数组的承诺。

例子：

 // 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
} ) ;

在构建时间，将下载图像或从缓存中读取图像。图像URL将用导出的图像组件中的优化图像URL替换。

您可以通过在您的next.config.js文件中设置nextImageExportOptimizer_remoteImageCacheTTL环境变量来指定在秒内播放缓存的时间。默认值为0秒（因为图像可能已更改）。

将其设置为：

60分钟
3600持续1小时
86400 1天
604800 1周
2592000 1个月
1年31536000

如果要从用户隐藏远程图像URL，则可以使用导出图组件的OverridesRC Prop。这将用Overridesrc Prop的值替换图像标签的SRC属性。

注意，如果您使用OverRidesRC Prop时尚未生成优化的图像，则图像组件不能落回原始图像URL。这将导致一个损坏的图像链接。

您可以通过将以下内容添加到您的next.config.js ：

 module . exports = {
  env : {
    // ... other env variables
    nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
  } ,
  // ... other config options
} ;

自定义Next.config.js路径

如果您的next.js项目不在运行命令的根目录处，例如，当您使用monorepo时，您可以指定next.config.js的位置作为脚本的参数：

 "export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "

自定义导出文件夹路径

通过环境变量指定输出文件夹路径：

 // next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }

或通过将论点传递给脚本：

 "export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder "

基本路径

如果要将您的应用程序部署到域的子文件夹，则可以在next.config.js文件中设置BasePath：

 module . exports = {
  basePath : "/subfolder" ,
} ;

导出图组件具有一个基本道具，您可以用它将基台传递给组件。

 import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;

< ExportedImage
  src = { testPictureStatic }
  alt = "Static Image"
  basePath = "/subfolder"
/> ;

占位符图像

如果您不希望自动生成微小的，模糊的占位符图像，请将nextImageExportOptimizer_generateAndUseBlurImages环境设置为false ，并将placeholder符设置为<exportedImage /> component empty 。

自定义导出文件夹名称

如果要重命名导出文件夹名称，请将nextImageExportOptimizer_exportFolderPath环境变量设置为所需的文件夹名称。默认值是nextImageExportOptimizer 。

图像格式

默认情况下，图像存储在WebP格式中。

如果您不想使用WebP格式，请设置nextImageExportOptimizer_storePicturesInWEBP环境变量为false 。

很高兴知道

<exportedImage />组件是Next.js的<image />组件周围的包装器。它使用自定义加载程序功能来生成用于原始图像不同分辨率的SRCSET。然后，浏览器可以根据当前视口大小加载正确的大小。
图像转换操作被优化，因为它使用哈希来确定图像是否已经被优化。这样，图像仅一次优化一次，也不是每次运行构建命令时。
如果在开发模式下尚未生成优化的图像，则<exportedImage />组件落回原始图像。在导出的静态反应应用程序中，响应式图像可作为SRCSET可用，并由浏览器动态加载。
建议使用静态导入方法，因为它会告知客户原始图像大小。当请求大于原始图像宽度的宽度时，将使用设备数组的下一个最大图像大小（在next.config.js中指定）将用于生成SRCSET属性。当您将图像指定为路径字符串时，此库将为设备中每个图像大小的原始图像的重复构成比原始图像大小更大的数组。

您可以使用unoptimized道具输出原始的，不优化的图像。例子：

 import ExportedImage from "next-image-export-optimizer" ;

< ExportedImage
  src = { testPictureStatic }
  alt = "Original, unoptimized image"
  unoptimized = { true }
/> ;

您仍然可以使用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" /> ;

动画图像：您可以使用.gif和动画.webp图像。 Next-image-Export-Optimizer将自动优化动画图像，并为不同的分辨率生成SRCSET。
如果将变量NextImageExportOpTimizer_StorePicturesInwebp设置为true，则动画映像将转换为.webp格式，该格式可以大大减少文件大小。请注意，此软件包不支持动画PNG图像。