Cách tối ưu dung lượng ảnh bằng Next/Image & Định dạng WebP/AVIF cho Website

Hình ảnh chiếm tới 60-80% tổng dung lượng tải trang của một website. Nếu không nén ảnh và tối ưu chuẩn kỹ thuật, website của bạn sẽ bị điểm tốc độ Google PageSpeed (Core Web Vitals - chỉ số LCP) màu đỏ tệ hại, làm tụt thứ hạng SEO. Bài viết này hướng dẫn tối ưu hình ảnh bằng Next/Image.

1. Vì sao nên dùng định dạng ảnh thế hệ mới WebP & AVIF?

• WebP: Giảm dung lượng từ 30% đến 50% so với PNG/JPEG mà chất lượng hình ảnh hiển thị mắt thường không thay đổi.
• AVIF: Định dạng ảnh thế hệ mới nhất do Google hậu thuẫn, giảm tới 70% dung lượng so với JPEG.

2. 3 Tính năng vượt trội của Component Image trong Next.js

1. Tự động chuyển đổi định dạng (Automatic Format Conversion): Server Next.js tự động quét trình duyệt của khách (Chrome/Safari) để trả về file nén WebP/AVIF nhẹ nhất.
2. Tự động thay đổi kích thước (Responsive Resizing): Tự động sinh ra các kích thước ảnh phù hợp với độ phân giải màn hình điện thoại hay máy tính, tránh tải file 4K trên điện thoại di động.
3. Tải chậm thông minh (Lazy Loading): Chỉ tải hình ảnh khi người dùng cuộn chuột tới vị trí của ảnh, giúp giao diện đầu trang nạp tức thì.

3. Cách sử dụng Next/Image chuẩn Performance

Trong mã nguồn Next.js App Router:

import Image from 'next/image';
import { ASSETS } from '@/constants/assets';

export default function Banner() {
  return (
    <Image
      src={ASSETS.HERO_BANNER}
      alt="Thiết kế website chuẩn SEO"
      width={1200}
      height={630}
      priority={true} // Ưu tiên tải ngay nếu nằm ở đầu trang (Hero section)
      quality={85}
    />
  );
}

Lưu ý: Luôn tuân thủ quy tắc khai báo assets tập trung tại src/constants/assets.js theo quy định mã nguồn.

Kết luận

Tối ưu hình ảnh là bước dễ nhất để nâng điểm tốc độ website từ đỏ lên xanh 90+. Uwmee Software thiết kế 100% website Next.js được tối ưu ảnh Next/Image WebP tự động. Đọc thêm bài viết 8 tiêu chí đánh giá website chuẩn SEO và cách tiết kiệm chi phí duy trì hosting.