next optimized imagesのダウンロード - next optimized imagesソースコードダウンロード

？次の最適化イメージ

バージョン3が来ています！多くの新機能とバグフィックスを備えた完全な書き直しを紹介します。今後のメジャーバージョンの開発とテストを支援したい場合は、設置手順と新機能に関する詳細については、Canary Branchをご覧ください。（RFCの問題）

next.jsプロジェクト（ jpeg 、 png 、 svg 、 webp 、 gif ）で使用される画像を自動的に最適化します。

多くの場合、画像サイズは20〜60％の間で削減される可能性がありますが、これがnext-optimized-imagesだけではありません。

ビルド中に画像を最適化することにより、画像サイズを削減します
プログレッシブ画像を提供することにより、読み込み速度を向上させます（それをサポートするフォーマット用）
HTTPリクエストと追加の往復を保存するための小さな画像をインラインします
ファイル名にコンテンツハッシュを追加して、画像がCDNレベルとブラウザで長い間キャッシュされるようにするため
長い間複数のビルドにわたって同じ画像URLがキャッシュ
ファイル固有の処理/設定にクエリパラメーションを提供します
JPEG/PNG画像は、さらに小さいサイズでその場でwebpに変換できます
同じアイコンを複数回使用する場合、 SVG spritesを使用する可能性を提供します（リストのたとえば）
画像をサイズ変更したり、異なるプレースホルダーを生成したり、怠zyな読み込み画像：低品質の画像、支配的な色、または画像の概要

インストール

 npm install next-optimized-images

ノード> = 8はバージョン2に必要です。古いノードバージョンをサポートする必要がある場合は、次の最適化イメージのバージョン1を使用できます。

next.js構成ファイルでプラグインを有効にします：

 // next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;

module . exports = withPlugins ( [
  [ optimizedImages , {
    /* config for next-optimized-images */
  } ] ,

  // your other plugins here

] ) ;

利用可能なすべてのオプションについては、構成セクションを参照してください。

ショ和バージョン2から、画像はボックスから最適化されなくなります。このプラグインに加えて、本当に必要な最適化パッケージをインストールする必要があります。これにより、使用さえしない大きな最適化ライブラリをダウンロードすることはできません。すべてのオプションの最適化パッケージのテーブルをご覧ください。

上記の例では、多くのプラグインを使用する場合、クリーナーAPIに次のコンポーズプラギンを使用しています。より詳細な例については、そのreadmeを参照してください。 next-optimized-images標準のプラグインAPIでも動作します。

 // next.config.js
const withOptimizedImages = require ( 'next-optimized-images' ) ;

module . exports = withOptimizedImages ( {
  /* config for next-optimized-images */

  // your config for other plugins or the general next.js here...
} ) ;

最適化パッケージ

バージョン2から始めて、このプラグインに加えて、プロジェクトに必要な最適化パッケージをインストールする必要があります。 next-optimized-images 、サポートされているすべてのパッケージを検出し、それらを使用します。

したがって、これらのパッケージをnpmにインストールするだけで、その後追加のステップは必要ありません。

次の最適化パッケージが利用可能でサポートされています。

最適化パッケージ	説明	プロジェクトリンク
`imagemin-mozjpeg`	JPEG画像を最適化します。	リンク
`imagemin-optipng`	PNG画像を最適化します。	リンク
`imagemin-pngquant`	PNG画像を最適化するための代替。	リンク
`imagemin-gifsicle`	GIF画像を最適化します。	リンク
`imagemin-svgo`	SVG画像とアイコンを最適化します。	リンク
`svg-sprite-loader`	SVGスプライトを使用してパフォーマンスを向上させる可能性を追加します。詳細については、Spriteセクションをお読みください。	リンク
`webp-loader`	WebP画像を最適化し、JPEG/PNG画像をその場でWebpに変換できます（WebPリソースクエリ）。	リンク
`lqip-loader`	低品質の画像プレースホルダーを生成し、画像の支配的な色を抽出できます（LQIPリソースクエリ）	リンク
`responsive-loader`	その場で画像をサイズ変更し、 `srcset`の複数のバージョンを作成できます。重要： `jimp` （ノード実装、遅い）または`sharp` （バイナリ、より速い）のいずれかをさらにインストールする必要があります	リンク
`image-trace-loader`	元の画像をロードしながらプレースホルダーとして使用できるSVG画像のアウトラインを生成します（トレースリソースクエリ）。	リンク

例：プロジェクトにJPG、PNG、およびSVG画像がある場合は、実行する必要があります
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo

すべてのオプションのパッケージをインストールするには、実行します。

npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loader

ショ和デフォルトでは、画像は開発ビルドではなく、生産ビルドにのみ最適化されていることに注意してください。ただし、これはoptimizeImagesInDev Configによって変更される可能性があります。

ビルド/展開のセットアップに応じて、これらを開発者としてインストールすることも可能です。プロジェクトを構築するときにパッケージが利用可能であることを確認してください。

バージョン2.5以降、 icoファイルもオプションでサポートされていますが、 handleImages構成で有効にする必要があります。

使用法

これで、Reactコンポーネントに画像を直接インポートまたは要求することができます。

 import React from 'react' ;

export default ( ) => (
  < div >
    < img src = { require ( './images/my-image.jpg' ) } />
    < img src = { require ( './images/my-small-image.png' ) } />
    < img src = { require ( './images/my-icon.svg' ) } />
  </ div >
) ;

/**
 * Results in:
 *
 * <div>
 *   <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
 *   <img src="data:image/png;base64,..." />
 *   <img src="/_next/static/images/my-icon-572812a2b04ed76f93f05bf57563c35d.svg" />
 * </div>
 */

開発環境でのビルド時間を短縮するために、デフォルトでのみ画像が生産で最適化されることに注意してください。

CSSモジュールを使用している場合、このパッケージは画像を検出し、css/sass/lessファイルのurl()値で最適化しました。

 .Header {
  background-image : url ( ' ./images/my-image.jpg ' );
}

/* *
 * Results in:
 *
 * .Header {
 *   background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
 * }
 */

ファイルが画像を挿入するための制限を下回っている場合、 require(...) base64 data-uri（ data:image/jpeg;base64,... ）を返します。

それ以外の場合、 next-optimized-images require(...) next.jsの静的フォルダーにコピーし、この場合の画像へのパスを返します（ /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg ）。

両方のバリアントを、 src属性の画像またはurl()値内のCSSファイルで直接使用できます。

クエリパラメーション

FlowまたはEslint-Plugin-Importを使用しており、Query Paramsでいくつかの問題が発生している場合は、 @Eleithが投稿したソリューションをご覧ください。

ファイルを参照したり、base64 Data-URIを取得したくない場合もありますが、実際に生ファイルをHTMLに直接含めたい場合があります。特にSVGは、画像上のsrc属性にある場合、CSSでスタイリングできないためです。

そのため、画像をインポートするときにクエリパラメーションとして指定できる追加のオプションがあります。

?include ：rawファイルを直接含める（SVGアイコンに役立つ）
?webp ：JPEG/PNG画像をその場でWebpに変換します
?inline ：画像のインラインを強制する（data-uri）
?url ：小さな画像のためにURLを強制します（data-uriの代わりに）
?original ：元の画像を使用して、最適化しないでください
?lqip ：低品質の画像プレースホルダーを生成します
?lqip-colors ：画像の支配的な色を抽出します
?trace ：プレースホルダーとしてトレースされたアウトラインを使用します
?resize ：画像のサイズを変更します
?sprite ：SVGスプライトを使用します

？含む

画像は、データ-URIまたはファイルへの参照なしでHTMLに直接含めるようになります。

上記のように、これはSVGに役立つため、CSSでスタイリングできます。

 import React from 'react' ;

export default ( ) => (
  < div dangerouslySetInnerHTML = { { __html : require ( './images/my-icon.svg?include' ) } } />
) ;

/**
 * Results in:
 *
 * <div>
 *   <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
 *     <path d="M8 0C3.589 0 0 3.589 0 8s3.589 ..." style="filled-opacity:1" fill-rule="evenodd">
 *     </path>
 *   </svg>
 * </div>
 */

画像は、コンテンツに直接含まれている場合でも（ただし、デフォルトでは制作でのみ）、最適化されます。

？webp

オプションの最適化パッケージwebp-loader （ npm install webp-loader ）が必要です

WebPはさらに優れた、より小さな画像形式ですが、まだそれほど一般的ではなく、開発者はJPEG/PNG画像のみを受信することがよくあります。

この?webpクエリパラメーターが指定されている場合、 next-optimized-images JPEG/PNGイメージを自動的に新しいWebP形式に変換します。

まだWebpをサポートしていないブラウザの場合、 <picture>タグを使用してフォールバックを提供することもできます。

 import React from 'react' ;

export default ( ) => (
  < picture >
    < source srcSet = { require ( './images/my-image.jpg?webp' ) } type = "image/webp" />
    < source srcSet = { require ( './images/my-image.jpg' ) } type = "image/jpeg" />
    < img src = { require ( './images/my-image.jpg' ) } />
  </ picture >
) ;

/**
 * Results in:
 * <picture>
 *   <source srcset="/_next/static/images/my-image-d6816ecc28862cf6f725b29b1d6aab5e.jpg.webp" type="image/webp" />
 *   <source srcset="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" type="image/jpeg" />
 *   <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
 * </picture>
 */

？列をなして

ファイルサイズがその制限を下回っている場合、ファイルを参照する代わりに、コンテンツに直接データ-URIとしてそれを含める画像をインランスするための制限を指定できます。

通常、あまりにも高い制限を指定したくありませんが、大きな画像をインラインにしたい場合がある場合があります。

この場合、グローバル制限をより高い値に設定する必要はありませんが、 ?inlineクエリオプションを使用して単一の画像の例外を追加できます。

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?inline' ) } />
) ;

/**
 * Results in:
 *
 * <img src="data:image/png;base64,..." />
 *
 * Even if the image size is above the defined limit.
 */

インラインは、このインポートに正確に適用されるため、 ?inlineオプションなしで画像を2回インポートする場合、制限を超えている場合は通常、ファイルとして参照されます。

？url

インライン化の定義された制限よりも小さい画像がある場合、通常は自動的にインラインドされます。特定の小さなファイルをインラインで取得したくない場合は、インラインの制限に関係なく、 ?urlクエリParamを使用して常に画像URLを戻すことができます。

このオプションをよく使用している場合、インラインを完全に無効にし、単一のファイルに?inlineパラメーションを使用することも理にかなっています。

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?url' ) } />
) ;

/**
 * Results in:
 *
 * <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
 *
 * Even if the image size is below the defined inlining limit.
 */

インラインは、まさにこのインポートでのみ無効になります。そのため、 ?urlオプションなしで画像を2回インポートすると、制限以下である場合に再度インラインになります。

？オリジナル

画像は最適化され、そのまま使用されません。画像が既に最適化されていることがわかっている場合（エクスポート中に）このクエリParamを使用することは理にかなっているため、再度最適化されません。

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?original' ) } />
) ;

これは、 ?urlまたは?inlineリソースクエリ（例?original&inline ）と組み合わせることもできます。

？lqip

オプションのパッケージlqip-loader （ npm install lqip-loader ）が必要です

このリソースクエリを使用すると、非常に小さな（約10x7ピクセル）画像が作成されます。その後、実際の（大きな）画像がロードされるまで、この画像をプレースホルダーとして表示できます。

通常、この小さな画像は、 medium.comのように、実際の画像と同じサイズに伸ばします。クロムで伸びた画像の見栄えを良くするには、このソリューションをチェックして、画像にぼやけたフィルターを追加します。

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;

/**
 * Replaces the src with a tiny image in base64.
 */

？lqip-colors

オプションのパッケージlqip-loader （ npm install lqip-loader ）が必要です

このリソースクエリは、画像の支配的な色の六角値を持つ配列を返します。 Google Picture Searchのように（例えば、バックグラウンドとして）ロードされるまで、これをプレースホルダーとして使用することもできます。

返される色の数はさまざまであり、画像の色の数に依存します。

 import React from 'react' ;

export default ( ) => (
  < div style = { { backgroundColor : require ( './images/my-image.jpg?lqip-colors' ) [ 0 ] } } > ... </ div >
) ;

/**
 * require('./images/my-image.jpg?lqip-colors')
 *
 * returns for example
 *
 * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']
 */

？トレース

オプションのパッケージimage-trace-loader （ npm install image-trace-loader ）が必要です

?traceリソースクエリを使用すると、元の画像をロードしながらプレースホルダーとして使用できるSVG画像のアウトラインを生成できます。

 import React from 'react' ;
import MyImage from './images/my-image.jpg?trace' ;

export default ( ) => (
  < div >
    < img src = { MyImage . trace } />   { /* <-- SVG trace */ }
    < img src = { MyImage . src } />     { /* <-- Normal image which you want to lazy load */ }
  </ div >
) ;

/**
 * Results in:
 *
 * <div>
 *  <img src="data:image/svg+xml,...">
 *  <img src="/_next/static/images/image-trace-85bf5c58ce3d91fbbf54aa03c44ab747.jpg">
 * </div>
 */

require('./images/my-image.jpg?trace')トレース（ trace ）を含むオブジェクトをインラインドSVGおよび通常の画像（ src ）として返します。

トレースは、通常の画像とまったく同じ幅と高さを持ちます。

ローダーのオプションは、プラグイン構成で設定できます。

？サイズ

オプションのパッケージresponsive-loader （ npm install responsive-loader ）とjimp （ノード実装、遅い）またはsharp （バイナリ、高速）が必要です

リソースクエリ?resize後、 responsive-loaderの他のクエリを追加して、画像のサイズを変更してソースセット全体を作成できます。

 import React from 'react' ;

const oneSize = require ( './images/my-image.jpg?resize&size=300' ) ;
const multipleSizes = require ( './images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000' ) ;

export default ( ) => (
  < div >
    { /* Single image: */ }
    < img src = { oneSize . src } />

    { /* Source set with multiple sizes: */ }
    < img srcSet = { multipleSizes . srcSet } src = { multipleSizes . src } />
  </ div >
) ;

sizeまたはsizes PARAMのみが使用される場合、 ?resize 」も省略できます（例： my-image.jpg?size=300 ）。ただし、 responsive-loaderの他のすべてのパラメーターには必要です。

また、 responsiveプロパティ（ next.config.jsファイル）にグローバル構成を設定し、たとえば、画像用に指定しないときに生成されるデフォルトサイズ（ my-image.jpg?resizeなど）を定義することもできます。

？スプライト

オプションの最適化パッケージimagemin-svgoおよびsvg-sprite-loader （ npm install imagemin-svgo svg-sprite-loader ）が必要です。

SVGをスタイリングまたはアニメーション化する必要がある場合は、特にリスト項目などでSVGを使用する場合に多くのDOM要素になるため、間違ったオプションを含める可能性があります。その場合、SVG- ?sprite -Roaderを使用してSVG Spriteを使用してページのSVG Spriteを自動的に使用することができます。

 import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;

export default ( ) => (
  < div >
    my page..
    < MyIcon />
  </ div >
) ;

輸入されたスプライトに渡されたすべての小道具は<svg>要素に適用されるため、 <MyIcon className="icon-class" />で通常クラスを追加できます。

独自のコンポーネントを構築する場合、 svg-sprite-loaderオブジェクトも公開されます。

 import React from 'react' ;
import icon from './icons/icon.svg?sprite' ;

export default ( ) => (
  < div >
    my page..
    < svg viewBox = { icon . viewBox } >
      < use xlinkHref = { `# ${ icon . id } ` } />
    </ svg >
  </ div >
) ;

サーバー側のレンダリングにもこの作業を行うには、 _document.jsxファイルにこれらの変更を追加する必要があります（このファイルをまだ持っていない場合は、こちらをご覧ください）：

 // ./pages/_document.js
import Document , { Head , Main , NextScript } from 'next/document' ;
import sprite from 'svg-sprite-loader/runtime/sprite.build' ;

export default class MyDocument extends Document {
  static async getInitialProps ( ctx ) {
    const initialProps = await Document . getInitialProps ( ctx ) ;
    const spriteContent = sprite . stringify ( ) ;

    return {
      spriteContent ,
      ... initialProps ,
    } ;
  }

  render ( ) {
    return (
      < html >
        < Head > { /* your head if needed */ } </ Head >
        < body >
          < div dangerouslySetInnerHTML = { { __html : this . props . spriteContent } } />
          < Main />
          < NextScript />
        </ body >
      </ html >
    ) ;
  }
}

構成

このプラグインは、Mozjpeg、Optipng、Gifsicle、およびSVGOに基づいたHoodの下でIMG-Roaderを使用しています。

これらのオプティマイザーのデフォルトオプションは、ほとんどの場合十分である必要がありますが、必要に応じて利用可能なすべてのオプションを上書きすることができます。

ハンドルイメージ

タイプ： string[]
デフォルト： ['jpeg', 'png', 'svg', 'webp', 'gif']

next-optimized-imagesこれらすべてのファイルタイプのWebpackローダーを登録します。たとえば、別のプラグインまたはカスタムローダールールがあるため、次の最適化されたイメージで処理されない場合は、配列から削除するだけです。

処理されている画像は、自動的に最適化されるという意味ではありません。その画像に必要な最適化パッケージもインストールする必要があります。詳細については、最適化パッケージセクションをお読みください。

画像が処理され、最適化されていない場合、元の画像がビルドに使用され、コピーされることを意味します。

バージョン2.5であるため、 icoファイルもサポートされていますが、後方互換性のために手動で有効にする必要があります。 handleImagesアレイに'ico'を追加することにより、プラグインはicoファイルも処理します。

inlineimagelimit

タイプ： number
デフォルト： 8192

小さいファイルは、URLローダーによるデータ-URIに絡み合っています。この数値は、画像がインラインになるための最大ファイルサイズ（バイト単位）を定義します。画像が大きい場合、次の静的フォルダーにコピーされます。

どちらの場合も画像が最適化されます。

画像のインラインを完全に無効にするには、この値を-1に設定します。その後、常に画像URLを取り戻します。

ImagesFolder

タイプ： string
デフォルト： 'images'

内部/static/のフォルダー名は、ビルド中に画像がコピーされます。

ImagesPublicPath

タイプ： string
デフォルト： `/_next/static/${imagesFolder}/`

画像URLに使用する必要があるパブリックパス。これは、S3のようなクラウドストレージサービスから最適化された画像を提供するために使用できます。

バージョン2から、Next-Optimized-Imagesはデフォルトでnext.jsのassetPrefx configを使用しますが、画像用に特にimagesPublicPathで上書きすることができます。

ImagesOutputPath

タイプ： string
デフォルト： `static/${imagesFolder}/`

画像に使用する必要がある出力パス。これを使用して、カスタム出力フォルダーを持つことができます。

ImagesName

タイプ： string
デフォルト： '[name]-[hash].[ext]'

最適化された画像のファイル名。コンテンツが変更された場合、 [hash]パーツを保持していることを確認してください。

remoriginalextension

タイプ： boolean
デフォルト： false

画像がその場でWebPに変換されると、 .webpはファイル名に追加されました。たとえば、 test.png test.png.webpになりました。 test.webpような1つのファイル名拡張機能のみが必要な場合は、このオプションをtrueに設定できます。

OptimizeImagesIndev

タイプ： boolean
デフォルト： false

開発のビルドとHMRを高速化するために、開発モードで実行すると、デフォルトで画像が最適化されません。制作では、この設定に関係なく、画像は常に最適化されます。

Mozjpeg

オプションの最適化パッケージimagemin-mozjpeg （ npm install imagemin-mozjpeg ）が必要です

タイプ： object
デフォルト： {}

Mozjpegは、JPEG画像の最適化に使用されます。ここでオプションを指定できます。このオプションを省略した場合、 mozjpegのデフォルトオプションが使用されます。

Optipng

オプションの最適化パッケージimagemin-optipng （ npm install imagemin-optipng ）が必要です

タイプ： object
デフォルト： {}

OptIPNGは、デフォルトでPNG画像を最適化するために使用されます。ここでオプションを指定できます。このオプションを省略した場合、 optipngのデフォルトオプションが使用されます。

pngquant

オプションの最適化パッケージimagemin-pngquant （ npm install imagemin-pngquant ）が必要です

タイプ： object
デフォルト： {}

PNGQUANTは、PNG画像を最適化するための代替方法です。このオプションを省略した場合、 pngquantのデフォルトオプションが使用されます。

gifsicle

オプションの最適化パッケージimagemin-gifsicle （ npm install imagemin-gifsicle ）が必要です

タイプ： object
デフォルト：

 {
    interlaced : true ,
    optimizationLevel : 3 ,
}

GIFSICLEは、GIF画像を最適化するために使用されます。ここでオプションを指定できます。このオプションを省略すると、 gifsicleのデフォルトオプションが使用されます。

SVGO

オプションの最適化パッケージimagemin-svgo （ npm install imagemin-svgo ）が必要です

タイプ： object
デフォルト： {}

SVGOは、SVG画像とアイコンを最適化するために使用されます。ここでオプションを指定できます。このオプションを省略した場合、 svgoのデフォルトオプションが使用されます。

単一のSVGOプラグインは、プラグインアレイで無効化/有効になります：

 {
  svgo : {
    plugins : [
      { removeComments : false }
    ]
  }
}

svgspriteloader

オプションの最適化パッケージimagemin-svgoおよびsvg-sprite-loader （ npm install imagemin-svgo svg-sprite-loader ）が必要です。

タイプ： object
デフォルト：

 {
  runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
}

SVG Spriteオプションを使用する場合、 svg-sprite-loader内部で使用されます。ここでこのローダーに渡された構成を上書きすることができます。

webp

オプションの最適化パッケージwebp-loader （ npm install webp-loader ）が必要です

タイプ： object
デフォルト： {}

ImageMin-WEBPは、WebP画像を最適化し、他の形式をWebPに変換するために使用されます。ここでオプションを指定できます。このオプションを省略した場合、 imagemin-webpのデフォルトオプションが使用されます。

Imagetrace

オプションのパッケージimage-trace-loader （ npm install image-trace-loader ）が必要です

タイプ： object
デフォルト： {}

?traceリソースクエリにimage-trace-loaderを使用する場合、このオブジェクトのImage Traceローダーのすべてのオプションを定義できます。このオプションを省略した場合、 image-trace-loaderのデフォルトオプションが使用されます。

応答性

オプションの最適化パッケージresponsive-loader （ npm install responsive-loader ）が必要です

タイプ： object
デフォルト： {}

responsive-loaderの構成はここで定義できます。

defaultimageloader

オプションの最適化パッケージresponsive-loader （ npm install responsive-loader ）が必要です

タイプ： string
デフォルト： 'img-loader'

デフォルトでは、IMGローダーはほとんどのリクエストを処理します。ただし、 responsive-loader多く使用していて、すべての要件に?resize Query Paramを追加したくない場合は、この値を'responsive-loader'に設定できます。

その後、 responsive-loader追加のクエリParamがなくても、デフォルトごとのすべてのJPEGおよびPNG画像を処理します。リクエストが転送され、変更されなくなったため、これらの画像ではnext-optimized-imagesを提供するクエリParamsを使用できないことに注意してください。他のすべての形式（SVG、WebP、およびGIF）は、 img-loaderの場合と同じように機能しているため、すべてのクエリパラメーションを使用できます。

OptimizeImages

タイプ： boolean
デフォルト： true

最適化パッケージがインストールされていない場合、画像は最適化されません。この場合、ビルド中にコンソールに警告が書き込まれ、誤解の可能性についてお知らせします。この構成が意図されており、実際に画像を最適化したくない場合は、この値をfalseに設定できれば、警告が表示されなくなります。

例

ここで指定されているオプションは、デフォルト値です。

したがって、それらがあなたの使用ケースに十分next.config.jsある場合、それらを指定する必要はありません。

 // next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;

module . exports = withPlugins ( [
  [ optimizedImages , {
    // these are the default values so you don't have to provide them if they are good enough for your use-case.
    // but you can overwrite them here with any valid value you want.
    inlineImageLimit : 8192 ,
    imagesFolder : 'images' ,
    imagesName : '[name]-[hash].[ext]' ,
    handleImages : [ 'jpeg' , 'png' , 'svg' , 'webp' , 'gif' ] ,
    removeOriginalExtension : false ,
    optimizeImages : true ,
    optimizeImagesInDev : false ,
    mozjpeg : {
      quality : 80 ,
    } ,
    optipng : {
      optimizationLevel : 3 ,
    } ,
    pngquant : false ,
    gifsicle : {
      interlaced : true ,
      optimizationLevel : 3 ,
    } ,
    svgo : {
      // enable/disable svgo plugins here
    } ,
    webp : {
      preset : 'default' ,
      quality : 75 ,
    } ,
  } ] ,
] ) ;