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圖像。