Giảm dung lượng ảnh cho website mà không mờ: 4 bước đúng số

Ảnh chụp từ điện thoại thường nặng 3–6 MB. Đưa thẳng lên website, mỗi trang có vài ảnh như vậy là khách dùng 4G phải chờ vài giây mới thấy nội dung, và nhiều người bấm quay lại trước khi trang kịp hiện. Ảnh trên web gần như không bao giờ cần nặng hơn 300 KB; bài này chỉ cách giảm dung lượng ảnh xuống mức đó mà mắt người xem không thấy khác.

Vì sao ảnh nặng làm website mất khách?

• Trang tải chậm: ảnh thường chiếm phần lớn dung lượng một trang; ảnh ở màn đầu càng nặng, trang càng lâu hiện.
• Điểm PageSpeed thấp: Google đo thời gian hiện phần lớn nhất của màn đầu (LCP), và phần lớn đó thường là một tấm ảnh.
• Tốn băng thông, tốn dung lượng lưu trữ: ảnh 5 MB được tải hàng nghìn lượt mỗi tháng là con số không nhỏ.

Mục tiêu nên đặt: ảnh tràn khung (banner, ảnh bìa) dưới 300 KB; ảnh trong bài, ảnh sản phẩm dưới 150 KB; ảnh nhỏ, ảnh đại diện dưới 50 KB.

Bước 1: Thu nhỏ kích thước về đúng chỗ ảnh hiển thị

Đây là bước giảm nhiều nhất mà nhiều người bỏ qua. Ảnh điện thoại rộng khoảng 4.000 px, trong khi khung bài viết trên web chỉ rộng khoảng 800 px; trình duyệt vẫn phải tải đủ 4.000 px rồi mới thu nhỏ lại.

Vị trí ảnh	Chiều rộng nên dùng
Ảnh tràn hết màn hình (banner, ảnh bìa)	1.600–1.920 px
Ảnh trong bài viết	1.200 px
Ảnh sản phẩm, ảnh thẻ	800 px
Ảnh đại diện, logo đối tác	200–400 px

Chỉ riêng việc đưa ảnh 4.000 px về 1.200 px đã giảm dung lượng nhiều lần, mà vẫn đủ nét trên màn hình điện thoại độ phân giải cao.

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

• Ảnh chụp (người, sản phẩm, phong cảnh): WebP, hoặc JPEG nếu nơi nhận chưa đọc được WebP.
• Ảnh có nền trong suốt: WebP hoặc PNG.
• Logo, icon, hình nét đơn giản: SVG nếu có, vì phóng to bao nhiêu cũng nét và rất nhẹ.

Lỗi hay gặp nhất là lưu ảnh chụp thành PNG: cùng một tấm ảnh, file PNG có thể nặng gấp nhiều lần JPEG. Chi tiết về WebP và cách chuyển hàng loạt có ở bài Chuyển ảnh sang WebP cho website.

Bước 3: Nén với chất lượng 75–82

Thanh "chất lượng" khi lưu ảnh là chỗ quyết định ảnh có bị mờ hay không.

• 75–82: mức cân bằng cho ảnh chụp; dung lượng giảm mạnh, mắt thường khó thấy khác.
• 85–90: cho ảnh có chữ nhỏ, ảnh chụp màn hình, ảnh sản phẩm cần thấy rõ chất liệu.
• Dưới 65: bắt đầu thấy vệt mờ ở vùng trời, vùng da, mép chữ; không nên dùng cho ảnh chính.

Ảnh "bị mờ sau khi nén" nhiều khi không do nén mà do bị phóng to: ảnh 600 px đặt vào khung 1.200 px thì trình duyệt phải kéo giãn gấp đôi. Vì vậy ở bước 1 chỉ thu nhỏ về đúng chiều rộng khung, không nhỏ hơn.

Bước 4: Nén thử và so bằng mắt

Dùng công cụ nén ảnh online miễn phí của Digotech:

1. Thả một hoặc nhiều ảnh vào khung; ảnh không bị gửi lên mạng, mọi thứ chạy trên trình duyệt của bạn.
2. Chọn lưu thành WebP, đặt chiều rộng tối đa theo bảng ở bước 1, kéo chất lượng về khoảng 78.
3. Xem dung lượng trước và sau, phóng to vùng có chữ hoặc chi tiết nhỏ để so; ổn thì tải về.

Một tấm ảnh điện thoại 4 MB qua 4 bước này thường còn khoảng 100–200 KB.

Ảnh nhẹ rồi mà trang vẫn chậm?

Nén ảnh là việc nên làm đầu tiên, nhưng không phải việc duy nhất. Trang còn chậm vì tải cả ảnh ở màn dưới ngay từ đầu, vì quá nhiều mã chạy kèm, vì máy chủ ở xa hoặc quá tải. Danh sách việc cần soát có ở bài 7 việc nâng điểm PageSpeed không đổi thiết kế. Nếu không có thời gian tự làm, Digotech nhận nâng cấp website hiện có: tối ưu ảnh hàng loạt, tải ảnh theo khổ màn hình và làm trang mở nhanh trên điện thoại.