Image Compression
Quá trình giảm kích thước tệp hình ảnh mà vẫn giữ chất lượng chấp nhận được, nhằm cải thiện tốc độ tải trang.
Image Compression là gì?
Image Compression (nén ảnh) là quá trình giảm kích thước tệp hình ảnh — tính bằng kilobyte (KB) hoặc megabyte (MB) — mà vẫn giữ được chất lượng hiển thị chấp nhận được trên website. Đây không phải là việc cắt bớt phần hình ảnh, mà là tối ưu cách lưu trữ dữ liệu pixel để trình duyệt tải và hiển thị nhanh hơn.
Nén ảnh chia làm hai loại chính:
- Nén không mất dữ liệu (Lossless): Giữ nguyên mọi thông tin gốc, chỉ loại bỏ dữ liệu dư thừa (ví dụ: định dạng PNG, WebP ở chế độ lossless).
- Nén có mất dữ liệu (Lossy): Loại bỏ một số chi tiết không dễ nhận thấy bằng mắt thường để giảm kích thước mạnh hơn (ví dụ: JPEG, WebP ở chế độ lossy).
Tại sao quan trọng trong SEO?
Tốc độ tải trang là yếu tố xếp hạng trực tiếp của Google từ năm 2018 (Core Web Vitals), và hình ảnh thường chiếm hơn 50% dung lượng trang web trung bình. Một hình ảnh chưa nén có thể nặng 3–5 MB, trong khi sau nén chỉ còn 100–300 KB — giảm tới 90%.
Khi ảnh nhẹ hơn:
- Thời gian tải trang (LCP – Largest Contentful Paint) cải thiện rõ rệt;
- Trang ít tiêu tốn băng thông, đặc biệt với người dùng di động hoặc mạng chậm;
- Tỷ lệ thoát (bounce rate) giảm — người dùng ít rời đi vì chờ tải;
- Googlebot thu thập trang hiệu quả hơn, tăng khả năng lập chỉ mục đầy đủ.
Theo báo cáo HTTP Archive (tháng 6/2024), 68% trang top 1000 toàn cầu đã áp dụng nén ảnh tự động; các trang không nén có thời gian tải trung bình cao hơn 2,3 giây so với trang đã tối ưu.
Cách hoạt động
Nén ảnh dựa trên hai cơ chế chính:
- Mã hóa lại dữ liệu: Dùng thuật toán như Huffman hoặc LZ77 để biểu diễn thông tin lặp lại (ví dụ: vùng nền đồng màu) bằng mã ngắn hơn.
- Giảm độ phân giải hoặc chi tiết không cần thiết: Với nén lossy, thuật toán loại bỏ các tần số cao (chi tiết nhỏ, nhiễu) mà mắt người khó phân biệt — đặc biệt ở vùng ngoại vi hoặc bóng đổ.
WebP và AVIF còn sử dụng kỹ thuật tiên tiến hơn như dự đoán pixel (intra-frame prediction) và lượng tử hóa thích ứng — giúp đạt tỷ lệ nén cao hơn JPEG cùng chất lượng.
Hướng dẫn thực hiện
Dưới đây là 5 bước nén ảnh đúng chuẩn SEO, áp dụng cho cả người mới và quản trị viên:
- Chọn định dạng phù hợp:
- Dùng WebP cho hầu hết ảnh chụp, minh họa — hỗ trợ cả lossy và lossless, nhẹ hơn JPEG 25–35%.
- Dùng AVIF nếu cần chất lượng cao nhất và hỗ trợ trình duyệt đủ rộng (Chrome 85+, Firefox 93+); nhẹ hơn WebP khoảng 10–15%.
- Dùng PNG chỉ khi cần nền trong suốt và ảnh đồ họa đơn giản (biểu tượng, logo vector).
- Tránh JPEG nếu có thể — chỉ dùng khi cần tương thích tuyệt đối với thiết bị cũ.
- Đặt kích thước đúng nhu cầu hiển thị: Không upload ảnh 4000x3000px rồi dùng CSS thu nhỏ. Dùng công cụ như Resize Image hoặc plugin CMS để xuất đúng kích thước hiển thị thực tế (ví dụ: ảnh banner trên desktop: 1200x400px, trên mobile: 768x256px).
- Áp dụng nén có kiểm soát: Với WebP lossy, mức độ nén từ 75–85 thường là điểm cân bằng tốt nhất giữa kích thước và chất lượng. Giá trị dưới 60 dễ gây răng cưa hoặc mờ.
- Sử dụng lazy loading: Thêm thuộc tính
loading="lazy"vào thẻ<img>để chỉ tải ảnh khi người dùng cuộn đến gần — giảm tải ban đầu. - Tối ưu qua CDN hoặc plugin: Các nền tảng như Cloudflare Images, WP Rocket (WordPress), hoặc Squoosh.app (miễn phí, chạy trực tiếp trên trình duyệt) tự động chuyển đổi và nén ảnh theo yêu cầu thiết bị.
Lỗi thường gặp
| Lỗi | Hệ quả | Cách khắc phục |
|---|---|---|
| Upload ảnh chưa resize trước khi nén | Kích thước tệp vẫn lớn dù đã nén; lãng phí tài nguyên | Luôn resize ảnh về đúng kích thước hiển thị tối đa trước khi nén |
| Dùng JPEG chất lượng 100% cho mọi ảnh | Tăng dung lượng không cần thiết; chậm tải | Thử nghiệm mức chất lượng 75–85; kiểm tra bằng công cụ như Squoosh |
| Bỏ qua hỗ trợ nhiều định dạng (picture srcset) | Trình duyệt không tải được định dạng tối ưu nhất | Dùng thẻ <picture> với srcset và type để ưu tiên WebP/AVIF, fallback về JPEG/PNG |
Ví dụ thực tế
Một trang sản phẩm thời trang có 12 ảnh, mỗi ảnh JPEG gốc: 1,8 MB → tổng 21,6 MB. Sau khi:
- Resize về 800x800px (đủ cho mobile & tablet),
- Chuyển sang WebP lossy (chất lượng 80%),
- Thêm lazy loading và srcset,
Câu hỏi thường gặp
Nên nén ảnh trước khi upload hay để CMS tự xử lý?
Nên nén trước khi upload. Nhiều CMS (như WordPress bản miễn phí) chỉ nén sau khi upload — gây lãng phí băng thông và thời gian xử lý máy chủ. Công cụ như Squoosh, ImageOptim hoặc CLI cwebp giúp kiểm soát hoàn toàn chất lượng và kích thước.
WebP có hỗ trợ tất cả trình duyệt không?
WebP được hỗ trợ bởi Chrome, Edge, Firefox (từ phiên bản 65), Safari (từ 14.1 trên macOS Big Sur và iOS 14.5). Với trình duyệt cũ hơn, bạn phải dùng thẻ <picture> có fallback — ví dụ: WebP làm mặc định, JPEG làm dự phòng. Không nên dùng WebP đơn thuần nếu chưa kiểm tra phân tích người dùng.
Nén ảnh có ảnh hưởng đến SEO hình ảnh (Image SEO) không?
Không — nếu bạn vẫn giữ đúng alt text, tên tệp mô tả (ví dụ: ao-thun-nam-den.jpg → ao-thun-nam-den.webp), và cấu trúc thư mục rõ ràng. Nén chỉ tác động đến tốc độ, không làm mất dữ liệu alt, title hay schema. Tuy nhiên, nếu nén quá mức khiến ảnh bị vỡ, mờ hoặc không hiển thị, Google có thể đánh giá thấp trải nghiệm người dùng — gián tiếp ảnh hưởng xếp hạng.
