การใช้งาน Image Component(next/image)

next/image เป็น Component ที่ Next.js ให้มาเพื่อจัดการรูปภาพ ซึ่งการใช้งาน next/image จะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บผ่านการปรับแต่งภาพอัตโนมัติ เช่น การบีบอัด การปรับขนาด และการใช้ฟอร์แมตที่เหมาะสมกับอุปกรณ์ของผู้ใช้งาน

คุณสมบัติของ next/image

• การโหลดรูปภาพแบบ Lazy Loading: ช่วยให้หน้าเว็บโหลดเร็วขึ้น
• การปรับขนาดรูปอัตโนมัติ: รองรับการกำหนดขนาดภาพตามอุปกรณ์ที่ใช้งาน
• การแสดงผลภาพแบบ Responsive: ปรับขนาดตามหน้าจอที่แตกต่างกัน
• การรองรับฟอร์แมตที่เหมาะสม: แปลงไฟล์เป็น WebP หรือ AVIF โดยอัตโนมัติ (ถ้าเบราว์เซอร์รองรับ)
• การแคชและ CDN: รูปภาพจะถูกแคชและโหลดจาก CDN ของ Next.js

วิธีการใช้งาน next/image

1. การติดตั้ง Next.js (ถ้ายังไม่มีโปรเจกต์)

หากเรายังไม่มีโปรเจกต์ Next.js สามารถสร้างได้โดยใช้คำสั่งต่อไปนี้:

npx create-next-app@latest my-next-app
cd my-next-app
npm install

2. นำเข้าและใช้งาน next/image

ใน Next.js เราสามารถใช้งาน next/image ได้โดยการนำเข้าและใช้งานแทน <img> ปกติ ดังนี้:

import Image from 'next/image';
import myImage from '../public/my-image.jpg';

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <Image
        src={myImage}
        alt="My Image"
        width={500}
        height={300}
        priority
      />
    </div>
  );
}

3. การใช้ next/image กับ External Images

หากรูปภาพของเราอยู่ในเซิร์ฟเวอร์ภายนอก เราต้องกำหนดค่าใน next.config.js เพื่ออนุญาตโดเมนของรูปภาพ:

module.exports = {
  images: {
    domains: ['example.com'],
  },
};

จากนั้นสามารถใช้งานได้ดังนี้:

import Image from 'next/image';

export default function ExternalImage() {
  return (
    <Image
      src="https://example.com/image.jpg"
      alt="External Image"
      width={500}
      height={300}
    />
  );
}

4. การใช้คุณสมบัติ Layout

next/image มี layout ที่ช่วยให้ภาพปรับขนาดได้อัตโนมัติ:

• intrinsic – ปรับขนาดภาพตามขนาดต้นฉบับ
• responsive – ปรับขนาดภาพให้เต็ม container
• fill – ขยายภาพเต็มพื้นที่ที่กำหนด

ตัวอย่าง:

<Image
  src="/example.jpg"
  alt="Example"
  layout="responsive"
  width={800}
  height={600}
/>

5. การเพิ่มคุณสมบัติ Placeholder

เราสามารถใช้ placeholder="blur" เพื่อให้มีเอฟเฟกต์เบลอก่อนโหลดภาพ:

<Image
  src="/example.jpg"
  alt="Example"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,..."
/>

สรุป

next/image เป็นเครื่องมือที่ช่วยเพิ่มประสิทธิภาพของเว็บไซต์ที่ใช้ Next.js ได้อย่างมาก โดยช่วยลดขนาดภาพ ปรับขนาดอัตโนมัติ และทำให้โหลดเร็วขึ้น ซึ่งช่วยให้ประสบการณ์ใช้งานดีขึ้นและเพิ่มคะแนน SEO ของเว็บได้อีกด้วย