Next.js Asset Optimization

Expert guidance on optimizing images in Next.js using the Image component — local/remote images, lazy loading, blur placeholders, and responsive sizing.

@doc-version: 16.2.6

Core Concepts

<Image> จาก next/image extends HTML <img> ด้วย:

• Size optimization — serve ภาพขนาดถูกต้องต่อ device + format WebP
• Visual stability — ป้องกัน layout shift อัตโนมัติ
• Faster page loads — lazy loading ด้วย native browser + blur-up placeholders
• Asset flexibility — resize on-demand แม้ภาพอยู่บน remote server

Guidelines

1. Basic Usage