Cách giảm dung lượng ảnh không mất chất lượng thấy được

Ba cách điều chỉnh theo thứ tự

1. Kích thước. Số pixel ảnh chứa. Giảm nửa rộng và cao bỏ ba phần tư pixel, dung lượng thường giảm gần tương ứng.
2. Định dạng. Cách mã hóa pixel. Chọn sai — ảnh chụp lưu PNG, logo lưu JPG — có thể tốn nhiều lần byte cần thiết.
3. Thiết lập chất lượng. Lượng chi tiết bộ mã hóa mất dữ liệu bỏ. Hữu ích nhưng nhỏ nhất trong ba đòn bẩy, duy nhất có thể thực sự làm xấu diện mạo.

Thứ tự quan trọng vì hiệu quả nhân. Ảnh 4000×3000 PNG có thể 12MB. Đổi 1200×900 còn khoảng một phần mười. JPG giảm thêm nhiều. Sau đó giảm 95 về 82 mới phát huy; lúc ấy chỉ cắt phần dư nhỏ thay vì che vấn đề lẽ ra đổi cỡ phải giải quyết.

Làm ngược thứ tự cho kết quả tệ nhất: ảnh ép về chất lượng 40 để đạt dung lượng, vẫn mang số pixel gấp bốn cần thiết, nhiễu rõ và lớn hơn đáng ra. Nếu ảnh xấu sau nén, nguyên nhân thường là bỏ bước một.

Đòn bẩy 1: đổi kích thước trước nén

Chọn kích thước đích theo nơi ảnh thực sự hiển thị, không theo ảnh máy ảnh tạo ra.

Hai hệ số: màn mật độ cao cần khoảng gấp đôi rộng CSS, hiển thị 600px thì tệp 1200px. Quá 2x lợi sụt: 3x gần không khác 2x nhưng hơn gấp đôi byte.

Đòn bẩy 2: khớp định dạng theo nội dung

Phiên bản ngắn của quyết định, được trình bày chi tiết trong hướng dẫn so sánh định dạng:

• Ảnh chụp → WebP mất dữ liệu hoặc JPG khi tính tương thích quan trọng. Lưu ảnh chụp dưới dạng PNG là sai lầm định dạng phổ biến nhất và tốn kém nhất, thường chiếm gấp năm đến mười lần dung lượng cần thiết.
• Đồ họa phẳng, logo, ảnh màn hình, pixel art → PNG, lý tưởng là PNG bảng màu. JPG trên hình phẳng tạo viền gợn thấy rõ quanh mọi mép và tệp lớn hơn PNG. WebP mất dữ liệu ở đây cũng thường lớn hơn PNG bảng màu.
• Nội dung cần độ trong suốt → PNG hoặc WebP mất dữ liệu nếu nội dung là ảnh chụp. JPG không có kênh alpha và sẽ lấp độ trong suốt bằng màu đặc.

Một ví dụ thật: thẻ mạng xã hội PNG 606KB được xuất lại thành JPG ở chất lượng 82 còn 81KB, giảm 87% chỉ bằng đổi một danh sách chọn. Đó là ảnh chụp được lưu trong định dạng dành cho đồ họa phẳng. Theo hướng khác, chuyển nền trang có chuyển sắc mềm từ PNG sang WebP giảm dung lượng khoảng 57% — nội dung mượt không có cạnh sắc chính là thứ mã hóa mất dữ liệu xử lý tốt nhất.

Đòn bẩy 3: chất lượng và nơi hết giúp

Với JPG và WebP mất dữ liệu, chất lượng từ 0 đến 100 kiểm soát mức lượng tử hóa của bộ mã hóa. Quan hệ giữa số này và dung lượng phi tuyến mạnh; biết hình dạng đường cong giúp chọn vị trí phù hợp.

Từ 100 xuống 90 thường bỏ nửa dung lượng mà không thấy mất. 90 xuống 80 bỏ thêm phần đáng kể, vẫn vô hình trên ảnh chụp. 80 xuống 70 tiết kiệm ít hơn rõ trong khi bắt đầu lộ. Dưới 60, mỗi bước thêm giảm chất lượng thấy rõ với lợi ích giảm dần. Đó là đường lợi ích giảm và lý do chất lượng 80 là mặc định phổ biến như vậy: nó nằm ngay ở điểm cân bằng.

Nội dung làm dịch điểm cân bằng. Ảnh chi tiết, phức tạp che nhiễu tốt và chịu được 70. Ảnh có vùng mượt lớn như bầu trời, phông studio và chuyển màu lộ dải sớm hơn, cần 85. Nội dung có chữ hoặc cạnh sắc không nên dùng định dạng mất dữ liệu.

Khi PNG cần lượng tử hóa bảng màu

PNG không có thanh chất lượng nhưng có một cách điều chỉnh ít người dùng: giảm số màu. PNG truecolor lưu bốn byte mỗi pixel; PNG dùng bảng màu lưu chỉ số một byte trỏ vào bảng tối đa 256 màu. Với ảnh thực sự ít màu, bản dùng bảng màu nhỏ hơn nhiều lần và nếu mọi màu đều nằm trong bảng thì hoàn toàn giống nhau về mặt toán học.

Trường hợp phù hợp:

• Logo, biểu tượng, minh họa phẳng ít màu.
• Pixel art, thường vốn được tạo bằng bảng màu giới hạn.
• Ảnh UI chủ yếu vùng phẳng/chữ.
• Biểu đồ và sơ đồ.

Không phù hợp: ảnh chụp, ảnh có gradient mượt và mép khử răng cưa mềm trên nhiều nền khác nhau. Lượng tử hóa tạo phân dải, bộ lượng tử tốt sẽ thêm dithering để che, gây nhiễu khó nén và làm mất một phần lợi ích.

Cần chú ý alpha ở đây. PNG bảng màu hỗ trợ độ trong suốt theo từng mục bảng màu, nên cạnh khử răng cưa bán trong suốt dùng một mục cho mỗi mức pha trộn. Biểu tượng có bóng mềm có thể dùng phần lớn 256 mục cho các mức bóng. Kiểm tra trên nền tương phản trước khi đưa vào sử dụng.

Loại siêu dữ liệu

Ảnh máy ảnh và điện thoại mang khối EXIF: cài đặt phơi sáng, mẫu ống kính, thời gian, ảnh thu nhỏ và thường tọa độ GPS. Công cụ thiết kế thêm các khối riêng. Thường là hàng chục kilobyte, đôi khi nhiều hơn hẳn nếu có hồ sơ màu hoặc ảnh xem trước nhúng.

Với ảnh 2MB, đó chỉ là phần không đáng kể. Với hình thu nhỏ 40KB, 15KB EXIF chiếm hơn một phần ba tệp. Và còn lý do thứ hai ngoài dung lượng: tọa độ GPS trong ảnh bạn đăng cho mọi người biết ảnh được chụp ở đâu, một vấn đề riêng tư mà nhiều người chỉ nhận ra sau khi gặp hậu quả.

Hai thứ nên giữ có chủ ý: hồ sơ màu nếu chưa sRGB (bỏ đổi màu), trường bản quyền nếu dùng. Công cụ browser mã hóa qua canvas tự bỏ metadata vì canvas chỉ pixel.

Cách làm cho các mục tiêu thường gặp

Dưới đính kèm email 25MB

Thường là một loạt ảnh điện thoại. Đổi kích thước từng ảnh về 2000px ở cạnh dài, xuất JPG với chất lượng 85. Một ảnh 12 megapixel điển hình có dung lượng khoảng 500KB, nên có thể chứa bốn mươi ảnh. Nếu cần nhiều hơn, hãy giảm xuống 1600px trước khi giảm chất lượng — người nhận xem trên màn hình, không phải in áp phích.

Dưới giới hạn biểu mẫu/tải 100KB

Thường dùng cho ảnh hồ sơ, tải tài liệu và hồ sơ xin việc. Làm từ trên xuống: đổi về kích thước hiển thị tối đa, thường 800 px hoặc ít hơn, xuất JPG chất lượng 80 rồi kiểm tra. Nếu vẫn vượt, xuống 70 rồi giảm kích thước thêm. Tránh xuống dưới 60: ảnh 600 px ở 75 tốt hơn đáng kể ảnh 1200 px ở 45 với cùng dung lượng.

Ảnh cho trang web

Nhắm dưới 200 KB cho mỗi ảnh nội dung và dưới 500 KB cho ảnh chủ đạo. Cung cấp nhiều kích thước bằng srcset để điện thoại không tải phiên bản máy tính. Tải lười mọi thứ dưới vùng nhìn đầu tiên. Và kiểm tra trang thực sự yêu cầu gì — lỗi thường gặp là CMS cung cấp bản gốc 4000px với chiều rộng CSS 600px, khi toàn bộ vấn đề là thiết lập mẫu chứ không phải tệp ảnh.

Ngân sách texture trò chơi

Quy tắc khác áp dụng vì bộ nhớ GPU quan trọng, không phải dung lượng tải. Bộ nhớ GPU theo kích thước và định dạng texture, không theo dung lượng PNG trên đĩa: PNG tối ưu mạnh và PNG phình đều chiếm cùng VRAM sau tải. Giữ đồ họa nguồn không mất dữ liệu, dùng kích thước lũy thừa hai khi quy trình cần và để cài đặt nhập engine xử lý nén GPU. Tối ưu PNG chỉ ảnh hưởng dung lượng cài.

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