next/image คือการแทนที่ที่เหมาะสมที่สุดของ Next.js สำหรับแท็ก <img> โดยจะใช้ลำดับของแนวทางปฏิบัติที่ดีที่สุดด้านประสิทธิภาพของภาพอย่างอัตโนมัติ ซึ่งคุณจะต้องใช้ด้วยตนเอง
tsx
;
() {
(
);
}
next/image คือการแทนที่ที่เหมาะสมที่สุดของ Next.js สำหรับแท็ก <img> โดยจะใช้ลำดับของแนวทางปฏิบัติที่ดีที่สุดด้านประสิทธิภาพของภาพอย่างอัตโนมัติ ซึ่งคุณจะต้องใช้ด้วยตนเอง
;
() {
(
);
}
srcset ที่ตอบสนอง — สร้างหลายขนาดเพื่อให้อุปกรณ์แต่ละเครื่องดาวน์โหลดขนาดที่ถูกต้องpriority)width/height ที่จำเป็น (หรือ fill) สำรองพื้นที่เพื่อไม่ให้หน้ากระโดดเมื่อภาพโหลดplaceholder="blur" แสดงตัวอย่างเบลอขนาดเล็กระหว่างการโหลด<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
ใช้ fill (แทนความกว้าง/ความสูงคงที่) เมื่อภาพควรเติมเต็มหลักของมันที่มีตำแหน่ง — โดยทั่วไปสำหรับภาพฮีโร่/ปก
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
ภาพมักจะเป็นสินทรัพย์ที่หนักที่สุดบนหน้า และเป็นสาเหตุหลักของ Core Web Vitals ที่ไม่ดี (LCP, CLS) next/image ทำให้การปรับขนาด รูปแบบสมัยใหม่ srcset ที่ตอบสนอง การโหลด lazy และการป้องกันการเลื่อนตำแหน่ง — เปลี่ยนงานประสิทธิภาพขนาดใหญ่เป็นคอมโพเนนต์เดียว โดยที่ priority สำหรับภาพ LCP คือปุ่มเดียวที่คุณต้องจำ