Image Optimization

Image Optimization là gì?

Image Optimization (tối ưu hóa hình ảnh) là quá trình giảm kích thước tệp ảnh mà không làm giảm đáng kể chất lượng hiển thị, đồng thời đảm bảo hình ảnh tải nhanh, chính xác theo thiết bị người dùng — nhờ chọn định dạng phù hợp, nén đúng cách, đặt kích thước hợp lý và tải thông minh.

Tại sao quan trọng trong SEO?

Hình ảnh chiếm phần lớn dung lượng trang web. Nếu không tối ưu, chúng làm chậm tốc độ tải — yếu tố xếp hạng trực tiếp của Google từ năm 2018 (Core Web Vitals). Trang chậm hơn 3 giây làm tăng tỷ lệ thoát lên đến 32% (theo nghiên cứu của Google & Akamai, 2023). Ngoài ra, hình ảnh tối ưu giúp:

• Cải thiện chỉ số Largest Contentful Paint (LCP) — một trong ba chỉ số Core Web Vitals;
• Hỗ trợ lập chỉ mục hình ảnh qua thẻ alt, tên tệp và cấu trúc thư mục;
• Tăng trải nghiệm người dùng trên thiết bị di động — chiếm hơn 60% lưu lượng tìm kiếm toàn cầu;
• Giảm băng thông máy chủ và chi phí lưu trữ.

Cách hoạt động

Tối ưu hóa hình ảnh vận hành trên 4 lớp kỹ thuật song song:

1. Chọn định dạng phù hợp: WebP và AVIF nén tốt hơn JPEG/PNG tới 25–50% ở cùng chất lượng (theo dữ liệu thử nghiệm của Google, 2022); AVIF hỗ trợ 10-bit màu và HDR nhưng chưa được hỗ trợ đầy đủ trên Safari cũ;
2. Nén không mất dữ liệu (lossless) hoặc mất dữ liệu có kiểm soát (lossy): công cụ như Squoosh, ImageOptim hoặc plugin WordPress (ShortPixel, EWWW) tự động cân bằng giữa kích thước và chất lượng;
3. Điều chỉnh kích thước ảnh theo ngữ cảnh: không dùng ảnh 3000px để hiển thị ở vùng 400px — thay vào đó dùng srcset và sizes để trình duyệt chọn phiên bản phù hợp;
4. Tải thông minh: lazy loading (tải khi cuộn tới) giúp trì hoãn tải ảnh ngoài màn hình đầu tiên, giảm thời gian phản hồi ban đầu (FCP).

Hướng dẫn thực hiện

Dưới đây là quy trình thực tế, áp dụng được cho website tĩnh, WordPress, hoặc nền tảng tùy chỉnh:

1. Thay đổi định dạng ảnh gốc: Chuyển JPEG/PNG sang WebP (hỗ trợ 98% trình duyệt hiện đại — caniuse.com, cập nhật tháng 6/2024). Với AVIF, cần fallback: dùng thẻ <picture> với nhiều nguồn.
2. Đặt kích thước đúng ngay từ đầu: Dùng thuộc tính width và height HTML để tránh dịch chuyển bố cục (CLS). Không dựa hoàn toàn vào CSS để co dãn.
3. Áp dụng srcset và sizes: Ví dụ:

   <img src="cat-400w.webp" srcset="cat-400w.webp 400w, cat-800w.webp 800w, cat-1200w.webp 1200w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 50vw, 400px" alt="Mèo tam thể đang ngủ">

   Trình duyệt sẽ chọn ảnh phù hợp dựa trên chiều rộng khung nhìn và mật độ pixel (dpr).
4. Bật lazy loading: Thêm thuộc tính loading="lazy" cho mọi ảnh không nằm trong vùng xem đầu tiên. Lưu ý: không dùng cho ảnh hero hoặc ảnh ngay trên fold.
5. Tối ưu thẻ mô tả: Điền alt ngắn gọn, mô tả chính xác nội dung và bối cảnh (ví dụ: alt="Bánh mì thịt nướng tại quán Bánh Mì 25, Quận 3"), không nhồi nhét từ khóa.

Lỗi thường gặp

• Ảnh chưa nén hoặc nén sai cách: Tải ảnh gốc từ máy ảnh (5–10 MB) lên web → khắc phục: luôn chạy qua công cụ nén trước khi upload.
• Dùng một kích thước ảnh cho mọi thiết bị: gây lãng phí băng thông trên mobile → khắc phục: sinh ảnh đa kích thước tự động (qua script hoặc CDN như Cloudflare Images, Imgix).
• Thiếu alt hoặc viết chung chung: như alt="image123.jpg" hoặc alt="ảnh đẹp" → khắc phục: viết mô tả chức năng và ngữ cảnh, tối đa 125 ký tự.
• Bật lazy loading cho ảnh quan trọng: làm chậm hiển thị nội dung chính → khắc phục: loại trừ ảnh trong vùng fold bằng CSS hoặc JavaScript kiểm soát.
• Không kiểm tra hỗ trợ định dạng: dùng AVIF mà không có fallback → trình duyệt cũ sẽ không hiển thị ảnh → khắc phục: luôn bao bọc AVIF/WebP trong thẻ <picture> với JPEG/PNG làm nguồn dự phòng.

Ví dụ thực tế

Một trang thương mại điện tử bán giày có 12 sản phẩm/trang, mỗi sản phẩm dùng 3 ảnh (góc trước, bên, chi tiết). Trước tối ưu:

• Ảnh JPEG trung bình 1.2 MB × 36 = 43.2 MB/tải trang
• Thời gian tải trên mạng 3G: 8.4 giây (Lighthouse đo)
• LCP: 7.2 giây → không đạt CWV

Sau tối ưu:

• Chuyển sang WebP + kích thước đúng (600px cho mobile, 1200px cho desktop)
• Dùng srcset, loading="lazy", alt chuẩn
• Kích thước trung bình còn 180 KB × 36 = 6.5 MB
• Thời gian tải trên 3G giảm còn 2.1 giây
• LCP cải thiện xuống 1.4 giây → đạt tiêu chuẩn 'tốt' theo Google

Kết quả: tỷ lệ thoát giảm 22%, thời gian tương tác tăng 35%, vị trí từ khóa hình ảnh tăng trung bình 8 bậc trong 3 tháng.

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

WebP hay AVIF nên dùng cho website Việt Nam?

WebP là lựa chọn an toàn nhất hiện nay: hỗ trợ đầy đủ trên Chrome, Firefox, Edge, Opera và Safari từ phiên bản 14 trở lên (phủ ~98% người dùng Việt). AVIF cho hiệu suất cao hơn nhưng chưa hỗ trợ trên Safari dưới 17.4 — do đó chỉ nên dùng kèm fallback. Việc triển khai AVIF thuần túy hiện vẫn tùy trường hợp.

Có nên nén ảnh bằng Photoshop hay dùng công cụ online?

Công cụ online (Squoosh, TinyPNG) hoặc CLI (cwebp, avifenc) thường cho kết quả tốt hơn Photoshop ở chế độ export web vì chúng áp dụng thuật toán nén hiện đại và kiểm soát lossy chính xác hơn. Photoshop phù hợp để xử lý thủ công từng ảnh, còn tự động hóa nên dùng công cụ chuyên biệt. Độ nén tối ưu thường nằm ở mức 75–85% chất lượng (WebP) — có thể thay đổi tùy nội dung ảnh.

Lazy loading có ảnh hưởng đến lập chỉ mục hình ảnh của Google?

Không. Googlebot hỗ trợ loading="lazy" từ năm 2020 và vẫn lập chỉ mục ảnh dù có lazy loading — miễn là ảnh có thẻ alt đầy đủ, đường dẫn rõ ràng và không bị chặn bởi robots.txt. Tuy nhiên, nếu ảnh được tải hoàn toàn bằng JavaScript (dynamic import), khả năng lập chỉ mục sẽ giảm — điều này tùy trường hợp.

Yếu tố	JPEG/PNG	WebP	AVIF
Hỗ trợ trình duyệt (2024)	100%	~98%	~85% (không hỗ trợ Safari <17.4)
Giảm dung lượng so với JPEG	—	25–35%	40–50%
Hỗ trợ transparency	Có (PNG), không (JPEG)	Có	Có
Hỗ trợ animation	Có (GIF)	Có (WebP animated)	Chưa hỗ trợ (tính đến AVIF 1.2.0)