Tối ưu ảnh cho website: kích thước, nén và định dạng

Ảnh đẹp làm website có hồn, nhưng ảnh nặng làm website chậm. Một tấm ảnh chụp từ điện thoại có thể nặng vài MB, trong khi khung hiển thị trên website chỉ rộng vài trăm điểm ảnh. Tối ưu ảnh cho website là làm cho tấm ảnh vừa đủ cho chỗ nó xuất hiện: không thừa điểm ảnh, không thừa dung lượng, vẫn đẹp mắt.

Tóm tắt nhanh

• Thu nhỏ ảnh về đúng kích thước cần hiển thị, đừng tải nguyên ảnh gốc lên.
• Nén ảnh để nhẹ đi mà mắt thường khó nhận ra khác biệt.
• Chọn định dạng hợp từng loại ảnh: WebP cho phần lớn ảnh, JPEG cho ảnh chụp, PNG hoặc SVG cho logo và hình có nền trong suốt.
• Đặt tên tệp rõ nghĩa và viết mô tả (alt) cho ảnh quan trọng.
• Đo lại tốc độ sau khi đổi để biết việc làm có tác dụng.

Vì sao ảnh quan trọng với tốc độ

Trên đa số website, ảnh là phần nặng nhất của trang. Ảnh càng nặng, trang càng lâu hiện, khách càng dễ bỏ đi, và các chỉ số tốc độ của Google (như LCP, thời gian hiện phần nội dung lớn nhất) càng kém. Xử lý ảnh thường là việc mang lại cải thiện rõ nhất mà ít rủi ro nhất. Bức tranh rộng hơn về tốc độ có ở trang Tối ưu tốc độ website và SEO kỹ thuật.

Bước 1: Chọn đúng kích thước

Hãy hỏi: ảnh này sẽ hiển thị rộng bao nhiêu trên website? Rồi chuẩn bị ảnh theo đó:

• Ảnh nền, banner rộng toàn trang: chiều rộng khoảng 1600 đến 2000 điểm ảnh là thường đủ.
• Ảnh trong bài viết: khoảng 800 đến 1200 điểm ảnh.
• Ảnh sản phẩm trong danh sách: khoảng 600 đến 800 điểm ảnh.

Đây là mức tham khảo. Màn hình độ nét cao hiển thị ảnh gấp đôi số điểm ảnh, nên có thể chuẩn bị rộng hơn khoảng hai lần so với khung hiển thị, nhưng không cần hơn. Ảnh 4000 điểm ảnh đặt vào khung 400 điểm ảnh chỉ làm phí dung lượng.

Bước 2: Nén ảnh

Nén có hai kiểu:

• Nén có mất dữ liệu (lossy): bỏ bớt những chi tiết mắt thường khó thấy để nhẹ hơn nhiều. Phù hợp ảnh chụp, ảnh sản phẩm.
• Nén không mất dữ liệu (lossless): giảm dung lượng nhưng giữ nguyên từng điểm ảnh. Phù hợp logo, hình vẽ, ảnh chụp màn hình.

Với ảnh chụp, mức chất lượng khoảng 75 đến 85 thường cho ảnh vẫn đẹp mà nhẹ đi đáng kể. Cứ thử vài mức rồi so bằng mắt: dừng ở mức thấp nhất mà anh/chị chưa thấy khác. Công cụ như Squoosh (chạy ngay trên trình duyệt, miễn phí) cho xem ảnh trước và sau khi nén cạnh nhau.

Một mục tiêu thực tế là mỗi ảnh thường chỉ vài trăm KB trở xuống; ảnh trang trí nhỏ thì còn nhẹ hơn nhiều.

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

Định dạng	Hợp với	Ghi chú
JPEG	Ảnh chụp	Phổ biến, nhẹ, không có nền trong suốt.
PNG	Ảnh cần nền trong suốt, ảnh chụp màn hình	Nặng hơn JPEG với ảnh chụp.
WebP	Hầu hết ảnh trên website	Nhẹ hơn JPEG và PNG ở cùng chất lượng, trình duyệt hiện nay đều hỗ trợ.
AVIF	Ảnh cần nhẹ tối đa	Nhẹ hơn WebP nhưng tạo ảnh chậm hơn.
SVG	Logo, biểu tượng, hình vẽ đơn giản	Ảnh vector, nét ở mọi kích thước, rất nhẹ.

Lời khuyên giản dị: dùng WebP cho ảnh chụp và ảnh minh hoạ, SVG cho logo và biểu tượng, và chỉ dùng PNG khi thật sự cần.

Bước 4: Đặt tên và mô tả ảnh

• Tên tệp rõ nghĩa: ao-so-mi-trang-nam.webp hữu ích hơn IMG_4032.webp. Dùng chữ không dấu, viết thường, nối bằng dấu gạch ngang.
• Văn bản thay thế (alt): một câu ngắn mô tả đúng nội dung ảnh, ví dụ "Áo sơ mi trắng nam cổ trụ". Alt giúp người dùng đọc màn hình và giúp Google hiểu ảnh. Viết cho người đọc, không nhồi từ khoá.
• Ảnh trang trí không cần mô tả, để alt trống.

Mẹo giữ website nhanh

• Khai báo sẵn chiều rộng và chiều cao ảnh để trang không bị nhảy khi ảnh tải xong.
• Ảnh nằm dưới màn hình đầu tiên nên được tải khi khách cuộn tới (lazy load), còn ảnh đầu trang thì tải ngay.
• Khi thay ảnh cũ, giữ nguyên tên tệp nếu được, để các liên kết đang có không bị hỏng.
• Làm thành thói quen: mỗi ảnh trước khi đăng, thu nhỏ rồi nén.

Website do DSIC làm và chăm sóc có sẵn các bước xử lý này. Nếu anh/chị muốn giao việc chuẩn bị ảnh, xem Cập nhật nội dung website.

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

Ảnh bao nhiêu KB là vừa?

Không có con số cứng. Với ảnh trong bài hoặc ảnh sản phẩm, vài trăm KB trở xuống thường ổn. Quan trọng là ảnh đúng kích thước hiển thị và đã được nén.

Nén ảnh có làm ảnh xấu đi không?

Nén vừa phải thì mắt thường rất khó nhận ra. Nén quá mạnh mới thấy ảnh bị vỡ hạt. Hãy thử vài mức chất lượng và chọn mức thấp nhất vẫn đẹp.

Có nên dùng WebP không? Trình duyệt có hiểu không?

Có. Các trình duyệt hiện nay đều hỗ trợ WebP, và ảnh WebP nhẹ hơn JPEG ở cùng chất lượng.

Có cần viết alt cho mọi ảnh không?

Cho ảnh mang nội dung (sản phẩm, minh hoạ bài viết) thì nên. Ảnh chỉ để trang trí thì để alt trống.