Giảm dung lượng ảnh đúng cách: đổi kích thước trước, nén sau

1. Thứ tự quyết định kết quả

Hầu hết mọi người tìm đến thanh chỉnh chất lượng trước tiên. Thứ tự hiệu quả lại ngược lại.

Đổi kích thước về đúng kích thước thực tế được hiển thị

Chọn định dạng phù hợp

Sau đó mới chỉnh giá trị chất lượng

Nếu một bức ảnh rộng 4000 px chỉ hiển thị ở 800 px, 3200 px còn lại chỉ thêm dung lượng mà không đóng góp gì có thể nhìn thấy. Giảm chiều rộng xuống một phần năm sẽ giảm số điểm ảnh xuống một phần hai mươi lăm. Không thiết lập chất lượng nào tiết kiệm được nhiều đến vậy.

2. Nén mất dữ liệu và không mất dữ liệu

Không mất dữ liệu (PNG, WebP lossless): điểm ảnh gốc được khôi phục chính xác. Phù hợp cho ảnh chụp màn hình, sơ đồ và hình có chữ.

Mất dữ liệu (JPEG, WebP lossy, AVIF): loại bỏ những thông tin mắt người ít nhạy cảm nhất. Phù hợp cho ảnh chụp.

Nén mất dữ liệu là không thể đảo ngược. Lưu lại một tệp JPEG nhiều lần sẽ làm tổn thất tích tụ qua mỗi lần lưu. Hãy giữ bản gốc và nén một bản sao.

3. Chọn định dạng

| Định dạng | Phù hợp nhất cho | Ghi chú |
|---|---|---|
| JPEG | Ảnh chụp | Được hỗ trợ ở mọi nơi, không có nền trong suốt |
| PNG | Ảnh chụp màn hình, logo, sơ đồ | Không mất dữ liệu, có nền trong suốt, quá nặng cho ảnh chụp |
| WebP | Phần lớn hình ảnh trên web | Nhỏ hơn JPEG 25–35%, hỗ trợ nền trong suốt và ảnh động |
| AVIF | Ảnh chụp | Nhỏ hơn WebP, mã hóa chậm hơn |

Lưu ảnh chụp màn hình thành JPEG là lỗi thường gặp: viền chữ xuất hiện nhiễu dễ thấy mà tệp cũng chẳng nhỏ hơn PNG là bao.

4. Nên hạ chất lượng đến đâu

Với JPEG và WebP, khoảng 0.75–0.85 là điểm cân bằng thực tế.

Trên 0.9: tệp lớn hơn nhiều nhưng lợi ích gần như không thấy được

0.75–0.85: khó nhận ra sự suy giảm ở hầu hết ảnh chụp

Dưới 0.6: xuất hiện hiện tượng phân dải ở vùng chuyển màu mịn như bầu trời hay làn da

Mức phù hợp khác nhau theo từng ảnh, vì vậy hãy so sánh bằng mắt ở kích thước hiển thị thực tế.

5. Nén ảnh và quyền riêng tư

Ảnh chụp bằng điện thoại chứa siêu dữ liệu EXIF: thời điểm chụp, kiểu máy và — tùy cài đặt — tọa độ GPS. Đăng một bức ảnh chụp ở nhà có thể làm lộ vị trí của bạn.

Các công cụ nén vẽ lại ảnh qua canvas thường loại bỏ EXIF. Mỗi công cụ hoạt động khác nhau, vì vậy hãy kiểm tra thuộc tính tệp kết quả khi điều này quan trọng.

6. Góc nhìn hiệu năng web

Hình ảnh lớn nhất trên trang thường là phần tử LCP, nghĩa là dung lượng ảnh chính là thời gian tải mà người dùng cảm nhận.

Chỉ chuẩn bị tối đa gấp đôi kích thước hiển thị cho màn hình mật độ điểm ảnh cao.

Thêm loading="lazy" cho các ảnh nằm dưới màn hình đầu tiên.

Đặt width và height để tránh xô lệch bố cục (CLS).

7. Công cụ

Công cụ nén ảnh EVEDAYS nén và chuyển đổi giữa PNG, JPG và WebP ngay trong trình duyệt. Vì không có bước tải lên, tệp không bao giờ bị lộ trong quá trình truyền — dù vậy điều này không bảo vệ bạn khỏi phần mềm độc hại đã có sẵn trên thiết bị.

8. Nguồn

web.dev — Optimize images

MDN — Image file type and format guide