Cách Tối Ưu Hình Ảnh Cho Website: Hướng Dẫn Toàn Diện

Ảnh chiếm khoảng 40% dung lượng trang web trung bình. Tối ưu đúng cách giúp giảm một nửa dung lượng trang, đạt Largest Contentful Paint dưới 2.5 giây, và cải thiện thứ hạng trên công cụ tìm kiếm. Đây là toàn bộ quy trình, từng bước.

Tại sao tối ưu ảnh ngày càng quan trọng

Theo dữ liệu HTTP Archive, trang web trung bình hiện nặng khoảng 2.5 MB trên di động, và ảnh chiếm khoảng 1 MB. Core Web Vitals của Google — cụ thể là Largest Contentful Paint (LCP) — đo trực tiếp tốc độ tải phần tử lớn nhất nhìn thấy. Trên hầu hết trang, phần tử đó là một bức ảnh.

Chuẩn mực: LCP 2.5 giây trở xuống là "tốt." Trên 4 giây là "kém." Trang có phần tử LCP là ảnh có thời gian tải ở phân vị thứ 75 chậm gần gấp đôi so với trang LCP dạng chữ. Chênh lệch giữa ảnh hero đã tối ưu và ảnh chưa tối ưu thường là khác biệt giữa Core Web Vitals xanh và đỏ.

Bước 1: Chọn đúng định dạng

Định dạng ảnh hưởng lớn nhất đến dung lượng file. Đây là so sánh các định dạng web chính:

Với hầu hết website, WebP là lựa chọn mặc định an toàn nhất. Nó xử lý tốt cả ảnh chụp và đồ họa, nén mạnh, và hoạt động khắp nơi. Nếu hệ thống hỗ trợ, phục vụ AVIF là ưu tiên với WebP là phương án dự phòng qua thẻ <picture>. Bạn có thể chuyển JPG sang WebP hoặc chuyển sang AVIF với Vizua — mọi thứ chạy trên trình duyệt, không cần tải lên.

Muốn so sánh sâu hơn? Xem bài WebP vs AVIF và bài giải thích nén lossy vs lossless.

Bước 2: Resize về kích thước hiển thị thực tế

Ảnh 4000 x 3000 pixel từ máy ảnh hiển thị ở 800 x 600 trên website lãng phí khoảng 80% pixel. Những pixel vô hình đó vẫn tốn băng thông và thời gian xử lý.

Nguyên tắc: phục vụ ảnh ở kích thước gần hoặc bằng kích thước hiển thị. Trên màn hình thường, khớp chính xác kích thước pixel. Trên màn hình Retina 2x, phục vụ ảnh rộng gấp đôi — nhưng không hơn.

Mục tiêu thực tế:

• Hero toàn trang: 1600-1920px rộng (tối đa 2x cho Retina)
• Ảnh nội dung blog: 800-1200px rộng
• Thumbnail: 300-400px rộng
• Avatar: 64-128px (tối đa 256px cho 2x)

Dùng công cụ thay đổi kích thước của Vizua để resize ảnh về chiều rộng chính xác trước khi nén. Riêng bước này có thể giảm 70-90% dung lượng.

Bước 3: Nén với mức chất lượng phù hợp

Sau khi chọn định dạng và resize, nén là bước vắt kiệt dung lượng còn lại. Thanh trượt chất lượng quan trọng hơn nhiều người nghĩ — mối quan hệ giữa chất lượng và dung lượng không tuyến tính. Giảm JPEG từ 100 xuống 80 tiết kiệm rất nhiều; giảm từ 80 xuống 60 cho lợi ích giảm dần với artifact nhìn thấy.

Cài đặt chất lượng khuyến nghị:

• JPEG: 75-85 — điểm tối ưu cho ảnh chụp. JPEG chất lượng 80 thường nhỏ hơn 60-80% so với ảnh gốc không nén mà không thể phân biệt.
• WebP: 75-80 — chất lượng thị giác tương đương JPEG 85, trong file nhỏ hơn.
• AVIF: 60-75 — con số thấp hơn vẫn trông tốt nhờ hiệu quả codec.
• PNG: Dùng mức nén tối đa (lossless). Để tiết kiệm thêm, giảm xuống 8-bit (256 màu) khi đồ họa cho phép.

Công cụ nén JPEG của Vizua xử lý tự động bằng thuật toán tối ưu giữ cạnh và gradient. Để biết chi tiết cài đặt theo từng định dạng, xem bài nén ảnh không giảm chất lượng.

Bước 4: Phân phối ảnh hiệu quả

Nén tốt chỉ là một nửa. Cách bạn phân phối ảnh đến trình duyệt cũng quan trọng không kém cho hiệu suất.

Đặt kích thước rõ ràng

Luôn thêm thuộc tính width và height vào thẻ <img> (hoặc dùng CSS aspect-ratio). Điều này ngăn layout shift — nội dung nhảy lung tung khi ảnh tải — ảnh hưởng trực tiếp điểm Cumulative Layout Shift (CLS).

Lazy-load ảnh dưới fold

Thêm loading="lazy" cho mọi ảnh không nhìn thấy khi trang tải lần đầu. Trình duyệt sẽ trì hoãn tải cho đến khi người dùng cuộn gần đó, tiết kiệm băng thông cho lần tải đầu tiên.

Ưu tiên ảnh hero

Làm ngược lại cho ảnh quan trọng nhất trên fold: thêm fetchpriority="high" và đảm bảo nó không có loading="lazy". Theo thử nghiệm của Google, ảnh LCP được preload đạt hiệu suất gần hoàn hảo (phân vị 75 là 364ms), trong khi ảnh LCP bị lazy-load chậm gần gấp đôi (720ms).

Dùng ảnh responsive

Thuộc tính srcset và sizes cho phép trình duyệt chọn biến thể ảnh phù hợp nhất cho kích thước và độ phân giải màn hình. Phục vụ ảnh 400px cho điện thoại, 800px cho tablet, và 1600px cho desktop — tất cả từ một thẻ <img>.

Bước 5: Kiểm tra và đo lường

Tối ưu ảnh không phải làm một lần rồi quên. Mỗi ảnh mới thêm vào là cơ hội để hiệu suất tụt lại.

• PageSpeed Insights: Chạy PageSpeed Insights của Google trên các trang quan trọng. Xem điểm LCP và khuyến nghị "Serve images in next-gen formats" hoặc "Properly size images".
• DevTools Network: Kiểm tra tab Network trong DevTools trình duyệt. Sắp xếp theo dung lượng. Nếu ảnh nào vượt 200 KB, cân nhắc resize, nén lại, hoặc chuyển định dạng tốt hơn.
• Tự động hóa: Thêm tối ưu ảnh vào pipeline build. Phát hiện ảnh quá nặng trước khi chúng lên production.

Checklist tối ưu ảnh nhanh

• Dùng WebP hoặc AVIF làm định dạng mặc định
• Resize ảnh về kích thước hiển thị thực tế (không rộng hơn cần thiết)
• Nén: JPEG/WebP chất lượng 75-85, AVIF chất lượng 60-75
• Đặt width và height trên mọi thẻ <img>
• fetchpriority="high" trên ảnh hero/LCP
• loading="lazy" cho ảnh dưới fold
• Dùng srcset/sizes cho phân phối responsive
• Giữ ảnh hero dưới 200 KB, thumbnail dưới 80 KB
• Xóa metadata không cần thiết (EXIF, ICC profile) — xem bài dữ liệu EXIF và quyền riêng tư
• Kiểm tra định kỳ với PageSpeed Insights

Câu hỏi thường gặp