next img
1.0.0
คุณสมบัติ
sharploading="lazy" )<Picture /> ในตัวในตัวโดยค่าเริ่มต้น Next-IMG ได้รับการกำหนดค่าให้ใช้:
768px การตั้งค่าทั้งหมดเหล่านี้และอื่น ๆ สามารถเปลี่ยนแปลงได้ใน next.config.js หรือในการนำเข้าภาพแต่ละรายการ
พัฒนาและใช้โดย Humaans
โดยค่าเริ่มต้น next.js หรือ webpack ไม่ได้ช่วยคุณในการเพิ่มประสิทธิภาพรูปภาพ ซึ่งหมายถึงการกำหนดค่าที่กำหนดเองหรือการเขียนสคริปต์การประมวลผลภาพด้วยมือโดยใช้รูปภาพ CDN หรือไม่ปรับภาพให้เหมาะสมที่สุด Next-IMG ให้และวิธีการที่มีความคล่องตัวทางเลือกสำหรับการเพิ่มรูปภาพในโครงการ next.js ของคุณ มันรวมปลั๊กอิน next.js ตัวโหลดเว็บแพ็คที่กำหนดเองและส่วนประกอบปฏิกิริยาเพื่อให้ภาพที่ให้บริการในแบบที่ดีที่สุดในลักษณะที่เกือบจะง่ายพอ ๆ กับการพิมพ์ <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
เมื่อนำเข้าภาพคุณสามารถใช้พารามิเตอร์แบบสอบถามเพื่อปรับแต่งการเพิ่มประสิทธิภาพ:
320px บนเว็บไซต์ของคุณเพียงแค่ระบุ 320 ที่นี่ปลั๊กอินจะสร้างเวอร์ชันที่ใหญ่กว่าที่จำเป็นตามการกำหนดค่า densities1x และ 2x ของภาพจะถูกสร้างขึ้นให้ระบุ 1x หากคุณต้องการสร้างภาพเดียวต่อขนาดหรือ 1x,2x,3x ฯลฯ หากคุณต้องการความหนาแน่นมากขึ้นjpeg หมายเหตุการตั้งค่า jpeg->webp จำเป็นต้องซ้อนกันภายใต้พารามิเตอร์นี้เช่น ?jpeg[webp][quality]=95png หมายเหตุการตั้งค่า png->webp จำเป็นต้องซ้อนกันภายใต้พารามิเตอร์นี้เช่น ?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 มาพร้อมกับองค์ประกอบปฏิกิริยาทำให้ภาพฝังอยู่ง่ายขึ้น
นี่คืออุปกรณ์ประกอบฉากการเข้าถึงส่วนประกอบนี้:
img สิ่งนี้ช่วยให้การใช้แอตทริบิวต์เช่น alt , loading="lazy" ฯลฯ .. เมื่อมีการให้ภาพเดียวผ่าน Prop src แต่ละขนาดจะถูกกำหนดค่าให้แสดงต่อแต่ละจุดพักที่มีอยู่โดยใช้แอตทริบิวต์ sizes attribute HTML
ตัวอย่างเช่นด้วยเบรกพอยต์ [375, 768] และ ?sizes=100,400,800 ส่วนประกอบ <Picture> จะใช้แอตทริบิวต์ sizes ต่อไปนี้:
(max-width: 375px) 100px,
(max-width: 768px) 400px,
800px
เมื่ออาร์เรย์ของรูปภาพถูกจัดเตรียมผ่าน Prop src แต่ละภาพจะถูกกำหนดค่าให้แสดงต่อแต่ละจุดพักที่มีอยู่โดยใช้ 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 /> หรือไม่?
ส่วนประกอบรูปภาพเป็นตัวเลือก คุณสามารถจัดการกับวัตถุภาพที่นำเข้าได้ตามที่คุณต้องการ
ภาพไม่สามารถปรับให้เหมาะสมต่อไปได้หรือไม่?
ใช่คุณอาจได้รับการบีบอัด ~ 10% -20% หรือมากกว่าถ้าคุณผ่าน jpg/png ผ่าน ImageOptim หรือเครื่องมืออื่น ๆ สิ่งที่เป็นเพราะปลั๊กอินนี้ส่งออกเว็บพีที่ได้รับการปรับปรุงอย่างดีอยู่แล้วและคุณจะให้บริการ WebP ไปยังเบราว์เซอร์ที่ทันสมัยที่สุดซึ่งจะช่วยขจัดความจำเป็นในการบีบขนาดไฟล์พิเศษสำหรับ jpg/png เนื่องจากเป็นภาพ ทางเลือก อย่างไรก็ตามอาจมีกรณีการใช้งานที่จำเป็นต้องมีอัลกอร์ฮิ ธ การบีบอัดแบบกำหนดเองและเราอาจเพิ่มการสนับสนุนสำหรับการแปลงโดยพลการในปลั๊กอินนี้ในอนาคต
ในการพัฒนาโครงการนี้คุณจะต้องเรียกใช้ Watcher สำหรับส่วนประกอบ <Picture /> :
npm install
npm run watch
คุณสามารถใช้ตัวอย่างเป็นสนามเด็กเล่น:
cd example
npm install
next
ในการเรียกใช้คำสั่ง next-img ในตัวอย่าง DIR:
node ../bin/next-img
แผนงาน
jpg->webp และ png->webp webp/jpg/png ?raw ที่ไม่ประมวลผลภาพในทางใดทางหนึ่ง next-img โดยเสียบเข้ากับ next build ไปโดยตรง และแนวคิดบางอย่างสำหรับโครงการนี้ในอนาคต:
imagemin ลงในไปป์ไลน์ผ่านการกำหนดค่า วิธีนี้ผู้ใช้สามารถควบคุมวิธีเพิ่มประสิทธิภาพภาพของพวกเขาได้มากขึ้น?sizes=100vw,50vw,900px เป็นพิกเซลตามการกำหนดค่าเบรกพอยต์ซึ่งจะช่วยให้การนำเข้าแบบไดนามิกที่ขึ้นอยู่กับระบบการออกแบบของคุณและการปรับขนาดภาพสัมพัทธ์เช่น CSS กล่าวว่า "50VW" คุณไม่จำเป็นต้องทำการคำนวณด้วยตนเองrequire()
