ดาวน์โหลด next optimized images - ดาวน์โหลดซอร์สโค้ด next optimized images

- ภาพต่อไป

เวอร์ชัน 3 กำลังจะมา! มันแนะนำการเขียนใหม่ที่สมบูรณ์ด้วยคุณสมบัติใหม่ ๆ และแก้ไขข้อผิดพลาด หากคุณต้องการช่วยพัฒนาและทดสอบเวอร์ชันหลักที่กำลังจะมาถึงโปรดตรวจสอบสาขา Canary Branch สำหรับคำแนะนำในการติดตั้งและข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติใหม่ (ปัญหา RFC)

เพิ่มประสิทธิภาพรูปภาพโดยอัตโนมัติที่ใช้ในโครงการ Next.js ( jpeg , png , svg , webp และ gif )

ขนาดของภาพมักจะลดลงระหว่าง 20-60%แต่นี่ไม่ใช่ next-optimized-images เดียว

ลดขนาดภาพ โดยการเพิ่มประสิทธิภาพภาพในระหว่างการสร้าง
ปรับปรุงความเร็วในการโหลดโดยให้ ภาพที่ก้าวหน้า (สำหรับรูปแบบที่รองรับ)
มีภาพเล็ก ๆ เพื่อบันทึกคำขอ HTTP และ RoundTrips เพิ่มเติม
เพิ่มแฮชเนื้อหาลงในชื่อไฟล์เพื่อให้ภาพสามารถแคชในระดับ CDN และในเบราว์เซอร์เป็นเวลานาน
URL ภาพเดียวกันมากกว่าการสร้างหลายครั้งเป็นเวลานานแคช
จัดเตรียม พารามิเตอร์แบบสอบถาม สำหรับการจัดการ/การตั้งค่าเฉพาะไฟล์
สามารถ แปลงรูปภาพ JPEG/PNG เป็น webp ได้ทันที สำหรับขนาดที่เล็กกว่า
ให้ความเป็นไปได้ที่จะใช้ SVG sprites เพื่อประสิทธิภาพที่ดีขึ้นเมื่อใช้ไอคอนเดียวกันหลายครั้ง (เช่นในรายการ)
สามารถ ปรับขนาด ภาพหรือสร้าง ตัวยึดตำแหน่งที่แตกต่างกันในขณะที่ขี้เกียจกำลังโหลด ภาพ: ภาพคุณภาพต่ำสีที่โดดเด่นหรือโครงร่างภาพ

สารบัญ

การติดตั้ง
แพ็คเกจการเพิ่มประสิทธิภาพ
การใช้งาน
- พารามิเตอร์แบบสอบถาม
การกำหนดค่า
ตัวอย่าง
ดูด้วย
ใบอนุญาต

การติดตั้ง

 npm install next-optimized-images

Node> = 8 เป็นสิ่งจำเป็นสำหรับเวอร์ชัน 2 หากคุณต้องการรองรับเวอร์ชันโหนดรุ่นเก่าคุณยังสามารถใช้เวอร์ชัน 1 ของภาพต่อไปได้

เปิดใช้งานปลั๊กอินในไฟล์กำหนดค่า next.js ของคุณ:

 // 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

] ) ;

ดูส่วนการกำหนดค่าสำหรับตัวเลือกที่มีอยู่ทั้งหมด

จากเวอร์ชัน 2 บนภาพจะไม่ได้รับการปรับให้เหมาะสมจากกล่องอีกต่อไป คุณต้องติดตั้งแพ็คเกจการเพิ่มประสิทธิภาพที่คุณต้องการนอกเหนือจากปลั๊กอินนี้ สิ่งนี้ไม่ได้บังคับให้คุณดาวน์โหลดไลบรารีการเพิ่มประสิทธิภาพขนาดใหญ่ที่คุณไม่ได้ใช้ โปรดตรวจสอบตารางของแพ็คเกจการเพิ่มประสิทธิภาพที่เป็นตัวเลือกทั้งหมด

ตัวอย่างด้านบนใช้ plugins-compose-plugins สำหรับ API ที่สะอาดกว่าเมื่อใช้ปลั๊กอินจำนวนมากดู readme สำหรับตัวอย่างที่มีรายละเอียดมากขึ้น next-optimized-images ยังทำงานร่วมกับปลั๊กอิน API มาตรฐาน:

 // 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...
} ) ;

แพ็คเกจการเพิ่มประสิทธิภาพ

เริ่มต้นจากเวอร์ชัน 2 คุณต้องติดตั้งแพ็คเกจการเพิ่มประสิทธิภาพที่คุณต้องการในโครงการของคุณนอกเหนือจากปลั๊กอินนี้ next-optimized-images จากนั้นตรวจจับแพ็คเกจที่รองรับทั้งหมดและใช้งาน

ดังนั้นคุณจะต้องติดตั้งแพ็คเกจเหล่านี้ด้วย NPM ไม่จำเป็นต้องใช้ขั้นตอนเพิ่มเติมหลังจากนั้น

แพ็คเกจการเพิ่มประสิทธิภาพต่อไปนี้มีและรองรับ:

แพ็คเกจการเพิ่มประสิทธิภาพ	คำอธิบาย	ลิงค์โครงการ
`imagemin-mozjpeg`	ปรับภาพ JPEG ให้เหมาะสม	การเชื่อมโยง
`imagemin-optipng`	ปรับภาพ PNG ให้เหมาะสม	การเชื่อมโยง
`imagemin-pngquant`	ทางเลือกสำหรับการปรับภาพ PNG ให้เหมาะสม	การเชื่อมโยง
`imagemin-gifsicle`	ปรับภาพ GIF ให้เหมาะสม	การเชื่อมโยง
`imagemin-svgo`	ปรับภาพและไอคอน SVG ให้เหมาะสม	การเชื่อมโยง
`svg-sprite-loader`	เพิ่มความเป็นไปได้ที่จะใช้สไปรต์ SVG เพื่อประสิทธิภาพที่ดีขึ้น อ่านส่วน Sprite สำหรับข้อมูลเพิ่มเติม	การเชื่อมโยง
`webp-loader`	ปรับภาพ WEBP ให้เหมาะสมและสามารถแปลงรูปภาพ JPEG/PNG เป็น WebP On The Fly (WebP Resource Query)	การเชื่อมโยง
`lqip-loader`	สร้างตัวยึดภาพที่มีคุณภาพต่ำและสามารถแยกสีที่โดดเด่นของภาพ (คิวรีทรัพยากร LQIP)	การเชื่อมโยง
`responsive-loader`	สามารถปรับขนาดภาพได้ทันทีและสร้างมันหลายรุ่นสำหรับ `srcset` สำคัญ : คุณต้องติดตั้ง `jimp` (การใช้งานโหนดช้าลง) หรือ `sharp` (ไบนารีเร็วขึ้น)	การเชื่อมโยง
`image-trace-loader`	สร้างโครงร่างภาพ SVG ซึ่งสามารถใช้เป็นตัวยึดตำแหน่งในขณะที่โหลดภาพต้นฉบับ (สืบค้นทรัพยากร Trace)	การเชื่อมโยง

ตัวอย่าง: หากคุณมีรูปภาพ JPG, PNG และ SVG ในโครงการของคุณคุณจะต้องเรียกใช้
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo

ในการติดตั้งแพ็คเกจเสริม ทั้งหมด Run:

npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loader

โปรดทราบว่าโดยค่าเริ่มต้นรูปภาพจะได้รับการปรับให้เหมาะสมสำหรับ การสร้างการผลิตเท่านั้นไม่ใช่การพัฒนา อย่างไรก็ตามสิ่งนี้สามารถเปลี่ยนแปลงได้ด้วยการกำหนดค่า optimizeImagesInDev

ขึ้นอยู่กับการตั้งค่าการสร้าง/การปรับใช้ของคุณมันยังเป็นไปได้ที่จะติดตั้งสิ่งเหล่านี้เป็น devdependencies เพียงตรวจสอบให้แน่ใจว่าแพ็คเกจพร้อมใช้งานเมื่อคุณสร้างโครงการของคุณ

ตั้งแต่เวอร์ชัน 2.5 ไฟล์ ico ยังได้รับการสนับสนุน แต่จำเป็นต้องเปิดใช้งานในการกำหนดค่า handleImages

การใช้งาน

ตอนนี้คุณสามารถนำเข้าหรือต้องการภาพของคุณโดยตรงในส่วนประกอบที่ตอบสนองของคุณ:

 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>
 */

โปรดทราบว่าภาพได้รับการปรับให้เหมาะสมในการผลิตโดยค่าเริ่มต้นเพื่อลดเวลาสร้างในสภาพแวดล้อมการพัฒนาของคุณ

หากคุณใช้โมดูล CSS แพ็คเกจนี้จะตรวจจับภาพและปรับให้เหมาะสมในค่า url() ในไฟล์ CSS/SASS/น้อยของคุณ:

 .Header {
  background-image : url ( ' ./images/my-image.jpg ' );
}

/* *
 * Results in:
 *
 * .Header {
 *   background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
 * }
 */

หากไฟล์ต่ำกว่าขีด จำกัด สำหรับการ inlining ภาพ require(...) จะส่งคืน base64 data-Uri ( data:image/jpeg;base64,... )

มิฉะนั้น next-optimized-images จะคัดลอกรูปภาพของคุณลงในโฟลเดอร์แบบคงที่ของ next.js และ require(...) ส่งคืนเส้นทางไปยังภาพของคุณในกรณีนี้ ( /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg static/images/my-image-5216de428a8e8bd01aa3673d2d2d2d2d2d2d2d2d

คุณสามารถใช้ทั้งสองตัวแปรบนภาพในแอตทริบิวต์ src หรือในไฟล์ CSS ของคุณภายในค่า url()

พารามิเตอร์แบบสอบถาม

หากคุณใช้ Flow หรือ Eslint-Plugin-Import และกำลังประสบปัญหาบางอย่างกับพารามิเตอร์แบบสอบถามลองดูโซลูชันที่โพสต์โดย @Eleith

มีบางกรณีที่คุณไม่ต้องการอ้างอิงไฟล์หรือรับ base64 data-Uri แต่คุณต้องการรวมไฟล์ RAW ลงใน HTML ของคุณโดยตรง โดยเฉพาะอย่างยิ่งสำหรับ SVGs เพราะคุณไม่สามารถจัดสไตล์ด้วย CSS ได้หากพวกเขาอยู่ในแอตทริบิวต์ src บนภาพ

ดังนั้นจึงมีตัวเลือกเพิ่มเติมที่คุณสามารถระบุเป็นพารามิเตอร์แบบสอบถามเมื่อคุณนำเข้าภาพ

?include : รวมไฟล์ RAW โดยตรง (มีประโยชน์สำหรับไอคอน SVG)
?webp : แปลงภาพ jpeg/png เป็น webp ได้ทันที
?inline : บังคับให้เข้าสู่ภาพ (Data-Uri)
?url : บังคับ URL สำหรับภาพขนาดเล็ก (แทนที่จะเป็น Data-Uri)
?original : ใช้ภาพต้นฉบับและไม่ปรับให้เหมาะสม
?lqip : สร้างตัวยึดภาพที่มีคุณภาพต่ำ
?lqip-colors : แยกสีที่โดดเด่นของภาพ
?trace : ใช้โครงร่างที่ติดตามเป็นตัวยึดตำแหน่ง
?resize : ปรับขนาดภาพ
?sprite : ใช้ svg sprites

?รวม

ตอนนี้รูปภาพจะรวมอยู่ใน HTML ของคุณโดยตรงโดยไม่ต้องมีข้อมูล-ยูริหรืออ้างอิงไปยังไฟล์ของคุณ

ตามที่อธิบายไว้ข้างต้นสิ่งนี้มีประโยชน์สำหรับ SVG เพื่อให้คุณสามารถจัดสไตล์ด้วย 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>
 */

ภาพจะยังคงได้รับการปรับให้เหมาะสมแม้ว่าจะรวมอยู่ในเนื้อหาของคุณโดยตรง (แต่เป็นค่าเริ่มต้นในการผลิตเท่านั้น)

? webp

ต้องใช้แพ็คเกจการเพิ่มประสิทธิภาพที่เป็นตัวเลือก webp-loader ( npm install webp-loader )

WebP เป็นรูปแบบภาพที่ดีขึ้นและเล็กกว่า แต่ก็ยังไม่ได้เป็นเรื่องธรรมดาและนักพัฒนามักจะได้รับภาพ JPEG/PNG เท่านั้น

ถ้านี่ ?webp จะมีการระบุ next-optimized-images โดยอัตโนมัติจะแปลงอิมเมจ JPEG/PNG เป็นรูปแบบ WebP ใหม่โดยอัตโนมัติ

สำหรับเบราว์เซอร์ที่ยังไม่รองรับ WEBP คุณสามารถให้ทางเลือกโดยใช้แท็ก <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>
 */

? แบบอินไลน์

คุณสามารถระบุขีด จำกัด สำหรับการ inlining ภาพซึ่งจะรวมเป็นข้อมูล -uri โดยตรงในเนื้อหาของคุณแทนที่จะอ้างอิงไฟล์หากขนาดไฟล์ต่ำกว่าขีด จำกัด นั้น

คุณมักจะไม่ต้องการระบุขีด จำกัด ที่สูงเกินไป แต่อาจมีกรณีที่คุณยังต้องการอินไลน์ภาพที่ใหญ่กว่า

ในกรณีนี้คุณไม่จำเป็นต้องตั้งค่าขีด จำกัด ทั่วโลกเป็นค่าที่สูงขึ้น แต่คุณสามารถเพิ่มข้อยกเว้นสำหรับภาพเดียวโดยใช้ตัวเลือกแบบสอบถาม ?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.
 */

การอินไลน์จะถูกนำไปใช้กับการนำเข้านี้เท่านั้นดังนั้นหากคุณนำเข้าภาพเป็นครั้งที่สองโดยไม่มีตัวเลือก ?inline จะได้รับการอ้างอิงตามปกติเป็นไฟล์หากสูงกว่าขีด จำกัด ของคุณ

? url

เมื่อคุณมีภาพที่เล็กกว่าขีด จำกัด ที่กำหนดไว้สำหรับการ inlining โดยปกติแล้วจะถูก inlined โดยอัตโนมัติ หากคุณไม่ต้องการให้ไฟล์ขนาดเล็กเฉพาะเจาะจงคุณสามารถใช้พารามิเตอร์ ?url query เพื่อรับ URL รูปภาพกลับมาโดยไม่คำนึงถึงขีด จำกัด แบบอินไลน์

หากคุณใช้ตัวเลือกนี้เป็นจำนวนมากมันอาจทำให้รู้สึกถึงการปิดการใช้งานอย่างสมบูรณ์และใช้พารามิเตอร์ ?inline สำหรับไฟล์เดียว

 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 จะถูกปิดใช้งานสำหรับการนำเข้านี้เท่านั้นดังนั้นหากคุณนำเข้าภาพเป็นครั้งที่สองโดยไม่มีตัวเลือก ?url

?ต้นฉบับ

ภาพจะไม่ได้รับการปรับให้เหมาะสมและใช้ตามที่เป็นอยู่ มันสมเหตุสมผลที่จะใช้พารามิเตอร์แบบสอบถามนี้หากคุณรู้ว่าภาพได้รับการปรับให้เหมาะสม (เช่นระหว่างการส่งออก) ดังนั้นจึงไม่ได้รับการปรับให้เหมาะสมอีกครั้งเป็นครั้งที่สอง

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?original' ) } />
) ;

สิ่งนี้สามารถรวมกับ ?url หรือ ?inline Resource Query (เช่น ?original&inline )

? lqip

ต้องใช้แพ็คเกจเสริม lqip-loader ( npm install lqip-loader )

เมื่อใช้การสืบค้นทรัพยากรนี้ภาพที่มีขนาดเล็กมาก (ประมาณ 10x7 พิกเซล) จะถูกสร้างขึ้น จากนั้นคุณสามารถแสดงภาพนี้เป็นตัวยึดได้จนกว่าภาพจริง (ใหญ่) จะโหลด

โดยปกติคุณจะยืดภาพเล็ก ๆ นี้ให้มีขนาดเท่ากันกับภาพจริงเช่น Medium.com ทำ เพื่อให้ภาพที่ยืดออกดูดีขึ้นในโครเมี่ยมลองดูโซลูชันนี้และเพิ่มตัวกรองเบลอลงในภาพของคุณ

 import React from 'react' ;

export default ( ) => (
  < img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;

/**
 * Replaces the src with a tiny image in base64.
 */

? lqip-colors

ต้องใช้แพ็คเกจเสริม lqip-loader ( npm install lqip-loader )

แบบสอบถามทรัพยากรนี้จะส่งคืน อาร์เรย์ให้คุณด้วยค่า hex ของสีที่โดดเด่นของภาพ นอกจากนี้คุณยังสามารถใช้สิ่งนี้เป็นตัวยึดได้จนกว่าภาพจริงจะโหลด (เช่นเป็นพื้นหลัง) เช่น การค้นหารูปภาพของ Google

จำนวนสีที่ส่งคืนอาจแตกต่างกันไปและขึ้นอยู่กับจำนวนสีที่แตกต่างกัน

 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']
 */

?ติดตาม

ต้องใช้แพ็คเกจเสริม image-trace-loader ( npm install image-trace-loader )

ด้วยการสืบค้นทรัพยากร ?trace คุณสามารถสร้างโครงร่างภาพ SVG ซึ่งสามารถใช้เป็นตัวยึดตำแหน่งในขณะที่โหลดภาพต้นฉบับ

 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') ส่งคืนวัตถุที่มีร่องรอย ( trace ) เป็น SVG ที่มีข้อเขียนและภาพปกติ ( src ) ซึ่งได้รับการปรับให้เหมาะสม

การติดตามจะมีความกว้างและความสูงเท่ากันกับภาพปกติของคุณ

ตัวเลือกสำหรับตัวโหลดสามารถตั้งค่าในการกำหนดค่าปลั๊กอิน

?

ต้องใช้แพ็คเกจเสริม responsive-loader ( npm install responsive-loader ) และ jimp (การใช้งานโหนดช้าลง) หรือ sharp (ไบนารีเร็วขึ้น)

หลังจาก ?resize การสืบค้นทรัพยากรคุณสามารถเพิ่มแบบสอบถามอื่น ๆ ของ responsive-loader ซึ่งช่วยให้คุณปรับขนาดภาพและสร้างชุดต้นฉบับทั้งหมด

 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 >
) ;

หากใช้เฉพาะ size หรือ sizes พารามิเตอร์พารามิเตอร์ ?resize สามารถละเว้นได้ (เช่น my-image.jpg?size=300 ) แต่มันเป็นสิ่งจำเป็นสำหรับพารามิเตอร์อื่น ๆ ทั้งหมดของ responsive-loader

นอกจากนี้คุณยังสามารถตั้งค่าการกำหนดค่าส่วนกลางในคุณสมบัติ responsive (ในไฟล์ next.config.js ) และกำหนดตัวอย่างเช่นขนาดเริ่มต้นที่จะสร้างขึ้นเมื่อคุณไม่ได้ระบุหนึ่งสำหรับรูปภาพ (เช่น my-image.jpg?resize )

?เทพดา

ต้องใช้แพ็คเกจการเพิ่มประสิทธิภาพที่เป็นตัวเลือก imagemin-svgo และ svg-sprite-loader ( npm install imagemin-svgo svg-sprite-loader )

หากคุณต้องการสไตล์หรือทำให้ SVG ของคุณเคลื่อนไหวอาจเป็นตัวเลือกที่ผิดเพราะมันจบลงด้วยองค์ประกอบ DOM จำนวนมากโดยเฉพาะอย่างยิ่งเมื่อใช้ SVG ในรายการรายการ ฯลฯ ในกรณีนั้นคุณสามารถใช้ ?sprite ที่ใช้ SVG-prite-loader เพื่อแสดงผลและฉีด SVG sprite ในหน้าโดยอัตโนมัติ

 import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;

export default ( ) => (
  < div >
    my page..
    < MyIcon />
  </ div >
) ;

อุปกรณ์ประกอบฉากทั้งหมดที่ส่งผ่านไปยังสไปรต์ที่นำเข้าจะถูกนำไปใช้กับองค์ประกอบ <svg> ดังนั้นคุณสามารถเพิ่มคลาสตามปกติด้วย <MyIcon className="icon-class" />

วัตถุ svg-sprite-loader ยังได้รับการเปิดเผยหากคุณต้องการสร้างส่วนประกอบของคุณเอง:

 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 >
) ;

ในการทำให้งานนี้ทำงานได้สำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์คุณต้องเพิ่มการเปลี่ยนแปลงเหล่านี้ในไฟล์ _document.jsx ของคุณ (อ่านที่นี่หากคุณยังไม่มีไฟล์นี้):

 // ./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 >
    ) ;
  }
}

การกำหนดค่า

ปลั๊กอินนี้ใช้ IMG-Loader ภายใต้ฮูดซึ่งใช้ Mozjpeg, Optipng, Gifsicle และ SVGO

ตัวเลือกเริ่มต้นสำหรับ Optimizers เหล่านี้ควรเพียงพอในกรณีส่วนใหญ่ แต่คุณสามารถเขียนทับทุกตัวเลือกที่มีอยู่หากคุณต้องการ

มือจับ

ประเภท: string[]
ค่าเริ่มต้น: ['jpeg', 'png', 'svg', 'webp', 'gif']

next-optimized-images จะลงทะเบียน WebPack Loader สำหรับประเภทไฟล์เหล่านี้ทั้งหมด หากคุณไม่ต้องการหนึ่งในสิ่งเหล่านี้ที่จัดการโดยภาพต่อไปนี้เนื่องจากคุณมีปลั๊กอินอื่นหรือกฎโหลดที่กำหนดเองเพียงลบออกจากอาร์เรย์

โปรดทราบว่าภาพที่จัดการไม่ได้หมายความว่ามันจะได้รับการปรับให้เหมาะสมโดยอัตโนมัติ ต้องติดตั้งแพ็คเกจการเพิ่มประสิทธิภาพที่จำเป็นสำหรับภาพนั้นด้วย โปรดอ่านส่วนแพ็คเกจการเพิ่มประสิทธิภาพสำหรับข้อมูลเพิ่มเติม

หากภาพได้รับการจัดการ แต่ไม่ได้รับการปรับให้เหมาะสมนั่นหมายความว่าภาพต้นฉบับจะถูกใช้และคัดลอกสำหรับการสร้าง

เนื่องจากเวอร์ชัน 2.5 รองรับไฟล์ ico แต่สำหรับความเข้ากันได้ย้อนหลังพวกเขาจะต้องเปิดใช้งานด้วยตนเอง ด้วยการเพิ่ม 'ico' ลงในอาร์เรย์ handleImages ปลั๊กอินจะจัดการไฟล์ ico

inlineimageLimit

ประเภท: number
ค่าเริ่มต้น: 8192

ไฟล์ขนาดเล็กจะได้รับการ inlined ด้วย data-uri โดย url-loader หมายเลขนี้กำหนดขนาดไฟล์สูงสุด (เป็นไบต์) เพื่อให้ภาพได้รับการ inlined หากภาพมีขนาดใหญ่กว่ามันจะถูกคัดลอกไปยังโฟลเดอร์คงที่ของถัดไป

รูปภาพจะได้รับการปรับให้เหมาะสมในทั้งสองกรณี

หากต้องการปิดการใช้งานภาพที่สมบูรณ์ให้ตั้งค่านี้เป็น -1 จากนั้นคุณจะได้รับ URL รูปภาพกลับมาเสมอ

รูปภาพโฟลเดอร์

ประเภท: string
ค่าเริ่มต้น: 'images'

ชื่อโฟลเดอร์ภายใน /static/ ซึ่งภาพจะถูกคัดลอกไปในระหว่างการสร้าง

ImageSpublicPath

ประเภท: string
ค่าเริ่มต้น: `/_next/static/${imagesFolder}/`

เส้นทางสาธารณะที่ควรใช้สำหรับ URL ภาพ สิ่งนี้สามารถใช้เพื่อให้บริการภาพที่ดีที่สุดจากบริการจัดเก็บข้อมูลบนคลาวด์เช่น S3

จากเวอร์ชัน 2 บน Images ที่ได้รับการปรับให้เหมาะกับการกำหนดค่า assetPrefx ของ next.js โดยค่าเริ่มต้น แต่คุณสามารถเขียนทับด้วย imagesPublicPath เป็นพิเศษสำหรับรูปภาพ

ImagesOutputPath

ประเภท: string
ค่าเริ่มต้น: `static/${imagesFolder}/`

เส้นทางเอาต์พุตที่ควรใช้สำหรับภาพ สิ่งนี้สามารถใช้เพื่อมีโฟลเดอร์เอาต์พุตแบบกำหนดเอง

ชื่อภาพ

ประเภท: string
ค่าเริ่มต้น: '[name]-[hash].[ext]'

ชื่อไฟล์ของภาพที่ปรับให้เหมาะสม ตรวจสอบให้แน่ใจว่าคุณเก็บส่วน [hash] ไว้เพื่อให้พวกเขาได้รับชื่อไฟล์ใหม่หากเนื้อหาเปลี่ยนแปลง

removeoriginalextension

ประเภท: boolean
ค่าเริ่มต้น: false

เมื่อรูปภาพแปลงเป็น WebP ได้ทันที. .webp ถูกผนวกเข้ากับชื่อไฟล์ ตัวอย่างเช่น test.png กลายเป็น test.png.webp หากคุณต้องการมีส่วนขยายชื่อไฟล์เดียวเช่น test.webp คุณสามารถตั้งค่าตัวเลือกนี้เป็น true

OptimizeImagesIndev

ประเภท: boolean
ค่าเริ่มต้น: false

สำหรับการพัฒนาที่เร็วขึ้นและ HMR รูปภาพจะไม่ได้รับการปรับให้เหมาะสมโดยค่าเริ่มต้นเมื่อทำงานในโหมดการพัฒนา ในการผลิตภาพจะได้รับการปรับให้เหมาะสมเสมอโดยไม่คำนึงถึงการตั้งค่านี้

mozjpeg

ต้องใช้แพ็คเกจการเพิ่มประสิทธิภาพที่เป็นตัวเลือก imagemin-mozjpeg ( npm install imagemin-mozjpeg ) (NPM ติดตั้ง)

ประเภท: object
ค่าเริ่มต้น: {}

Mozjpeg ใช้สำหรับการปรับภาพ JPEG ให้เหมาะสม คุณสามารถระบุตัวเลือกได้ที่นี่ ตัวเลือกเริ่มต้นของ mozjpeg จะถูกใช้หากคุณละเว้นตัวเลือกนี้

optipng

ต้องใช้แพ็คเกจการปรับให้เหมาะสมเป็นพิเศษ imagemin-optipng ( npm install imagemin-optipng ) (NPM ติดตั้ง)

ประเภท: object
ค่าเริ่มต้น: {}

Optipng ใช้สำหรับการปรับภาพ PNG ให้เหมาะสมโดยค่าเริ่มต้น คุณสามารถระบุตัวเลือกได้ที่นี่ ตัวเลือกเริ่มต้นของ optipng จะถูกใช้หากคุณละเว้นตัวเลือกนี้

pngquant

ต้องใช้แพ็คเกจการปรับให้เหมาะสมเป็นตัวเลือก imagemin-pngquant ( npm install imagemin-pngquant )

ประเภท: object
ค่าเริ่มต้น: {}

Pngquant เป็นทางเลือกในการเพิ่มประสิทธิภาพรูปภาพ PNG ตัวเลือกเริ่มต้นของ pngquant จะถูกใช้หากคุณละเว้นตัวเลือกนี้

Gifsicle

ต้องใช้แพ็คเกจการปรับให้เหมาะสมเป็นตัวเลือก imagemin-gifsicle ( npm install imagemin-gifsicle )

ประเภท: object
ค่าเริ่มต้น:

 {
    interlaced : true ,
    optimizationLevel : 3 ,
}

Gifsicle ใช้สำหรับการปรับภาพ GIF ให้เหมาะสม คุณสามารถระบุตัวเลือกได้ที่นี่ ตัวเลือกเริ่มต้นของ gifsicle จะถูกใช้หากคุณละเว้นตัวเลือกนี้

SVGO

ต้องใช้แพ็คเกจการปรับให้เหมาะสมเป็นตัวเลือก imagemin-svgo ( npm install imagemin-svgo )

ประเภท: object
ค่าเริ่มต้น: {}

SVGO ใช้สำหรับการปรับภาพและไอคอน SVG ให้เหมาะสม คุณสามารถระบุตัวเลือกได้ที่นี่ ตัวเลือกเริ่มต้นของ svgo จะถูกใช้หากคุณละเว้นตัวเลือกนี้

ปลั๊กอิน SVGO เดี่ยวสามารถปิดใช้งาน/เปิดใช้งานได้ในอาร์เรย์ปลั๊กอิน:

 {
  svgo : {
    plugins : [
      { removeComments : false }
    ]
  }
}

svgspriteloader

ต้องใช้แพ็คเกจการเพิ่มประสิทธิภาพที่เป็นตัวเลือก imagemin-svgo และ svg-sprite-loader ( npm install imagemin-svgo svg-sprite-loader )

ประเภท: object
ค่าเริ่มต้น:

 {
  runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
}

เมื่อใช้ตัวเลือก SVG Sprite svg-sprite-loader จะถูกใช้ภายใน คุณสามารถเขียนทับการกำหนดค่าที่ส่งไปยังโหลดเดอร์นี้ได้ที่นี่

เว็บป

ต้องใช้แพ็คเกจการเพิ่มประสิทธิภาพที่เป็นตัวเลือก webp-loader ( npm install webp-loader )

ประเภท: object
ค่าเริ่มต้น: {}

Imagemin-WEBP ใช้สำหรับการเพิ่มประสิทธิภาพของภาพ WEBP และแปลงรูปแบบอื่นเป็น WebP คุณสามารถระบุตัวเลือกได้ที่นี่ ตัวเลือกเริ่มต้นของ imagemin-webp จะถูกใช้หากคุณละเว้นตัวเลือกนี้

imagetrace

ต้องใช้แพ็คเกจเสริม image-trace-loader ( npm install image-trace-loader )

ประเภท: object
ค่าเริ่มต้น: {}

เมื่อใช้ image-trace-loader สำหรับการสืบค้นทรัพยากร ?trace คุณสามารถกำหนดตัวเลือกทั้งหมดสำหรับตัวโหลดการติดตามภาพในวัตถุนี้ ตัวเลือกเริ่มต้นของ image-trace-loader จะถูกใช้หากคุณละเว้นตัวเลือกนี้

ตอบสนอง

ต้องใช้แพ็คเกจการเพิ่มประสิทธิภาพที่เป็นตัวเลือก responsive-loader ( npm install responsive-loader )

ประเภท: object
ค่าเริ่มต้น: {}

การกำหนดค่าสำหรับ responsive-loader สามารถกำหนดได้ที่นี่

defaultImageLoader

ต้องใช้แพ็คเกจการเพิ่มประสิทธิภาพที่เป็นตัวเลือก responsive-loader ( npm install responsive-loader )

ประเภท: string
ค่าเริ่มต้น: 'img-loader'

โดยค่าเริ่มต้น IMG-Loader จัดการคำขอส่วนใหญ่ อย่างไรก็ตามหากคุณใช้ responsive-loader เป็นจำนวนมากและไม่ต้องการเพิ่มพารามิเตอร์การสืบค้น ?resize ให้กับทุกความต้องการคุณสามารถตั้งค่านี้เป็น 'responsive-loader'

หลังจากนั้น responsive-loader จะจัดการรูปภาพ JPEG และ PNG ทั้งหมด ต่อค่าเริ่มต้นแม้จะไม่มีพารามิเตอร์การสืบค้นเพิ่มเติม เพิ่งทราบว่าคุณไม่สามารถใช้พารามิเตอร์แบบสอบถามใด ๆ next-optimized-images ให้อีกต่อไปในภาพเหล่านี้อีกต่อไปเนื่องจากคำขอเพิ่งได้รับการส่งต่อและไม่ได้รับการแก้ไขอีกต่อไป รูปแบบอื่น ๆ ทั้งหมด (SVG, WebP และ GIF) ยังคงทำงานเหมือนก่อนกับ img-loader และมีพารามิเตอร์แบบสอบถามทั้งหมด

OptimizeImages

ประเภท: boolean
ค่าเริ่มต้น: true

หากคุณไม่ได้ติดตั้งแพ็คเกจการเพิ่มประสิทธิภาพใด ๆ จะไม่มีการปรับภาพให้เหมาะสม ในกรณีนี้คำเตือนจะถูกเขียนลงในคอนโซลในระหว่างการสร้างเพื่อแจ้งให้คุณทราบเกี่ยวกับการกำหนดค่าผิดพลาดที่เป็นไปได้ หากการกำหนดค่านี้มีจุดประสงค์และคุณไม่ต้องการให้รูปภาพได้รับการปรับให้เหมาะสมคุณสามารถตั้งค่านี้เป็น false และคุณจะไม่ได้รับคำเตือนอีกต่อไป

ตัวอย่าง

ตัวเลือกที่ระบุไว้ที่นี่คือค่า เริ่มต้น

ดังนั้นหากพวกเขาดีพอสำหรับกรณีการใช้งานของคุณคุณไม่จำเป็นต้องระบุให้มีไฟล์ที่สั้นกว่าและทำความสะอาด next.config.js

 // 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 ,
    } ,
  } ] ,
] ) ;

ดูด้วย

ภาพถัดไปหากคุณต้องการรูปภาพและไม่ปรับให้เหมาะสม
เครื่องเล่นถัดไปสำหรับปลั๊กอิน Cleaner API เมื่อคุณมีปลั๊กอินจำนวนมากในไฟล์ next.config.js ของคุณ
Plugins ถัดไปสำหรับรายการปลั๊กอินอย่างเป็นทางการและชุมชน

ใบอนุญาต

ขยาย