BÀI 19: SỬ DỤNG NUXT IMAGE VÀ TỐI ƯU HÌNH ẢNH

Tiếp theo là Bài 19 – Sử dụng Nuxt Image và tối ưu hình ảnh. Trong các website hiện đại, hình ảnh là yếu tố quan trọng ảnh hưởng đến cả tốc độ tải trang và trải nghiệm người dùng. Nuxt cung cấp module @nuxt/image giúp bạn dễ dàng tối ưu ảnh mà không cần cài thêm plugin bên ngoài.

---

1. Vì sao nên dùng Nuxt Image?

• Tự động resize ảnh theo kích thước thực tế
• Tự động chuyển sang định dạng nhẹ hơn (WebP/AVIF)
• Hỗ trợ lazy-load (chỉ tải khi cuộn đến)
• Giảm dung lượng mà không giảm chất lượng
• Tương thích CDN như Cloudinary, Imgix, IPX…

---

2. Cài đặt module Nuxt Image

Chạy:

📋 Copynpm install @nuxt/image

Thêm vào nuxt.config.ts:

📋 Copyexport default defineNuxtConfig({
  modules: ['@nuxt/image']
})

---

3. Sử dụng <NuxtImg> thay cho <img>

Thay vì dùng:

📋 Copy<img src="/images/nuxt.jpg" alt="Nuxt logo">

Bạn dùng:

📋 Copy<NuxtImg src="/images/nuxt.jpg" alt="Nuxt logo" width="300" height="200" />

Lợi ích:

• Tự động tối ưu
• Có lazy-load
• Có responsive
• Có format WebP (nếu hỗ trợ)

---

4. Các props thường dùng

📋 Copy<NuxtImg
  src="/images/nuxt.jpg"
  width="400"
  height="300"
  alt="Banner Nuxt"
  quality="80"
  format="webp"
  sizes="(max-width: 768px) 100vw, 50vw"
  class="rounded shadow"
/>

Giải thích:

• width, height: đảm bảo kích thước chuẩn
• quality: chất lượng ảnh (từ 0–100)
• format: định dạng ảnh (webp, avif, jpg)
• sizes: tối ưu responsive
• lazy: mặc định là true

---

5. Tối ưu ảnh trong Markdown

Giả sử trong file Markdown bạn viết:

📋 Copy![Vue Logo](/images/vue-logo.png)

Nuxt sẽ render <img> bình thường. Để thay bằng <NuxtImg>, bạn có thể:

Cách 1: Viết HTML trực tiếp trong Markdown

📋 Copy<NuxtImg src="/images/vue-logo.png" width="200" />

Lưu ý: file Markdown phải đặt là .md và không dùng vite:remark.

Cách 2: Viết plugin chuyển đổi Markdown image → NuxtImg (nâng cao)

Bạn có thể custom renderer để tự động thay thế nếu cần.

---

6. Dùng provider ngoài: Cloudinary, IPX, Imgix…

Trong nuxt.config.ts:

📋 Copyimage: {
  providers: {
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/'
    }
  },
  provider: 'cloudinary'
}

Sau đó:

📋 Copy<NuxtImg src="sample.jpg" width="400" />

→ Tự động resize, crop, optimize qua Cloudinary

---

7. So sánh <img> vs <NuxtImg>

Tính năng	<img>	<NuxtImg>
Lazy load	Không	Có
WebP support	Không	Có
Tự động resize	Không	Có
Responsive	⚠️	Có
CDN / format AVIF	Không	Có

---

8. Dùng NuxtPicture (nâng cao)

Nếu bạn muốn tối ưu tối đa cho nhiều thiết bị:

📋 Copy<NuxtPicture
  src="/images/hero.jpg"
  width="600"
  height="400"
  format="webp"
  alt="Hero Image"
/>

→ Tự động sinh các thẻ <source> cho nhiều định dạng và độ phân giải

---

Bạn đã học được

• Cài và cấu hình module @nuxt/image
• Sử dụng <NuxtImg> để thay thế <img>
• Tối ưu ảnh tự động: resize, lazy, webp
• Dùng ảnh trong Markdown
• Tích hợp provider ngoài như Cloudinary

---

Bài tập mở rộng

1. Cài module @nuxt/image và test ảnh trong trang
2. Chuyển toàn bộ <img> trong blog sang <NuxtImg>
3. Thêm thuộc tính width, height, quality
4. Dùng thử Cloudinary nếu có tài khoản