Chọn sai định dạng ảnh khiến trang web nặng gấp nhiều lần cần thiết, hoặc làm hỏng chất lượng hình mà lẽ ra phải sắc nét. Nguyên tắc chọn thực ra khá gọn, chỉ cần hiểu một khác biệt căn bản.
Mất dữ liệu và không mất dữ liệu
Đây là điều quyết định mọi thứ còn lại.
Nén không mất dữ liệu giữ nguyên từng điểm ảnh. Giải nén ra được đúng ảnh gốc, không sai một bit. Đổi lại tệp lớn hơn. PNG thuộc nhóm này.
Nén mất dữ liệu vứt bớt thông tin mà mắt người ít nhận ra để đổi lấy tệp nhỏ hơn nhiều. JPEG thuộc nhóm này.
Hệ quả quan trọng: ảnh nén mất dữ liệu xuống cấp mỗi lần lưu lại. Mở một tấm JPEG, sửa, lưu, rồi lặp lại — chất lượng giảm dần không hồi phục được. Luôn giữ bản gốc và chỉ xuất ra JPEG ở bước cuối.
JPEG
Thiết kế cho ảnh chụp — nơi màu sắc chuyển dần và không có đường biên sắc nét.
Hợp với: ảnh chụp, ảnh có nhiều sắc độ chuyển mượt.
Không hợp với: ảnh chụp màn hình, hình có chữ, logo, đồ hoạ mảng màu phẳng. Ở những vùng có đường biên rõ, JPEG tạo ra các vệt nhiễu quanh biên trông rất bẩn.
JPEG không hỗ trợ nền trong suốt. Mức chất lượng 75–85 thường là điểm cân bằng tốt; trên 90 tệp phình nhanh mà mắt thường khó phân biệt.
PNG
Nén không mất dữ liệu, hỗ trợ trong suốt đầy đủ.
Hợp với: logo, biểu tượng, ảnh chụp màn hình, đồ hoạ có chữ, bất cứ thứ gì cần nền trong.
Không hợp với: ảnh chụp. Một tấm ảnh chụp lưu PNG có thể nặng gấp năm tới mười lần so với JPEG cùng chất lượng cảm nhận.
Mẹo ít người biết: nếu ảnh chỉ dùng ít màu, chuyển sang PNG bảng màu 256 màu giảm dung lượng rất nhiều mà nhìn không khác gì.
WebP
Định dạng làm được cả hai kiểu nén, hỗ trợ trong suốt và cả ảnh động.
Ở chế độ mất dữ liệu, WebP thường cho tệp nhỏ hơn JPEG khoảng 25–35% ở cùng chất lượng cảm nhận. Ở chế độ không mất dữ liệu, nó thường nhỏ hơn PNG.
Điểm mạnh thực dụng: WebP thay thế được cả JPEG lẫn PNG vì vừa nén mạnh vừa giữ được nền trong. Hiện mọi trình duyệt hiện đại đều hỗ trợ.
AVIF
Thế hệ mới hơn, dựa trên công nghệ nén video AV1. Cho tệp nhỏ hơn WebP đáng kể, đặc biệt ở mức chất lượng thấp và với ảnh nhiều chi tiết. Hỗ trợ dải màu rộng.
Đánh đổi: mã hoá chậm hơn nhiều. Với thư viện hàng nghìn ảnh, thời gian xử lý là chi phí thật. Hỗ trợ trình duyệt tốt nhưng chưa phổ quát bằng WebP.
SVG — trường hợp riêng
SVG không lưu điểm ảnh mà lưu mô tả hình học: đường thẳng, đường cong, hình khối. Nghĩa là nó sắc nét ở mọi kích thước, phóng to bao nhiêu cũng không vỡ.
Hợp với: logo, biểu tượng, biểu đồ, minh hoạ hình khối. Tệp thường rất nhỏ.
Không dùng được cho: ảnh chụp.
Lưu ý bảo mật: SVG là XML và có thể chứa mã kịch bản. Đừng cho phép người dùng tải SVG lên mà không lọc kỹ.
Bảng chọn nhanh
| Loại nội dung | Nên dùng |
|---|---|
| Ảnh chụp trên web | WebP, dự phòng JPEG |
| Logo, biểu tượng | SVG |
| Ảnh chụp màn hình | PNG hoặc WebP không mất dữ liệu |
| Ảnh cần nền trong | WebP hoặc PNG |
| Ảnh động ngắn | WebP hoặc video, đừng dùng GIF |
| Bản gốc để lưu trữ | Định dạng gốc của máy ảnh, hoặc PNG |
Điều quan trọng hơn cả việc chọn định dạng
Nhiều người tối ưu định dạng rất kỹ nhưng vẫn tải lên ảnh 4000 điểm ảnh chiều ngang cho một khung hiển thị rộng 800 điểm ảnh. Thu nhỏ kích thước thật của ảnh gần như luôn tiết kiệm nhiều hơn mọi mẹo nén.
Thứ tự đúng là: cắt và thu nhỏ về kích thước thật sự cần trước, rồi mới chọn định dạng, rồi mới chỉnh mức nén.