Cách nén ảnh cho website

Theo Web Almanac 2025 của HTTP Archive, dung lượng trung vị của một trang chủ trên di động là 2,56 MB, trong đó 911 KB là ảnh. Trên máy tính, lượng ảnh trung vị của một trang là 1.058 KB. Ảnh cũng là thứ khách truy cập phải chờ: phần tử lớn nhất trên màn hình khi trang tải, gọi là Largest Contentful Paint (LCP), là một hình ảnh trên 76% trang di động.

Ảnh nhẹ hơn sẽ tải nhanh hơn trên kết nối chậm, tốn ít dữ liệu di động của khách truy cập hơn và giúp bạn tiết kiệm băng thông. LCP là một trong các chỉ số Core Web Vitals của Google, bộ chỉ số Google dùng để đánh giá trải nghiệm trang, nên ảnh nặng có thể khiến bạn mất nhiều hơn là vài giây kiên nhẫn của người xem.

Nén không thể cứu một bức ảnh lớn hơn nhiều so với khoảng trống nó chiếm. Một ảnh chụp từ máy ảnh rộng 4000 pixel, hiển thị trong một cột rộng 800 pixel, chứa số pixel gấp 25 lần mức trang có thể dùng. web.dev lưu ý rằng gửi ảnh cỡ dành cho máy tính đến điện thoại có thể tốn dữ liệu gấp 2–4 lần mức cần thiết.

• Banner tràn chiều ngang: rộng khoảng 1600–2000 pixel là đủ với hầu hết bố cục.
• Ảnh trong cột bài viết: rộng khoảng gấp đôi cột để vẫn sắc nét trên màn hình có mật độ điểm ảnh cao (ví dụ 1400 pixel cho cột rộng 700 pixel).
• Ảnh thu nhỏ và ảnh đại diện: gấp đôi kích thước hiển thị, thường là 200–400 pixel.

Định dạng quyết định ảnh được lưu trữ hiệu quả đến đâu. Nói ngắn gọn: ảnh chụp hợp với JPG hoặc WebP; logo, ảnh chụp màn hình và mọi thứ có độ trong suốt hợp với PNG hoặc WebP. Bài so sánh JPG, PNG và WebP của chúng tôi giải thích khi nào mỗi định dạng chiếm ưu thế.

Khoảng 97% trình duyệt đang được sử dụng hiển thị được WebP, và WebP thường nhỏ hơn đáng kể. Để thử, hãy chuyển đổi bằng JPG sang WebP hoặc PNG sang WebP rồi so sánh kết quả với bản gốc: tệp sau khi chuyển không phải lúc nào cũng nhỏ hơn, nhất là với đồ họa đơn giản.

Nén ảnh loại bỏ những dữ liệu mà mắt thường khó nhận ra. Trên công cụ nén ảnh Bitinz, bạn có thể thả vào một loạt tệp JPG, PNG hoặc WebP và chọn một trong ba mức nén:

• Nhanh: ưu tiên tốc độ, cho số lượng ảnh lớn.
• Cân bằng: mức mặc định, phù hợp với hầu hết ảnh trên website.
• Tối đa: lâu hơn một chút để có tệp nhỏ hơn; đáng dùng cho những ảnh xuất hiện trên mọi trang, như banner và ảnh nền.

Khi bạn giữ định dạng, Bitinz không bao giờ trả về tệp lớn hơn tệp bạn đã tải lên. Hãy so sánh kết quả với bản gốc ở kích thước đầy đủ, nhất là ảnh có chữ nhỏ hoặc dải màu chuyển mượt, rồi tải về những ảnh bạn ưng ý.

Một bức ảnh đã nén tốt vẫn có thể làm trang chậm đi nếu nó tải không đúng lúc hoặc không đúng kích thước. Chỉ vài thuộc tính HTML là giải quyết được phần lớn vấn đề:

• Đặt width và height cho mọi ảnh để trình duyệt giữ sẵn chỗ và bố cục không bị nhảy khi ảnh đang tải.
• Thêm loading="lazy" cho các ảnh ở phía dưới trang để chúng chỉ tải khi khách truy cập cuộn đến gần.
• Đừng bao giờ lazy load ảnh chính ở đầu trang. Thay vào đó, web.dev khuyên dùng fetchpriority="high" cho ảnh này, và chỉ cho tối đa một hoặc hai ảnh.
• Dùng srcset và sizes để cung cấp vài chiều rộng khác nhau của cùng một ảnh, nhờ đó điện thoại tải tệp nhỏ hơn so với màn hình lớn.
• Phân phối ảnh với thời gian lưu bộ nhớ đệm (cache) dài, qua CDN nếu bạn có, để khách quay lại không phải tải ảnh thêm lần nữa.

Chạy trang qua PageSpeed Insights hoặc bảng Lighthouse trong Chrome. Từ Lighthouse 13, các mục kiểm tra ảnh được gom vào một mục phân tích duy nhất là “Improve image delivery”, liệt kê những ảnh có thể nén thêm, chuyển sang định dạng hiện đại hoặc thu nhỏ lại. Ảnh nào tiết kiệm được dưới 4 KiB sẽ không được liệt kê, nên danh sách ngắn là dấu hiệu tốt.

Sau đó, hãy tự xem trang trên điện thoại. Các cạnh sắc nét, chữ trong ảnh và màu da là những chỗ lỗi nén lộ ra đầu tiên.

Nếu website của bạn có thêm ảnh mỗi ngày, chẳng hạn qua hệ thống quản lý nội dung hoặc cửa hàng online, hãy nén ảnh ngay khi tải lên hoặc xuất bản thay vì làm thủ công. API cho nhà phát triển của Bitinz nhận ảnh qua HTTP và trả về liên kết đến tệp đã nén, nên có thể chạy từ một script hoặc quy trình build. Mỗi tài khoản đều có hạn mức miễn phí hằng tháng.

1. 01Đưa mỗi ảnh về khoảng gấp đôi kích thước hiển thị.
2. 02Dùng JPG hoặc WebP cho ảnh chụp, PNG hoặc WebP cho đồ họa và ảnh có độ trong suốt.
3. 03Nén ở mức Cân bằng và thử mức Tối đa cho những ảnh lớn nhất.
4. 04So sánh kết quả với bản gốc trước khi thay thế.
5. 05Đặt width và height, lazy load các ảnh nằm dưới màn hình đầu tiên, và không bao giờ lazy load ảnh chính.
6. 06Kiểm tra lại trang bằng PageSpeed Insights.

Bạn tải ảnh lên nơi khác ngoài website của mình? Mỗi nền tảng có quy định riêng: xem yêu cầu kích thước ảnh cho email và cửa hàng online.