- Tại sao Google không đọc được hình ảnh như con người?
- Alt Text — Yếu tố quan trọng nhất trong tối ưu hình ảnh
- Nguyên tắc viết Alt Text chuẩn
- Bảng so sánh Alt Text sai và đúng
- Tên File Hình Ảnh — Bước Bị Bỏ Qua Nhiều Nhất
- Định Dạng Hình Ảnh — WebP, JPEG, PNG, AVIF
- Nén Hình Ảnh — Mục Tiêu Cân Bằng Chất Lượng và Dung Lượng
- Lazy Loading — Tải Ảnh Theo Nhu Cầu
- Responsive Images và Srcset
- Câu hỏi thường gặp về tối ưu hình ảnh SEO
- Có cần viết alt text cho mọi hình ảnh không?
- Kích thước ảnh tối đa nên là bao nhiêu?
- Có nên dùng CDN cho hình ảnh không?
- Có thể tối ưu ảnh đã upload lên WordPress không?
- WebP có được tất cả trình duyệt hỗ trợ không?
Hình ảnh chiếm trung bình 21% tổng dung lượng trang web (theo HTTP Archive 2024) — nhưng đây cũng là thành phần được tối ưu kém nhất trong SEO Onpage. Một trang có 10 hình ảnh không được tối ưu có thể tải chậm hơn 3–5 giây so với phiên bản đã tối ưu — đủ để mất 40% người dùng (Google: mỗi giây delay làm giảm 7% tỷ lệ chuyển đổi). Đồng thời, hình ảnh được tối ưu đúng cách là nguồn traffic organic từ Google Images và là yếu tố quan trọng trong Core Web Vitals (bộ chỉ số trải nghiệm người dùng cốt lõi mà Google dùng để đánh giá chất lượng trang). Bài viết này hướng dẫn tối ưu hình ảnh SEO toàn diện từ alt text đến lazy loading.
Tại sao Google không đọc được hình ảnh như con người?
Mặc dù Google đã cải thiện đáng kể khả năng nhận diện nội dung hình ảnh qua Google Vision AI (trí tuệ nhân tạo nhận diện hình ảnh), công cụ tìm kiếm vẫn phụ thuộc chủ yếu vào metadata (dữ liệu mô tả) xung quanh hình ảnh để hiểu ngữ cảnh:
- Alt text (văn bản thay thế): Mô tả nội dung hình ảnh bằng text
- File name (tên file): Tên file ảnh trước khi upload
- Caption (chú thích): Văn bản hiển thị bên dưới ảnh
- Surrounding text (nội dung xung quanh): Đoạn text ngay trước và sau ảnh
- Page context (ngữ cảnh trang): Chủ đề tổng thể của trang chứa ảnh
Alt Text — Yếu tố quan trọng nhất trong tối ưu hình ảnh
Alt text (Alternative Text — văn bản thay thế, xuất hiện khi ảnh không load được và được trình đọc màn hình đọc cho người khiếm thị) được khai báo trong thuộc tính alt của thẻ <img>:
<img src="toi-uu-hinh-anh-seo.webp" alt="Minh họa quy trình tối ưu hình ảnh SEO gồm 5 bước: nén ảnh, đặt tên file, viết alt text, chọn định dạng và lazy loading" />Nguyên tắc viết Alt Text chuẩn
- Mô tả chính xác nội dung ảnh: Người không nhìn thấy ảnh đọc alt text phải hiểu ảnh đó là gì
- Tích hợp từ khóa tự nhiên: Nếu từ khóa phù hợp với nội dung ảnh, thêm vào — nhưng không nhồi nhét
- Không bắt đầu bằng “Hình ảnh của…” hay “Ảnh chụp…”: Trình đọc màn hình đã tự thông báo đây là ảnh
- Độ dài tối ưu: 50–125 ký tự (1–2 câu ngắn)
- Ảnh trang trí (decorative images): Để alt=”” (rỗng) — không cần mô tả ảnh thuần trang trí
Bảng so sánh Alt Text sai và đúng
| Trường hợp | Alt Text Sai ❌ | Alt Text Đúng ✅ |
|---|---|---|
| Ảnh sản phẩm | alt=”ảnh” | alt=”Giày Nike Air Max 270 màu đen size 42 nhìn từ phía bên” |
| Ảnh infographic | alt=”infographic seo” | alt=”Infographic quy trình SEO Onpage 7 bước từ nghiên cứu từ khóa đến đo lường kết quả” |
| Ảnh trang trí | alt=”đường kẻ ngang trang trí” | alt=”” (để trống) |
| Ảnh nhồi từ khóa | alt=”seo onpage seo onpage tối ưu seo onpage” | alt=”Checklist SEO Onpage gồm 50 điểm kiểm tra chia theo 6 nhóm” |
Tên File Hình Ảnh — Bước Bị Bỏ Qua Nhiều Nhất
Google đọc tên file ảnh để hiểu nội dung. Đây là bước tối ưu đơn giản nhất nhưng bị bỏ qua nhiều nhất:
- Sai:
IMG_20240315_142035.jpg,screenshot-1.png,untitled.jpeg - Đúng:
toi-uu-hinh-anh-seo-onpage.webp,alt-text-la-gi-vi-du.webp
Nguyên tắc đặt tên file ảnh:
- Dùng chữ thường, không dấu tiếng Việt
- Dùng dấu gạch ngang (-) thay vì dấu gạch dưới (_) hoặc khoảng trắng
- Mô tả nội dung ảnh, không phải tên file mặc định của máy ảnh
- Tích hợp từ khóa liên quan (tự nhiên, không nhồi nhét)
- Ngắn gọn: 3–5 từ là đủ
Định Dạng Hình Ảnh — WebP, JPEG, PNG, AVIF
Chọn đúng định dạng file (image format) giúp giảm dung lượng đáng kể mà không mất chất lượng:
| Định dạng | Dùng khi nào | Ưu điểm | Browser support |
|---|---|---|---|
| WebP | Hầu hết trường hợp | Nhỏ hơn JPEG 25–34%, hỗ trợ transparency như PNG | 95%+ trình duyệt hiện đại |
| AVIF | Ảnh chất lượng cao, tương lai | Nhỏ hơn WebP 20%, chất lượng tốt nhất | Tăng dần, ~80% 2024 |
| JPEG/JPG | Ảnh photo, không cần nền trong | Tương thích rộng nhất | 100% |
| PNG | Logo, icon, cần nền trong suốt | Chất lượng không mất, hỗ trợ transparency | 100% |
| SVG | Icon, logo vector, đồ họa đơn giản | Scale không vỡ, file rất nhỏ | 95%+ |
Khuyến nghị thực tế 2025: Dùng WebP làm định dạng mặc định cho tất cả ảnh. Với WordPress, plugin Imagify hoặc ShortPixel tự động convert sang WebP khi upload.
Nén Hình Ảnh — Mục Tiêu Cân Bằng Chất Lượng và Dung Lượng
Có hai loại nén:
- Lossless compression (nén không mất dữ liệu): Giảm dung lượng mà không mất bất kỳ pixel nào — thường giảm được 10–20%
- Lossy compression (nén có mất dữ liệu): Loại bỏ thông tin mà mắt người khó nhận ra — thường giảm được 60–80% dung lượng
Mục tiêu thực tế: ảnh trên web nên dưới 200KB cho ảnh nội dung, dưới 100KB cho thumbnail. Công cụ nén miễn phí: Squoosh.app (Google), TinyPNG, Compressor.io. Plugin WordPress: ShortPixel, Imagify, Smush.
Lazy Loading — Tải Ảnh Theo Nhu Cầu
Lazy loading (tải lười biếng — kỹ thuật chỉ tải hình ảnh khi người dùng cuộn đến vị trí ảnh đó thay vì tải tất cả ngay khi mở trang) là kỹ thuật cải thiện LCP (Largest Contentful Paint — thời gian để phần tử nội dung lớn nhất hiển thị trên màn hình, một trong ba chỉ số Core Web Vitals).
Triển khai đơn giản bằng HTML native:
<img src="hinh-anh.webp" alt="Mô tả ảnh" loading="lazy" />Lưu ý quan trọng: Không dùng loading="lazy" cho ảnh above the fold (vùng hiển thị đầu tiên khi mở trang, không cần cuộn) — sẽ làm chậm LCP. Chỉ dùng lazy loading cho ảnh phía dưới, ngoài màn hình đầu tiên.
Responsive Images và Srcset
Responsive images (hình ảnh thích ứng — tự động điều chỉnh kích thước theo màn hình thiết bị) dùng thuộc tính srcset để cung cấp ảnh đúng kích thước cho từng thiết bị:
<img
src="hinh-anh-800.webp"
srcset="hinh-anh-400.webp 400w, hinh-anh-800.webp 800w, hinh-anh-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Mô tả ảnh"
/>WordPress tự động tạo multiple sizes (nhiều kích thước) khi upload ảnh và thêm srcset tự động — không cần can thiệp thủ công trong hầu hết trường hợp.
Kết hợp tối ưu hình ảnh với tối ưu Page Speed và Core Web Vitals, URL chuẩn SEO và checklist SEO Onpage đầy đủ.
Câu hỏi thường gặp về tối ưu hình ảnh SEO
Có cần viết alt text cho mọi hình ảnh không?
Cần viết alt text mô tả cho ảnh có nội dung (content images). Ảnh trang trí thuần túy (đường kẻ, nền gradient, icon đơn giản) dùng alt=”” (rỗng) — đây là chuẩn accessibility, không phải lỗi. Lý do: trình đọc màn hình của người khiếm thị sẽ đọc alt text — nếu alt text vô nghĩa (“decorative line”) sẽ gây phiền. Alt=”” báo cho trình đọc màn hình bỏ qua ảnh đó.
Kích thước ảnh tối đa nên là bao nhiêu?
Không có giới hạn cứng nhưng thực hành tốt: ảnh hero (ảnh lớn đầu trang) dưới 200KB, ảnh nội dung dưới 150KB, thumbnail dưới 50KB. Quan trọng hơn kích thước file là kích thước hiển thị — đừng upload ảnh 4000x3000px rồi hiển thị ở 400x300px. Resize ảnh về đúng kích thước hiển thị tối đa trước khi upload.
Có nên dùng CDN cho hình ảnh không?
CDN (Content Delivery Network — mạng phân phối nội dung, hệ thống server phân tán toàn cầu phục vụ file tĩnh từ server gần người dùng nhất) rất nên dùng nếu website có traffic từ nhiều vùng địa lý. CDN như Cloudflare, BunnyCDN giúp phục vụ ảnh từ server gần người dùng nhất — giảm latency (độ trễ) đáng kể. Với WordPress, các plugin CDN tích hợp dễ dàng, không cần kỹ thuật phức tạp.
Có thể tối ưu ảnh đã upload lên WordPress không?
Có, dùng plugin như ShortPixel, Imagify hoặc Smush với tính năng Bulk Optimization (tối ưu hàng loạt). Các plugin này nén và convert ảnh đã upload, thường giảm được 40–70% tổng dung lượng ảnh. Trước khi bulk optimize, backup toàn bộ thư mục wp-content/uploads để phòng trường hợp ảnh bị mất chất lượng quá mức.
WebP có được tất cả trình duyệt hỗ trợ không?
Hơn 95% trình duyệt hiện đại (2024) hỗ trợ WebP — bao gồm Chrome, Firefox, Safari (từ 14+), Edge. Internet Explorer không hỗ trợ nhưng IE đã ngừng hỗ trợ chính thức từ 2022. Nếu lo ngại về browser support, dùng thẻ HTML <picture> để cung cấp fallback (dự phòng) JPEG/PNG cho trình duyệt cũ.