next img
1.0.0
Fitur
sharploading="lazy" )<Picture /> bawaanSecara default Next-IMG dikonfigurasi untuk digunakan:
768px Semua pengaturan ini dan lebih banyak lagi dapat diubah di next.config.js Anda atau di Impor Gambar Individual.
Dikembangkan dan digunakan oleh humaan.
Secara default Next.js atau Webpack tidak banyak membantu Anda dengan mengoptimalkan gambar. Ini berarti konfigurasi kustom atau skrip, memproses gambar dengan tangan, menggunakan gambar CDN atau tidak mengoptimalkan gambar sama sekali. IMG Next-IMG dan pendekatan ramping alternatif untuk menambahkan gambar ke proyek berikutnya.js Anda. Ini menggabungkan plugin Next.js, loader webpack khusus dan komponen bereaksi untuk membuat gambar melayani dengan cara yang optimal dengan cara yang hampir semudah mengetik <img src='foo.png' /> .
Singkatnya, dibutuhkan sebagai berikut:
< Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } alt = 'Jellyfish' />Impor, Ubah Ukuran, Mengoptimalkan, cache (terus -menerus dalam repo GIT) dan menghasilkan html berikut:
< 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 >Lihat contoh.
Instal paket
npm install next-img
Tambahkan plugin ke next.config.js Anda:
const withImg = require ( 'next-img/plugin' )
module . exports = withImg ( {
nextImg : {
breakpoints : [ 768 ] ,
} ,
} ) Di aplikasi Anda, impor gambar dan embed menggunakan komponen <Picture /> :
import { Picture } from 'next-img'
import jelly from './images/jelly.jpg?sizes=375,800'
export default ( ) => < Picture src = { jelly } />Atau inline:
import { Picture } from 'next-img'
export default ( ) => < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } />Contoh khusus ini akan menghasilkan gambar berikut:
Gambar yang diukur dan dioptimalkan akan disimpan ke direktori resources di akar proyek Anda selama pengembangan. Ini berarti, bahwa jika Anda mengubah parameter impor gambar atau konfigurasi plugin, Anda dapat menghasilkan gambar tambahan yang tidak lagi digunakan oleh proyek Anda. Dalam hal ini menjalankan perintah next-img untuk menghapus gambar yang tidak perlu dan membangun yang hilang:
npx next-img
Sekarang periksa direktori resources ke kontrol sumber Anda untuk digunakan kembali nanti untuk pembangunan dan produksi. Anda dapat mematikan fitur ini dengan mengatur persistentCache: false dalam konfigurasi plugin, dalam hal ini gambar hanya akan disimpan dalam cache sementara di dalam direktori .next .
Lihat lebih banyak contoh penggunaan.
Opsi konfigurasi plugin default:
{
// 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' )
} Lihat dokumentasi Sharp untuk opsi kompresi jpeg/png/webp .
Saat mengimpor gambar, Anda dapat menggunakan parameter kueri untuk menyesuaikan optimasi:
320px lebar di situs web Anda, cukup tentukan 320 di sini, plugin akan menghasilkan versi yang lebih besar yang diperlukan berdasarkan konfigurasi densities .1x dan 2x gambar akan diproduksi, tentukan 1x jika Anda ingin hanya menghasilkan satu gambar per ukuran, atau 1x,2x,3x , dll. Jika Anda ingin lebih banyak kepadatan.jpeg . Catatan, Pengaturan jpeg->webp perlu bersarang di bawah param ini, misalnya ?jpeg[webp][quality]=95png . Catatan, pengaturan png->webp perlu bersarang di bawah param ini, misalnya ?png[webp][lossless]=false&png[webp][nearLossless]=trueContoh:
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 hadir dengan komponen React yang membuat gambar embedding lebih mudah.
Berikut adalah alat peraga akses komponen ini:
img . Ini memungkinkan penggunaan atribut seperti alt , loading="lazy" , dll. Ketika satu gambar disediakan melalui prop src , maka setiap ukuran akan dikonfigurasi untuk muncul per setiap breakpoint yang tersedia menggunakan atribut sizes attribute HTML.
Misalnya, dengan breakpoints [375, 768] dan ?sizes=100,400,800 Komponen <Picture> akan menerapkan atribut sizes berikut:
(max-width: 375px) 100px,
(max-width: 768px) 400px,
800px
Ketika array gambar disediakan melalui prop src , maka setiap gambar akan dikonfigurasi untuk muncul per setiap breakpoint yang tersedia menggunakan media attribute HTML.
Misalnya, dengan breakpoints [375, 768] dan src=[img1, img2, img3] komponen <Picture> akan menerapkan atribut media berikut:
< picture >
< source media =" (max-width: 480px) " sizes =" {{img1 width}} " />
< source media =" (max-width: 768px) " sizes =" {{img2 width}} " />
< source sizes =" {{img3 width}} " />
< img ... />
</ picture > Apakah saya harus menggunakan komponen <Picture /> ?
Komponen gambar opsional. Anda dapat menangani objek gambar yang diimpor sesuka Anda.
Tidak bisakah gambar dioptimalkan lebih lanjut?
Ya, Anda mungkin bisa mendapatkan ~ 10% -20% atau lebih kompresi jika Anda melewati jpg/png melalui ImageOptim atau alat lainnya. Masalahnya, karena plugin ini menghasilkan webp yang sudah dioptimalkan dengan baik dan Anda akan menyajikan webp ke sebagian besar browser modern, yang menghapus kebutuhan untuk memeras ukuran file tambahan untuk jpg/png karena mereka adalah gambar fallback . Namun, mungkin ada kasus penggunaan di mana algorhitma kompresi khusus diperlukan dan kami dapat menambahkan dukungan untuk transformasi sewenang -wenang di plugin ini di masa depan.
Untuk mengembangkan proyek ini, Anda harus menjalankan pengamat untuk komponen <Picture /> :
npm install
npm run watch
Anda dapat menggunakan contoh sebagai taman bermain:
cd example
npm install
next
Untuk mengeksekusi perintah next-img dalam Contoh Dir:
node ../bin/next-img
Peta jalan
jpg->webp dan png->webp webp/jpg/png ?raw yang tidak memproses gambar dengan cara apa pun next-img dengan mencolokkan langsung ke next build Dan beberapa ide di mana proyek ini dapat diambil di masa depan:
imagemin ke dalam pipa melalui config. Dengan cara ini pengguna dapat mengontrol cara mengoptimalkan gambar mereka lebih ramah.?sizes=100vw,50vw,900px ke piksel berdasarkan konfigurasi breakpoint, ini akan memungkinkan jenis impor dinamis yang bergantung pada sistem desain Anda dan ukuran gambar relatif, misalnya jika CSS mengatakan "50VW", Anda tidak perlu melakukan perhitungan itu secara manual.require() .
