next optimized images
v2.6.1
Versi 3 akan datang! Ini memperkenalkan penulisan ulang lengkap dengan banyak fitur baru dan perbaikan bug. Jika Anda ingin membantu mengembangkan dan menguji versi utama yang akan datang, silakan periksa Canary Branch untuk instruksi instalasi dan informasi lebih lanjut tentang fitur baru. (Masalah RFC)
Secara otomatis mengoptimalkan gambar yang digunakan dalam proyek Next.js ( jpeg , png , svg , webp dan gif ).
Ukuran gambar seringkali dapat dikurangi antara 20-60%, tetapi ini bukan satu-satunya hal next-optimized-images :
webp dengan cepat untuk ukuran yang lebih kecilSVG sprites untuk kinerja yang lebih baik saat menggunakan ikon yang sama beberapa kali (misalnya dalam daftar) npm install next-optimized-images
Node> = 8 diperlukan untuk versi 2. Jika Anda perlu mendukung versi node yang lebih lama, Anda masih dapat menggunakan versi 1 dari gambar yang dioptimalkan selanjutnya.
Aktifkan plugin di file konfigurasi Next.js Anda:
// 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
] ) ;Lihat bagian Konfigurasi untuk semua opsi yang tersedia.
Contoh di atas menggunakan plugin compose berikutnya untuk API yang lebih bersih saat menggunakan banyak plugin, lihat readme-nya untuk contoh yang lebih rinci. next-optimized-images juga berfungsi dengan API plugin standar:
// 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...
} ) ; Mulai dari versi 2, Anda harus menginstal paket optimasi yang Anda butuhkan di proyek Anda selain plugin ini. next-optimized-images kemudian mendeteksi semua paket yang didukung dan menggunakannya.
Jadi Anda hanya perlu menginstal paket ini dengan NPM, tidak ada langkah tambahan yang diperlukan setelah itu.
Paket optimasi berikut tersedia dan didukung:
| Paket Optimasi | Keterangan | Tautan Proyek |
|---|---|---|
imagemin-mozjpeg | Mengoptimalkan gambar jpeg. | Link |
imagemin-optipng | Mengoptimalkan gambar PNG. | Link |
imagemin-pngquant | Alternatif untuk mengoptimalkan gambar PNG. | Link |
imagemin-gifsicle | Mengoptimalkan gambar GIF. | Link |
imagemin-svgo | Mengoptimalkan gambar dan ikon SVG. | Link |
svg-sprite-loader | Menambahkan kemungkinan untuk menggunakan sprite SVG untuk kinerja yang lebih baik. Baca bagian Sprite untuk informasi lebih lanjut. | Link |
webp-loader | Mengoptimalkan gambar WebP dan dapat mengonversi gambar JPEG/PNG ke Webp on the Fly (Webp Resource Query). | Link |
lqip-loader | Menghasilkan placeholder gambar berkualitas rendah dan dapat mengekstrak warna dominan dari suatu gambar (permintaan sumber daya LQIP) | Link |
responsive-loader | Dapat mengubah ukuran gambar dengan cepat dan membuat beberapa versi untuk srcset .PENTING : Anda juga perlu menginstal jimp (implementasi simpul, lebih lambat) atau sharp (biner, lebih cepat) | Link |
image-trace-loader | Menghasilkan garis gambar SVG yang dapat digunakan sebagai placeholder saat memuat gambar asli (Trace Resource Query). | Link |
Contoh: Jika Anda memiliki gambar JPG, PNG, dan SVG di proyek Anda, Anda perlu menjalankan
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo
Untuk menginstal semua paket opsional, jalankan:
npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loaderoptimizeImagesInDev .
Bergantung pada pengaturan build/penyebaran Anda, itu juga kemungkinan untuk menginstal ini sebagai DevDependencies. Pastikan paket tersedia saat Anda membangun proyek Anda.
Karena versi 2.5, file ico juga secara opsional didukung tetapi perlu diaktifkan di konfigurasi handleImages .
Anda sekarang dapat mengimpor atau mengharuskan gambar Anda secara langsung di komponen React Anda:
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>
*/Perlu diketahui bahwa gambar hanya dapat dioptimalkan dalam produksi secara default untuk mengurangi waktu pembangunan di lingkungan pengembangan Anda.
Jika Anda menggunakan modul CSS, paket ini juga mendeteksi gambar dan mengoptimalkannya dalam nilai url() dalam file CSS/SASS/Less Anda:
.Header {
background-image : url ( ' ./images/my-image.jpg ' );
}
/* *
* Results in:
*
* .Header {
* background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
* }
*/ Jika file di bawah batas untuk inlining gambar, require(...) akan mengembalikan data base64 ( data:image/jpeg;base64,... ).
Kalau tidak, next-optimized-images akan menyalin gambar Anda ke folder statis Next.js dan require(...) mengembalikan jalur ke gambar Anda dalam kasus ini ( /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg )).
Anda dapat menggunakan kedua varian secara langsung pada gambar di atribut src atau dalam file CSS Anda di dalam nilai url() .
Jika Anda menggunakan Flow atau Eslint-Plugin-Import dan sedang mengalami beberapa masalah dengan kueri Params, lihat solusi yang diposting oleh @Eleith.
Ada beberapa kasus di mana Anda tidak ingin merujuk file atau mendapatkan data base64 tetapi Anda sebenarnya ingin memasukkan file mentah langsung ke HTML Anda. Terutama untuk SVG karena Anda tidak dapat menata mereka dengan CSS jika mereka berada dalam atribut src pada gambar.
Jadi ada opsi tambahan yang dapat Anda tentukan sebagai kueri params saat Anda mengimpor gambar.
?include : Sertakan file mentah secara langsung (berguna untuk ikon SVG)?webp : Konversi gambar JPEG/PNG ke Webp dengan cepat?inline : memaksa inlining gambar (data-URI)?url : Paksa URL untuk gambar kecil (bukan data-URI)?original : Gunakan gambar asli dan jangan mengoptimalkannya?lqip : menghasilkan placeholder gambar berkualitas rendah?lqip-colors : Ekstrak warna dominan gambar?trace : Gunakan garis besar yang dilacak sebagai penampung pemuatan?resize : Ubah Ukuran Gambar?sprite : Gunakan sprite SVG Gambar sekarang akan secara langsung dimasukkan dalam HTML Anda tanpa data-URI atau referensi ke file Anda.
Seperti dijelaskan di atas, ini berguna untuk SVG sehingga Anda dapat menata mereka dengan 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>
*/Gambar masih akan dioptimalkan, bahkan jika itu langsung termasuk dalam konten Anda (tetapi secara default hanya dalam produksi).
Membutuhkan paket optimasi opsional
webp-loader(npm install webp-loader)
Webp adalah format gambar yang lebih baik dan lebih kecil tetapi masih belum umum dan pengembang sering hanya menerima gambar JPEG/PNG.
Jika ini ?webp ditentukan, next-optimized-images secara otomatis mengonversi gambar JPEG/PNG ke format WebP baru.
Untuk browser yang belum mendukung WebP, Anda juga dapat memberikan fallback menggunakan tag <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>
*/ Anda dapat menentukan batas untuk inlining gambar yang akan memasukkannya sebagai data-URI secara langsung dalam konten Anda alih-alih merujuk file jika ukuran file di bawah batas itu.
Anda biasanya tidak ingin menentukan batas yang terlalu tinggi tetapi mungkin ada kasus di mana Anda masih ingin melapisi gambar yang lebih besar.
Dalam hal ini, Anda tidak perlu mengatur batas global ke nilai yang lebih tinggi tetapi Anda dapat menambahkan pengecualian untuk satu gambar menggunakan opsi kueri ?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.
*/ Inlining hanya akan diterapkan pada impor ini dengan tepat, jadi jika Anda mengimpor gambar untuk kedua kalinya tanpa opsi ?inline , itu kemudian akan direferensikan sebagai file jika di atas batas Anda.
Ketika Anda memiliki gambar yang lebih kecil dari batas yang Anda tentukan untuk inlining, biasanya akan digabungkan secara otomatis. Jika Anda tidak ingin file kecil tertentu diinline, Anda dapat menggunakan ?url Query Param untuk selalu mendapatkan kembali URL gambar, terlepas dari batas inline.
Jika Anda sering menggunakan opsi ini, masuk akal juga masuk akal untuk menonaktifkan inlining sepenuhnya dan menggunakan param ?inline untuk file tunggal.
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.
*/ Inlining hanya akan dinonaktifkan untuk impor ini secara tepat, jadi jika Anda mengimpor gambar untuk kedua kalinya tanpa opsi ?url , kemudian akan diinline lagi jika ada di bawah batas Anda.
Gambar tidak akan dioptimalkan dan digunakan sebagaimana adanya. Masuk akal untuk menggunakan param kueri ini jika Anda tahu gambar sudah dioptimalkan (misalnya selama ekspor) sehingga tidak dioptimalkan lagi untuk kedua kalinya.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?original' ) } />
) ; Ini juga dapat ?original&inline dengan kueri sumber daya ?url atau ?inline
Membutuhkan paket opsional
lqip-loader(npm install lqip-loader)
Saat menggunakan permintaan sumber daya ini, gambar yang sangat kecil (sekitar 10x7 piksel) dibuat. Anda kemudian dapat menampilkan gambar ini sebagai placeholder sampai gambar yang asli (besar) dimuat.
Anda biasanya akan meregangkan gambar kecil ini ke ukuran yang sama dengan gambar yang sebenarnya, seperti Medium.com . Untuk membuat gambar yang diregangkan terlihat lebih baik di Chrome, periksa solusi ini dan tambahkan filter blur ke gambar Anda.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;
/**
* Replaces the src with a tiny image in base64.
*/ Membutuhkan paket opsional
lqip-loader(npm install lqip-loader)
Kueri sumber daya ini mengembalikan array dengan nilai hex dari warna dominan dari suatu gambar. Anda juga dapat menggunakan ini sebagai placeholder sampai gambar yang sebenarnya dimuat (misalnya sebagai latar belakang) seperti pencarian gambar Google .
Jumlah warna yang dikembalikan dapat bervariasi dan tergantung pada berapa banyak warna yang dimiliki gambar Anda.
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']
*/ Membutuhkan paket opsional
image-trace-loader(npm install image-trace-loader)
Dengan permintaan sumber daya ?trace
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') mengembalikan objek yang berisi jejak ( trace ) sebagai SVG yang diinlinasikan dan gambar normal ( src ) yang juga dioptimalkan.
Jejak akan memiliki lebar dan tinggi yang persis sama dengan gambar normal Anda.
Opsi untuk loader dapat diatur dalam konfigurasi plugin.
Membutuhkan paket opsional
responsive-loader(npm install responsive-loader) dan baikjimp(node implementasi, lebih lambat) atausharp(biner, lebih cepat)
responsive-loader kueri Sumber Daya ?resize
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 >
) ; Jika saja size atau sizes Param digunakan, Param ?resize juga dapat dihilangkan (misalnya my-image.jpg?size=300 ). Tetapi diperlukan untuk semua parameter lain dari responsive-loader .
Anda juga dapat mengatur konfigurasi global di properti responsive (dalam file next.config.js ) dan menentukan, misalnya, ukuran default yang akan dihasilkan ketika Anda tidak menentukan satu untuk gambar (misalnya hanya my-image.jpg?resize ).
Membutuhkan paket optimasi opsional
imagemin-svgodansvg-sprite-loadernpm install imagemin-svgo svg-sprite-loader)
Jika Anda perlu menata atau menghidupkan SVG Anda? Sertakan mungkin pilihan yang salah, karena itu berakhir di banyak elemen DOM, terutama saat menggunakan SVG dalam daftar-item dll. Dalam hal ini, Anda dapat menggunakan ?sprite yang menggunakan SVG-SPRITE-LOADER untuk merender dan menyuntikkan sprite SVG di halaman secara otomatis.
import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< MyIcon />
</ div >
) ; Semua alat peraga yang diteruskan ke sprite yang diimpor akan diterapkan pada elemen <svg> , sehingga Anda dapat menambahkan kelas secara normal dengan <MyIcon className="icon-class" /> .
Objek svg-sprite-loader juga akan diekspos jika Anda ingin membangun komponen Anda sendiri:
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 >
) ; Untuk juga membuat ini berfungsi untuk rendering sisi server, Anda perlu menambahkan perubahan ini ke file _document.jsx Anda (baca di sini jika Anda belum memiliki file ini):
// ./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 >
) ;
}
} Plugin ini menggunakan IMG-Loader di bawah kap yang didasarkan pada Mozjpeg, Optipng, Gifsicle dan SVGO.
Opsi default untuk pengoptimal ini sudah cukup dalam banyak kasus, tetapi Anda dapat menimpa setiap opsi yang tersedia jika Anda mau.
Jenis: string[]
Default: ['jpeg', 'png', 'svg', 'webp', 'gif']
next-optimized-images mendaftarkan loader webpack untuk semua jenis file ini. Jika Anda tidak ingin salah satu dari ini ditangani oleh gambar yang dioptimalkan selanjutnya karena Anda, misalnya, memiliki plugin lain atau aturan pemuat kustom, cukup lepaskan dari array.
Harap dicatat bahwa gambar yang ditangani tidak berarti juga dioptimalkan secara otomatis. Paket optimasi yang diperlukan untuk gambar itu juga harus diinstal. Harap baca bagian Paket Optimasi untuk informasi lebih lanjut.
Jika gambar ditangani tetapi tidak dioptimalkan, itu berarti gambar asli akan digunakan dan disalin untuk build.
Karena versi 2.5, file ico juga didukung tetapi untuk kompatibilitas ke belakang, mereka perlu diaktifkan secara manual. Dengan menambahkan 'ico' ke array handleImages , plugin juga akan menangani file ico .
Jenis: number
Default: 8192
File yang lebih kecil akan digarisbawahi dengan data-URI oleh URL-LOADER. Angka ini mendefinisikan ukuran file maksimum (dalam byte) untuk gambar untuk dilapisi. Jika gambar lebih besar, itu akan disalin ke folder statis berikutnya.
Gambar akan dioptimalkan dalam kedua kasus.
Untuk benar -benar menonaktifkan gambar inlining, atur nilai ini ke -1 . Anda kemudian akan selalu mendapatkan kembali URL gambar.
Ketik: string
Default: 'images'
Nama folder di dalam /static/ di mana gambar akan disalin selama build.
Ketik: string
Default: `/_next/static/${imagesFolder}/`
Jalur publik yang harus digunakan untuk URL gambar. Ini dapat digunakan untuk melayani gambar yang dioptimalkan dari layanan penyimpanan cloud seperti S3.
Dari versi 2 ON, gambar yang dioptimalkan-selanjutnya menggunakan konfigurasi assetPrefx dari next.js secara default, tetapi Anda dapat menimpanya dengan imagesPublicPath khusus untuk gambar.
Ketik: string
Default: `static/${imagesFolder}/`
Jalur output yang harus digunakan untuk gambar. Ini dapat digunakan untuk memiliki folder output khusus.
Ketik: string
Default: '[name]-[hash].[ext]'
Nama file dari gambar yang dioptimalkan. Pastikan Anda menyimpan bagian [hash] sehingga mereka menerima nama file baru jika konten berubah.
Jenis: boolean
Default: false
Ketika gambar dikonversi ke webp dengan cepat, .webp ditambahkan ke nama file. Misalnya, test.png menjadi test.png.webp . Jika Anda hanya ingin memiliki satu ekstensi nama file seperti test.webp , Anda dapat mengatur opsi ini menjadi true .
Jenis: boolean
Default: false
Untuk pembangunan pengembangan yang lebih cepat dan HMR, gambar tidak akan dioptimalkan secara default saat berjalan dalam mode pengembangan. Dalam produksi, gambar akan selalu dioptimalkan, terlepas dari pengaturan ini.
Membutuhkan paket optimasi opsional
imagemin-mozjpeg(npm install imagemin-mozjpeg)
Jenis: object
Bawaan: {}
Mozjpeg digunakan untuk mengoptimalkan gambar JPEG. Anda dapat menentukan opsi untuk itu di sini. Opsi default mozjpeg digunakan jika Anda menghilangkan opsi ini.
Membutuhkan paket optimasi opsional
imagemin-optipng(npm install imagemin-optipng)
Jenis: object
Bawaan: {}
Optipng digunakan untuk mengoptimalkan gambar PNG secara default. Anda dapat menentukan opsi untuk itu di sini. Opsi default optipng digunakan jika Anda menghilangkan opsi ini.
Membutuhkan paket optimasi opsional
imagemin-pngquant(npm install imagemin-pngquant)
Jenis: object
Bawaan: {}
PNGQuant adalah cara alternatif untuk mengoptimalkan gambar PNG. Opsi default pngquant digunakan jika Anda menghilangkan opsi ini.
Membutuhkan paket optimasi opsional
imagemin-gifsicle(npm install imagemin-gifsicle)
Jenis: object
Bawaan:
{
interlaced : true ,
optimizationLevel : 3 ,
} Gifsicle digunakan untuk mengoptimalkan gambar GIF. Anda dapat menentukan opsi untuk itu di sini. Opsi default gifsicle digunakan jika Anda menghilangkan opsi ini.
Membutuhkan paket optimasi opsional
imagemin-svgo(npm install imagemin-svgo)
Jenis: object
Bawaan: {}
SVGO digunakan untuk mengoptimalkan gambar dan ikon SVG. Anda dapat menentukan opsi untuk itu di sini. Opsi default svgo digunakan jika Anda menghilangkan opsi ini.
Plugin SVGO tunggal dapat dinonaktifkan/diaktifkan di array plugin:
{
svgo : {
plugins : [
{ removeComments : false }
]
}
} Membutuhkan paket optimasi opsional
imagemin-svgodansvg-sprite-loadernpm install imagemin-svgo svg-sprite-loader)
Jenis: object
Bawaan:
{
runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
} Saat menggunakan opsi SVG Sprite, svg-sprite-loader digunakan secara internal. Anda dapat menimpa konfigurasi yang diteruskan ke loader ini di sini.
Membutuhkan paket optimasi opsional
webp-loader(npm install webp-loader)
Jenis: object
Bawaan: {}
Imagemin-WEBP digunakan untuk mengoptimalkan gambar WebP dan mengonversi format lain ke Webp. Anda dapat menentukan opsi untuk itu di sini. Opsi default imagemin-webp digunakan jika Anda menghilangkan opsi ini.
Membutuhkan paket opsional
image-trace-loader(npm install image-trace-loader)
Jenis: object
Bawaan: {}
Saat menggunakan image-trace-loader untuk ?trace Resource Query, Anda dapat mendefinisikan semua opsi untuk pemuatan penelusuran gambar di objek ini. Opsi default dari image-trace-loader digunakan jika Anda menghilangkan opsi ini.
Membutuhkan paket optimasi opsional
responsive-loader(npm install responsive-loader)
Jenis: object
Bawaan: {}
Konfigurasi untuk responsive-loader dapat didefinisikan di sini.
Membutuhkan paket optimasi opsional
responsive-loader(npm install responsive-loader)
Ketik: string
Default: 'img-loader'
Secara default, IMG-Loader menangani sebagian besar permintaan. Namun, jika Anda sering menggunakan responsive-loader dan tidak ingin menambahkan ?resize untuk setiap kebutuhan, Anda dapat mengatur nilai ini menjadi 'responsive-loader' .
Setelah itu, responsive-loader akan menangani semua gambar JPEG dan PNG per default, bahkan tanpa param kueri tambahan. Ketahuilah bahwa Anda tidak dapat menggunakan salah satu next-optimized-images memberikan lagi pada gambar-gambar ini karena permintaan baru saja diteruskan dan tidak dimodifikasi lagi. Semua format lain (SVG, WebP dan GIF) masih berfungsi seperti sebelumnya dengan img-loader dan karenanya memiliki semua param kueri yang tersedia.
Jenis: boolean
Default: true
Jika Anda tidak memiliki paket optimasi yang diinstal, tidak ada gambar yang akan dioptimalkan. Dalam hal ini, peringatan akan ditulis ke konsol selama build untuk memberi tahu Anda tentang kemungkinan salah konfigurasi. Jika konfigurasi ini dimaksudkan dan Anda memang tidak ingin gambar dioptimalkan, Anda dapat mengatur nilai ini menjadi false dan Anda tidak akan mendapatkan peringatan lagi.
Opsi yang ditentukan di sini adalah nilai default .
Jadi jika mereka cukup baik untuk kasus penggunaan Anda, Anda tidak harus menentukan mereka untuk memiliki file next.config.js yang lebih pendek dan lebih bersih.
// 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 ,
} ,
} ] ,
] ) ; next.config.js AndaMIT © Cyril Wanner
