Giới Thiệu

Hình ảnh thường là tài sản lớn nhất trên các trang web hiện đại, do đó việc tối ưu hóa chúng là rất quan trọng để cải thiện hiệu suất. Nuxt 3 cung cấp các công cụ mạnh mẽ tích hợp sẵn để tối ưu hóa hình ảnh thông qua module @nuxt/image. Trong hướng dẫn này, chúng ta sẽ khám phá cách tận dụng các tính năng này để có những hình ảnh phản hồi và hiệu quả.

Thiết Lập Tối Ưu Hóa Hình Ảnh

Đầu tiên, hãy cài đặt module Nuxt Image:

npm install @nuxt/image

Sau đó, thêm nó vào tệp nuxt.config.ts của bạn:

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

NuxtPicture vs NuxtImg: Khi Nào Sử Dụng Cái Nào

Nuxt cung cấp hai thành phần chính để tối ưu hóa hình ảnh:

NuxtPicture - Để Tối Ưu Tối Đa

NuxtPicture tạo ra phần tử <picture> với nhiều định dạng và kích thước:

<template>
  <NuxtPicture
    src="your-image.jpg"
    sizes="sm:100vw md:900px lg:1200px 2xl:1600px"
    :img-attrs="{ alt: 'Núi hùng vĩ lúc bình minh', class: 'hero' }"
    densities="1,2"
    :widths="[320,640,960,1200,1600]"
    format="avif,webp,jpeg"
    placeholder="blur"
  />
</template>

Điều này tạo ra:

• Nhiều định dạng: AVIF (nén tốt nhất), WebP (hỗ trợ tốt), JPEG (dự phòng)
• Hình ảnh phản hồi: Kích thước khác nhau cho các bề mặt màn hình khác nhau
• Hỗ trợ độ phân giải Retina: 1x và 2x pixel densities
• Hình ảnh mờ: Hiện trong khi tải

NuxtImg - Đối Với Các Trường Hợp Sử Dụng Đơn Giản

NuxtImg hoàn hảo khi bạn cần tối ưu hóa cơ bản:

<template>
  <NuxtImg
    src="your-image.jpg"
    sizes="sm:100vw md:800px lg:1200px"
    :modifiers="{ fit: 'cover', width: 1200, height: 800, quality: 80 }"
    alt="Hình ảnh mẫu"
    placeholder="blur"
    class="responsive-img"
  />
</template>

Giải Thích Các Tính Năng Chính

1. Tối Ưu Hóa Định Dạng

format="avif,webp,jpeg"

• AVIF: Định dạng thế hệ tiếp theo với 50% khả năng nén tốt hơn JPEG
• WebP: Nhỏ hơn 25-35% so với JPEG với hỗ trợ trình duyệt rộng rãi
• JPEG: Dự phòng phổ quát

2. Điểm Ngắt Phản Hồi

sizes="sm:100vw md:900px lg:1200px 2xl:1600px"
:widths="[320,640,960,1200,1600]"

Điều này tạo ra hình ảnh tối ưu cho từng kích thước màn hình, giảm băng thông trên thiết bị di động.

3. Hỗ Trợ Độ Phân Giải Pixel

densities="1,2"

Cung cấp hình ảnh độ phân giải cao cho màn hình retina trong khi giữ độ phân giải tiêu chuẩn cho màn hình thông thường.

4. Hình Ảnh Thông Minh

placeholder="blur"

Hiện một phiên bản mờ trong khi hình ảnh thực tải, cải thiện hiệu suất cảm nhận.

Lợi Ích Hiệu Suất

Việc sử dụng tối ưu hóa hình ảnh của Nuxt mang lại:

• Thời gian tải nhanh hơn: Kích thước tệp nhỏ hơn có nghĩa là tải xuống nhanh hơn
• Cải thiện Core Web Vitals: Hình ảnh tối ưu hóa cải thiện LCP (Largest Contentful Paint)
• Giảm băng thông: Đặc biệt quan trọng đối với người dùng di động
• Lựa chọn định dạng tự động: Trình duyệt tự động chọn định dạng được hỗ trợ tốt nhất

Thực Hành Tốt Nhất

1. Luôn chỉ định alt text cho khả năng truy cập
2. Sử dụng kích thước phù hợp - đừng phục vụ hình ảnh desktop cho di động
3. Chọn thành phần phù hợp:
   • NuxtPicture cho hình ảnh quan trọng và hình ảnh hero
   • NuxtImg cho hình ảnh nội dung và các trường hợp đơn giản
4. Đặt kích thước rõ ràng khi có thể để ngăn chặn sự dịch chuyển bố cục
5. Sử dụng hình ảnh mờ để cải thiện trải nghiệm người dùng

Tùy Chỉnh Hình Ảnh Của Bạn

.hero {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.responsive-img {
  max-width: 100%;
  height: auto;
}

Kết Luận

Các tính năng tối ưu hóa hình ảnh của Nuxt 3 giúp bạn dễ dàng phục vụ hình ảnh hiệu suất cao và phản hồi mà không cần thiết lập phức tạp. Bằng cách sử dụng NuxtPicture cho các hình ảnh quan trọng và NuxtImg cho nội dung, bạn có thể cải thiện đáng kể hiệu suất và trải nghiệm người dùng trên trang web của mình.

Sự lựa chọn định dạng tự động, điểm ngắt phản hồi và tính năng tải thông minh giúp tạo ra các ứng dụng web nhanh, hiện đại hoạt động tốt trên tất cả các thiết bị và tốc độ kết nối.