next img
1.0.0
特徴
sharpを使用してWebPおよびフォールバック画像を最適化しますloading="lazy" ）<Picture />コンポーネントを使用した合理化された使用法デフォルトでは、次のIMGが使用するように構成されています。
768pxの1つのブレークポイントこれらのすべての設定などは、 next.config.jsまたは個々の画像インポートで変更できます。
Humaansによって開発および使用されています。
デフォルトでは、next.jsまたはwebpackは画像の最適化に役立ちません。これは、カスタム構成またはスクリプト、画像の処理、画像CDNの使用、または画像の最適化をまったく最適化しないことを意味します。 Next-IMGは、次の.JSプロジェクトに画像を追加するための代替合理化されたアプローチを提供します。 Next.jsプラグイン、カスタムWebpackローダー、Reactコンポーネントを組み合わせて、 <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' ) } />この特定の例は、次の画像を生成します。
サイズ変更および最適化された画像は、開発中にプロジェクトのルートにあるresourcesディレクトリに保存されます。つまり、画像のインポートパラメーターまたはプラグイン構成を調整すると、プロジェクトで使用されなくなった追加の画像が生成される可能性があります。その場合next-imgコマンドを実行して不要な画像を削除し、欠落している画像を作成します。
npx next-img
次に、 resourcesディレクトリをソースコントロールにチェックインして、開発と生産の構築のために後で再利用するようにします。 persistentCache: falseの設定でこの機能をオフにすることができます。この場合、画像は.nextディレクトリ内の一時キャッシュにのみ保存されます。
より多くの使用例を表示します。
デフォルトのプラグイン構成オプション：
{
// 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圧縮オプションのSharpドキュメントを参照してください。
画像をインポートするときは、クエリパラメーターを使用して最適化をカスタマイズできます。
320pxの画像を表示している場合、ここで320指定するだけで、プラグインはdensities構成に基づいて必要な大きなバージョンを生成します。1xおよび2xサイズの画像が生成されます。サイズごとに1つの画像のみを生成する場合は、 1x,2x,3xなどを作成する場合は1xを指定します。jpeg画像の品質構成オプション。注、 jpeg->webp設定は、このパラメーションの下にネストする必要があります?jpeg[webp][quality]=95png画像の品質構成オプション。注、 png->webp設定は、このparamの下でネストする必要があります?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コンポーネントが付属しています。
このコンポーネントアクセスは次のとおりです。
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 />コンポーネントを使用する必要がありますか？
画像コンポーネントはオプションです。必要に応じてインポートされた画像オブジェクトを処理できます。
画像をさらに最適化できませんでしたか？
はい、 jpg/png ImageOptimまたはその他のツールを介して渡すと、おそらく10％-20％以上の圧縮を取得できます。このプラグインは、すでに適切に最適化されたWebPを出力し、ほとんどの最新のブラウザにWebPを提供するため、 jpg/pngの追加のファイルサイズがフォールバック画像であるため、その追加のファイルサイズを絞る必要性が削除されるためです。ただし、カスタム圧縮アルゴリズムが必要であり、将来このプラグインに任意の変換をサポートする場合がある場合があります。
このプロジェクトを開発するには、 <Picture />コンポーネントのウォッチャーを実行する必要があります。
npm install
npm run watch
この例を遊び場として使用できます。
cd example
npm install
next
例でnext-imgコマンドを実行するには：
node ../bin/next-img
ロードマップ
jpg->webpおよびpng->webp変換の異なる構成を許可しますwebp/jpg/png出力をオフにすることを許可します?rawサポートを追加next buildに直接接続して、 next-imgコマンドの必要性を削除しますそして、このプロジェクトが将来どこに取られるかについてのいくつかのアイデア：
imagemin Optimizationプラグインを構成を介してパイプラインに追加することを許可します。このようにして、ユーザーは自分の画像をより薄手に最適化する方法を制御できます。?sizes=100vw,50vw,900pxブレークポイント構成に基づいてピクセルになります。これにより、設計システムと画像の相対的なサイジングに依存する動的なインポートが可能になります。require()必要性を回避します。
