next image export optimizer
v1.18.0
Gunakan selanjutnya.js canggih <gambar/> komponen dengan fungsionalitas ekspor statis. Mengoptimalkan semua gambar statis dalam langkah tambahan setelah ekspor statis berikutnya.js.
Untuk gambar menggunakan string path: (misalnya src = "/profile.png")
Tempatkan gambar di folder di dalam folder publik seperti publik/gambar
Untuk gambar menggunakan impor statis: (misalnya src = {ProfileImage})
Anda dapat menempatkan gambar di mana saja di proyek Anda. Gambar akan dioptimalkan dan disalin ke folder ekspor.
Untuk gambar jarak jauh: (misalnya src = "https://example.com/image.jpg")
Silakan merujuk ke bagian pada gambar jarak jauh.
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
Tambahkan yang berikut ke next.config.js Anda. Anda juga dapat menggunakan next.config.ts untuk proyek -proyek TypeScript.:
// 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" ,
} ,
} ; Perbarui perintah build di package.json
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}Ganti komponen <Image /> dengan komponen <ExportedImage /> :
Contoh:
// 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 }
/> ; Untuk gambar jarak jauh, Anda harus menentukan SRC sebagai string yang dimulai dengan HTTP atau HTTPS dalam komponen ExporedImage.
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; Agar pengoptimalan gambar pada waktu membangun untuk bekerja dengan benar, Anda harus menentukan semua URL gambar jarak jauh dalam file yang disebut RemoteOptimizationImages.js di direktori root proyek Anda (di mana next.config.js juga disimpan). File harus mengekspor array string yang berisi URL dari gambar jarak jauh. Mengembalikan janji array semacam itu juga didukung.
Contoh:
// 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
} ) ;Pada waktu membangun, gambar akan diunduh atau dibaca dari cache. URL gambar akan diganti dengan URL gambar yang dioptimalkan dalam komponen gambar yang diekspor.
Anda dapat menentukan waktu untuk hidup cache dalam hitungan detik dengan mengatur variabel lingkungan nextImageExportOptimizer_remoteImageCacheTTL di file next.config.js Anda. Nilai default adalah 0 detik (karena gambar mungkin telah berubah).
Atur ke:
Jika Anda ingin menyembunyikan URL gambar jarak jauh dari pengguna, Anda dapat menggunakan prop overridesrc dari komponen ExporedImage. Ini akan menggantikan atribut SRC dari tag gambar dengan nilai prop overridesrc.
Berhati -hatilah bahwa komponen gambar tidak dapat kembali ke URL gambar asli jika gambar yang dioptimalkan belum dihasilkan saat Anda menggunakan prop overridesrc. Ini akan menghasilkan tautan gambar yang rusak.
Anda dapat menyesuaikan nama file untuk gambar yang dioptimalkan dari jarak jauh dengan menambahkan yang berikut ini ke next.config.js Anda:
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; Jika proyek Next.js Anda tidak ada di direktori root di mana Anda menjalankan perintah, misalnya ketika Anda menggunakan monorepo, Anda dapat menentukan lokasi next.config.js sebagai argumen untuk skrip:
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "Tentukan jalur folder output baik melalui variabel lingkungan:
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }Atau dengan meneruskan argumen ke skrip:
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder " Jika Anda ingin menggunakan aplikasi Anda ke subfolder domain Anda, Anda dapat mengatur basepath di file next.config.js :
module . exports = {
basePath : "/subfolder" ,
} ;Komponen Eksporedimage memiliki prop basepath yang dapat Anda gunakan untuk meneruskan Basepath ke komponen.
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ; Jika Anda tidak menginginkan generasi otomatis gambar placeholder kecil, buram, atur variabel lingkungan nextImageExportOptimizer_generateAndUseBlurImages ke false dan atur prop placeholder dari komponen <ExporedImage /> menjadi empty .
Jika Anda ingin mengganti nama nama folder Ekspor, atur variabel lingkungan nextImageExportOptimizer_exportFolderPath ke nama folder yang diinginkan. Standarnya adalah nextImageExportOptimizer .
Secara default, gambar disimpan dalam format webp.
Jika Anda tidak ingin menggunakan format WebP, atur variabel lingkungan nextImageExportOptimizer_storePicturesInWEBP ke false .
Komponen <ExporedImage /> adalah pembungkus di sekitar komponen <gambar /> dari Next.js. Ini menggunakan fitur loader khusus untuk menghasilkan SRCSET untuk resolusi yang berbeda dari gambar asli. Browser kemudian dapat memuat ukuran yang benar berdasarkan ukuran viewport saat ini.
Operasi transformasi gambar dioptimalkan karena menggunakan hash untuk menentukan apakah suatu gambar telah dioptimalkan atau tidak. Dengan cara ini, gambar hanya dioptimalkan sekali dan tidak setiap kali perintah build dijalankan.
Komponen <ExporedImage /> kembali ke gambar asli jika gambar yang dioptimalkan belum dihasilkan dalam mode pengembangan. Dalam aplikasi reaksi statis yang diekspor, gambar responsif tersedia sebagai srcset dan secara dinamis dimuat oleh browser.
Metode impor statis direkomendasikan karena memberi tahu klien tentang ukuran gambar asli. Ketika lebar lebih besar dari lebar gambar asli diminta, ukuran gambar terbesar berikutnya dalam array devicesizes (ditentukan di next.config.js ) akan digunakan untuk generasi atribut SRCSET. Saat Anda menentukan gambar sebagai string path, perpustakaan ini akan membuat duplikat gambar asli untuk setiap ukuran gambar dalam array devicesizes yang lebih besar dari ukuran gambar asli.
Anda dapat mengeluarkan gambar asli yang tidak dioptimalkan menggunakan prop unoptimized . Contoh:
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ; Anda masih dapat menggunakan komponen gambar lama 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" /> ;Gambar Animasi: Anda dapat menggunakan gambar .GIF dan animasi .webp. Optimizer Export-Image-Next-Image akan secara otomatis mengoptimalkan gambar animasi dan menghasilkan SRCSET untuk resolusi yang berbeda.
Jika Anda mengatur variabel nextimageExportoptimizer_storepicturesInwebp ke true, gambar animasi akan dikonversi menjadi format .webp yang dapat mengurangi ukuran file secara signifikan. Perhatikan bahwa gambar PNG animasi tidak didukung oleh paket ini.
Anda dapat melihat contoh langsung dari penggunaan perpustakaan ini di reactapp.dev/next-image-export-optimizer
Peringatan versi 1.0.0 adalah perubahan yang melanggar. Ini mengikuti perubahan yang diperkenalkan pada 13.0.0 berikutnya yang menggantikan komponen
next/imagedengannext/future/image. Jika Anda menggunakan 12 atau di bawah berikutnya, silakan gunakan versi 0.17.1 .
