การใช้งาน Image Component

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> ปกติ ดังนี้:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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

ในตัวอย่างนี้เราจะนำ ​Image เข้ามาโดยการ import ในบรรทัดที่ 2 และ Load เข้าไปใน DOM ด้วย property src ในบรรทัดที่ 9

นอกจาก property src แล้ว Image Component ยังมี props อื่นๆที่ต้องรู้จักไว้ ดังนี้

Image Component จะบังคับให้เราใส่ props 2 ตัวคือ src และ alt

3. Next.JS Image กับ External URL

หากรูปภาพของเราอยู่ใน Server ภายนอก เช่น Image เรามาจาก CDN เราต้องกำหนดค่าใน next.config.js เพื่ออนุญาตให้ Load รูปภาพจากโดเมนที่อยู่ใน Whitelist นี้ได้ เช่น ในตัวอย่างนี้เราต้องการให้สามารถ Load รูปภาพได้แค่ Domain example.com เท่านั้น

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

จากนั้นเราจึงจะเรียกใช้งาน Image Source ได้แบบนี้

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. Responsive

next/image มีความสามารถในการปรับขนาดของรูปตามขนาดของหน้าจอ(Responsive Image) ซึ่งเราสามารถกำหนดค่าต่างๆ ดังนี้

1. กำหนด Style โดยให้ความกว้างของรูปเท่ากับความกว้างของ Container แต่ความสูงให้คำนวนจาก Aspect Ratio เพื่อให้คงสัดส่วนของรูปไว้

   <Image
     src={myImage}
     alt="Example"
     sizes="100vw"
     // ความกว้างเต็มพื้นที่ ส่วนความสูงคำนวนจากความกว้างของรูป
     style={{
       width: '100%',
       height: 'auto',
     }}
   />
   

   แต่ถ้ารูปนี้ไม่ได้ import เข้ามาแต่ใช้การ Load มาจาก URL เราต้องใส่ width และ height เพื่ิอบอกสัดส่วนของรูปให้ Next.js ได้รู้

2. Responsive โดยการใช้ fill, ObjectFit และ sizes(เราจะใช้ในกรณีที่เราไม่รู้ Aspect Ratio ของรูป)

<Image
  src={myImage}
  alt="Example"
  fill
  sizes="(min-width: 808px) 50vw, 100vw"
  style={{
    objectFit: 'cover', // cover, contain, none
  }}
/>

ในตัวอย่างนี้เรากำหนด props เข้าไปดังต่อไปนี้

• fill เป็น true เพื่อให้รูปขยายเต็มพื้นที่
• sizes เป็น Media Query ที่กำหนดให้ความกว้างของรูปเป็นครึ่งหนึ่งเมื่อขนาดของหน้าจอที่เปิดกว้างกว่า 808px
• ObjectFit เราจะกำหนด Style เข้าไปด้วยว่าจะให้ Scale รูปภาพแบบไหน โดยมี 3 ทางเลือก ดังนี้
  1. contain รูปภาพจะย่อขนาดลงมาแต่ยังคงสัดส่วนของรูป(Aspect Ratio)ไว้
  2. cover รูปภาพจะถูกเติมให้เต็ม Container และอาจถูกตัดบางส่วนออก(Crop)
  3. none รูปภาพจะถูกยืดให้เท่ากับขนาดของ Container โดยไม่สนใจ Aspect Ratio

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

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

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

สรุป

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