Mobile SEO

Mobile Image Optimization

Sử dụng định dạng hiện đại (WebP/AVIF), kích thước phù hợp theo viewport, srcset và sizes để giảm dung lượng ảnh trên di động.

3 lượt xem Cập nhật: 26/05/2026

Mobile Image Optimization là gì?

Mobile Image Optimization (tối ưu ảnh cho thiết bị di động) là tập hợp các kỹ thuật nhằm giảm kích thước tệp, tăng tốc độ tải và nâng cao trải nghiệm người dùng trên điện thoại thông minh và máy tính bảng — mà không làm giảm chất lượng hình ảnh hiển thị rõ ràng. Đây không chỉ là nén ảnh, mà là lựa chọn định dạng phù hợp, điều chỉnh kích thước theo màn hình, tải có chọn lọc và tích hợp đúng cách vào HTML/CSS.

Tại sao quan trọng trong SEO?

Google xếp hạng trang di động dựa trên Core Web Vitals, trong đó Largest Contentful Paint (LCP) thường bị ảnh hưởng nặng bởi ảnh chưa tối ưu. Một ảnh JPG 2MB tải trên mạng 3G có thể làm chậm LCP thêm 3–5 giây — đủ để tăng tỷ lệ thoát lên 32% (theo dữ liệu Google & Akamai, 2023). Ngoài ra:

Ảnh chiếm trung bình 45–60% tổng dung lượng trang trên thiết bị di động (HTTP Archive, tháng 6/2024);
Trang có thời gian tải dưới 2,5 giây có tỷ lệ chuyển đổi cao hơn 2,3 lần so với trang tải trên 5 giây (Google Think with Google);
Google xác nhận ảnh tối ưu góp phần trực tiếp vào xếp hạng trong tìm kiếm hình ảnh và tìm kiếm chung.

Cách hoạt động

Mobile Image Optimization vận hành qua ba lớp phối hợp:

Định dạng ảnh: Chuyển từ JPEG/PNG sang WebP (hỗ trợ rộng) hoặc AVIF (hiệu suất cao hơn, nhưng hỗ trợ trình duyệt còn hạn chế);
Kích thước và mật độ pixel: Cung cấp nhiều phiên bản ảnh (1x, 2x, 3x) và kích thước (320w, 768w, 1200w…) để trình duyệt chọn file phù hợp nhất với màn hình và thiết bị;
Chiến lược tải: Dùng loading="lazy", decoding="async", kết hợp srcset + sizes để tránh tải ảnh ngoài vùng nhìn (viewport).

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

Dưới đây là quy trình từng bước, áp dụng được ngay với HTML thuần hoặc CMS như WordPress (qua plugin hoặc theme hỗ trợ):

Chọn định dạng ưu tiên:
- WebP: Hỗ trợ 98,5% trình duyệt di động (Chrome, Firefox, Edge, Safari từ v14+), giảm dung lượng trung bình 25–35% so với JPEG cùng chất lượng;
- AVIF: Giảm thêm 10–15% so với WebP, nhưng chỉ hỗ trợ trên Chrome 85+, Firefox 93+, Safari 16.4+ — nên dùng kèm fallback.
Xác định kích thước đích theo viewport:
- Với màn hình 320px (iPhone SE): ảnh hiển thị thường cần tối đa 375px (do scale 2x → 750px ảnh gốc);
- Với màn hình 414px (iPhone 13): ảnh full-width cần 828px (2x) hoặc 1242px (3x);
- Không nên dùng ảnh > 1200px chiều rộng cho mobile — trừ trường hợp zoom ảnh chi tiết.
Sử dụng srcset và sizes:
HTML mẫu chuẩn:
```
<img src="photo.jpg"
     srcset="photo-320w.webp 320w,
             photo-768w.webp 768w,
             photo-1200w.webp 1200w"
     sizes="(max-width: 320px) 280px,
            (max-width: 768px) 720px,
            1100px"
     alt="Mô tả ảnh rõ ràng"
     loading="lazy"
     decoding="async">
```
Giải thích:
- srcset liệt kê các phiên bản ảnh theo chiều rộng (w);
- sizes khai báo chiều rộng hiển thị thực tế của ảnh trên từng khoảng màn hình — trình duyệt dùng giá trị này để chọn file phù hợp nhất từ srcset.

Thêm fallback cho trình duyệt cũ:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="..." loading="lazy">
</picture>

Tối ưu kỹ thuật bổ sung:
- Nén không mất dữ liệu: dùng cwebp (WebP) hoặc avifenc (AVIF) với tham số -q 75 (chất lượng tốt – kích thước nhỏ);
- Loại bỏ metadata EXIF nếu không cần (giảm 5–20 KB/tệp);
- Không dùng CSS width: 100% trên ảnh chưa resize — vì trình duyệt vẫn tải file gốc rồi co lại.

Lỗi thường gặp

Lỗi	Hậu quả	Cách khắc phục
Chỉ dùng một ảnh gốc (ví dụ: 2000px JPG) cho mọi thiết bị	Tải thừa 70–90% dung lượng trên điện thoại; LCP chậm; tiêu tốn băng thông người dùng	Dùng `srcset` + `sizes`; tạo ít nhất 3 phiên bản: 320w, 768w, 1200w
Thiếu `alt` hoặc `alt` mơ hồ ("image123.jpg")	Mất cơ hội xếp hạng ảnh; ảnh hưởng SEO hình ảnh và khả năng tiếp cận (accessibility)	Viết mô tả ngắn gọn, có từ khóa tự nhiên, phản ánh đúng nội dung ảnh — ví dụ: "bánh mì thịt nướng nóng giòn tại Sài Gòn"
Dùng `width`/`height` HTML sai hoặc thiếu	Gây layout shift (CLS cao); ảnh nhảy khi tải xong	Luôn khai báo `width` và `height` đúng tỷ lệ; hoặc dùng CSS aspect-ratio nếu hỗ trợ

Ví dụ thực tế

Một trang sản phẩm thời trang di động có ảnh chính 100% chiều rộng màn hình. Trước tối ưu:

Ảnh gốc: product.jpg — 1920×1280px, 2,4 MB;
Chỉ dùng thẻ <img src="product.jpg"> — tải toàn bộ file trên mọi thiết bị.

Sau tối ưu:

Tạo 3 phiên bản WebP: product-320w.webp (18 KB), product-768w.webp (52 KB), product-1200w.webp (96 KB);
HTML:

<picture>
  <source srcset="product-320w.webp 320w, product-768w.webp 768w, product-1200w.webp 1200w"
          sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1100px"
          type="image/webp">
  <img src="product.jpg" 
       srcset="product-320w.jpg 320w, product-768w.jpg 768w, product-1200w.jpg 1200w"
       sizes="(max-width: 320px) 280px, (max-width: 768px) 720px, 1100px"
       alt="Áo thun cotton unisex màu đen, cổ tròn, in logo phía trước" 
       width="1200" height="800" 
       loading="lazy">
</picture>

Kết quả đo bằng Lighthouse (trên thiết bị di động mô phỏng):
→ Dung lượng ảnh giảm trung bình 78% (từ 2,4 MB xuống ~520 KB);
→ LCP cải thiện từ 5,2s → 1,8s;
→ Điểm Performance tăng từ 42 → 91.

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

WebP hay AVIF nên dùng cho mobile?

WebP là lựa chọn an toàn và hiệu quả nhất hiện nay do hỗ trợ gần như toàn bộ trình duyệt di động. AVIF nên dùng kèm fallback WebP/JPEG — vì hỗ trợ Safari trên iOS chỉ từ phiên bản 16.4 (phát hành tháng 3/2023), và vẫn chưa có trên một số trình duyệt Android gốc. Việc chỉ dùng AVIF sẽ khiến ảnh không hiển thị trên ~12% thiết bị (StatCounter, Q2/2024).

Có cần tối ưu ảnh nền (CSS background-image) không?

Có. Ảnh nền cũng ảnh hưởng đến LCP nếu là phần tử lớn nhất trong viewport. Cách tối ưu: dùng @media trong CSS để gọi ảnh khác nhau theo chiều rộng, hoặc dùng image-set() (hỗ trợ Chrome, Safari, Edge — chưa hỗ trợ Firefox). Tuy nhiên, ảnh nền không hỗ trợ srcset/sizes như thẻ <img>, nên cần kiểm tra kỹ hỗ trợ trình duyệt.

Tối ưu ảnh có làm giảm chất lượng hiển thị không?

Không — nếu thực hiện đúng. WebP ở mức chất lượng 75–85 và AVIF ở mức 60–75 giữ nguyên chi tiết quan sát được bằng mắt thường, kể cả trên màn hình Retina. Sự khác biệt chỉ xuất hiện khi phóng to 300–500% và so sánh cạnh bên cạnh. Với người dùng thực tế, ảnh tối ưu luôn sắc nét và nhanh hơn.