next img

Next.js插件，用於嵌入優化的圖像。

特徵

• 導入PNG/JPG圖像
• 輸出到WebP格式
• 調整大小到多個屏幕尺寸和密度
• 使用sharp優化WebP和後備圖像
• 帶有支撐轉發的現代瀏覽器中的懶負載（ loading="lazy" ）
• 防止使用自動寬度/高度屬性進行佈局變化
• 用內置的<Picture />組件簡化了用法
• 具有不同圖像的藝術方向，用於不同的斷點
• 使用持續緩存快速部署和開發工作流程

默認情況下， Next-IMG配置為使用：

• 768px的1斷點
• 2個像素密度1倍，2倍
• 輸出原始和WebP格式

所有這些設置和更多設置都可以在您的next.config.js或單個圖像導入中更改。

由Humaans開發和使用。

動機

默認情況下，Next.js或WebPack對優化圖像無濟於事。這意味著使用圖像CDN或根本不優化圖像的自定義配置或腳本，手工處理圖像。 Next-IMG提供了為您的下一個項目添加圖像的替代精簡方法。它結合了next.js插件，自定義的webpack加載程序和一個反應組件，以最佳方式製作圖像的方式幾乎與鍵入<img src='foo.png' />一樣容易。

簡而言之，它需要以下內容：

 < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } alt = 'Jellyfish' />

導入，調整，優化，緩存（持續在git repo中），並輸出以下HTML：

 < picture >
  < source
    type =" image/webp "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    sizes =" (max-width: 768px) 375px, 800px "
  />
  < source
    type =" image/jpeg "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    sizes =" (max-width: 768px) 375px, 800px "
  />

  < img
    src =" /_next/static/images/[email protected] "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    width =" 375 "
    height =" 250 "
    alt =" Jellyfish "
  />
</ picture >

查看示例。

用法

安裝軟件包

 npm install next-img

將插件添加到您的next.config.js ：

 const withImg = require ( 'next-img/plugin' )

module . exports = withImg ( {
  nextImg : {
    breakpoints : [ 768 ] ,
  } ,
} )

在您的應用程序中，導入圖像並使用<Picture />組件嵌入：

 import { Picture } from 'next-img'
import jelly from './images/jelly.jpg?sizes=375,800'

export default ( ) => < Picture src = { jelly } />

或內聯：

 import { Picture } from 'next-img'

export default ( ) => < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } />

此特定示例將生成以下圖像：

• 375px寬的圖像顯示在低像素密度的小屏幕上顯示
• 750px寬的圖像可在高像素密度為2倍或以上的小屏幕上顯示
• 800px寬的圖像可在低像素密度低1倍的大屏幕上顯示
• 1600px寬的圖像顯示在高像素密度為2倍以上的大屏幕上顯示

調整大小的圖像將在開發過程中將項目目錄保存到resources目錄中。這意味著，如果您調整圖像導入參數或插件配置，則可能會生成項目不再使用的額外圖像。在這種情況下，執行next-img命令以刪除所有不必要的圖像並構建任何缺失的圖像：

 npx next-img

現在，請訪問resources目錄到您的源控件，以便以後重複使用開發和生產構建。您可以通過設置persistentCache: false在插件配置中關閉此功能，在這種情況下，圖像將僅存儲在.next Directory內部的臨時緩存中。

查看更多用法示例。

配置

默認插件配置選項：

 {
  // global settings for images, can be overriden per image
  breakpoints : [ 768 ] ,
  densities : [ '1x' , '2x' ] ,

  // output image quality configuration
  jpeg : {
    quality : 80 ,
    webp : {
      quality : 90 ,
      reductionEffort : 6 ,
    } ,
  } ,

  png : {
    quality : 100 ,
    webp : {
      reductionEffort : 6 ,
      lossless : true ,
    } ,
  } ,

  // the directory within Next.js build output
  imagesDir : 'images' ,
  // the output image name template
  imagesName : '[name]-[size]@[density]-[hash].[ext]' ,
  // advanced - customise the image public path
  imagesPublicPath : null ,
  // advanced - customise the image output path
  imagesOutputPath : null ,

  // persistent cache allows for fast deploy and
  // development workflow by avoiding reprocessing
  // images that were previously processed
  persistentCache : true ,
  persistentCacheDir : 'resources' ,

  // this directory within .next is used in case persistent cache is turned off
  cacheDir : path . join ( 'cache' , 'next-img' )
}

請參閱jpeg/png/webp壓縮選項的尖銳文檔。

導入參數

導入圖像時，您可以使用查詢參數自定義優化：

• 尺寸- 您將顯示圖像的逗號分隔尺寸列表。請注意，您無需考慮此處的像素密度。也就是說，如果您在網站上顯示320px寬的圖像，只需在此處指定320 ，該插件將根據densities配置生成任何必要的較大版本。
• 密度- 逗號分離的密度列表，您需要每個圖像大小要生成。默認情況下，將產生1x和2x的圖像尺寸，如果您只想產生每個大小的圖像，或者1x,2x,3x等，則指定1x 。如果您想要更多的密度。
• JPEG- jpeg圖像的質量配置選項。請注意， jpeg->webp設置需要嵌套在此參數下，例如?jpeg[webp][quality]=95
• PNG- png圖像的質量配置選項。請注意， png->webp設置需要嵌套在此參數下，例如?png[webp][lossless]=false&png[webp][nearLossless]=true

示例：

 import img1 from './images/img.jpg'
import img2 from './images/img.jpg?sizes=375,900'
import img3 from './images/img.jpg?sizes=375,900&densities=1x'
import img4 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x'
import img5 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x&jpeg[quality]=70&jpeg[webp][quality]=70' 

圖片道具

next-img帶有一個React組件，使嵌入圖像更容易。

這是此組件訪問的道具：

• SRC導入圖像或導入圖像的數組。
• 斷點- 覆蓋全局配置的斷點列表。
• 尺寸- 自定義HTML尺寸屬性，默認情況下，大小屬性是根據可用圖像和斷點生成的。
• 其餘的道具和參考將轉發到img標籤。這允許使用諸如alt ， loading="lazy"等屬性。

關於如何生成尺寸/媒體屬性的註釋

當通過src Prop提供單個圖像時，每個大小將配置為使用HTML sizes attribute屬性每個可用的每個斷點顯示。

例如，使用斷點[375, 768]和?sizes=100,400,800 <Picture>組件將應用以下sizes屬性：

 (max-width: 375px) 100px,
(max-width: 768px) 400px,
                   800px

當通過src Prop提供圖像數組時，將使用HTML media attribute配置每個圖像以顯示每個可用的每個斷點。

例如，使用斷點[375, 768]和src=[img1, img2, img3] <Picture>組件將應用以下media屬性：

 < picture >
  < source media =" (max-width: 480px) " sizes =" {{img1 width}} " />
  < source media =" (max-width: 768px) " sizes =" {{img2 width}} " />
  < source sizes =" {{img3 width}} " />
  < img ... />
</ picture > 

常問問題

我必須使用<Picture />組件嗎？

圖片組件是可選的。您可以根據需要處理導入的圖像對象。

圖像不能進一步優化嗎？

是的，如果通過ImageOptim或其他工具通過jpg/png ，您可能會獲得〜10％-20％或更多的壓縮。事實是，由於此插件已輸出已經優化的WebP，並且您將向大多數現代瀏覽器提供WebP，因此由於它們是後備圖像，因此消除了擠壓jpg/png的額外文件大小的需求。但是，在某些情況下可能需要自定義壓縮算法，我們可能會增加對將來該插件中任意轉換的支持。

發展

要開發此項目，您需要為<Picture />組件運行一個觀察者：

 npm install
npm run watch

您可以將示例作為操場：

 cd example
npm install
next

在示例dir中執行下next-img命令：

 node ../bin/next-img

未來

路線圖

• 允許jpg->webp和png->webp轉換允許其他配置
• 允許關閉webp/jpg/png輸出
• 添加沒有任何方式處理圖像的?raw查詢支持
• 通過直接插入下next build來刪除next-img命令的需求
• 除了HTML圖像外，還增加了對CSS圖像的支持
• 內聯小圖像

以及對將來可以採取該項目的一些想法：

• 允許通過Config將imagemin優化插件添加到管道中。這樣，用戶可以控制如何更加格拉努阿。
• 根據斷點配置，將相對尺寸的相對大小?sizes=100vw,50vw,900px轉換為像素，這將允許動態類型的導入依賴於您的設計系統和圖像的相對尺寸，例如，如果CSS表示“ 50VW”，則您無需手動完成該計算。
• 調試模式將圖像大小打印到圖像本身中，因此您可以看到瀏覽器內部圖像中右圖顯示的內容（或在運行時使用JS疊加它們）。
• 源代碼解析器分析圖像代碼以避免需要require()它們。
• 優化文件讀/寫入/哈希操作以提高性能。
• 一個木偶腳本，可在所有預定義的斷點中渲染網站，並自動分析所需的所有圖像尺寸。
• 添加對GIF和WebP作為源圖像的支持。