Kỹ năng SEO
Tối ưu hình ảnh website: kích thước, định dạng, alt và tốc độ tải
Trên website doanh nghiệp, ảnh thường chiếm phần lớn dung lượng tải về và hay chính là phần tử quyết định trang hiện ra nhanh hay chậm. Bài này hướng dẫn tối ưu hình ảnh website theo hai mục tiêu cùng lúc: tải nhanh trên điện thoại và được Google hiểu đúng, kèm quy trình cho người đăng bài hằng ngày trên WordPress.
Tối ưu hình ảnh website gồm: thu nhỏ ảnh về kích thước hiển thị trước khi tải lên, dùng WebP (hoặc AVIF) thay JPEG, PNG; không lazy-load ảnh đầu trang; khai báo chiều rộng, chiều cao để bố cục không nhảy; đặt tên tệp có nghĩa và viết thẻ alt mô tả đúng nội dung ảnh. Với WordPress, nhiều việc đã được tự động, phần còn lại là kỷ luật của người đăng.
Ảnh ảnh hưởng đến website ở những điểm nào?
- LCP: ảnh banner, ảnh sản phẩm chính thường là phần tử nội dung lớn nhất của màn hình đầu. Ảnh nặng hoặc tải muộn làm LCP vượt ngưỡng 2,5 giây.
- CLS: ảnh không khai báo kích thước làm chữ bị đẩy xuống khi ảnh tải xong.
- Google Hình ảnh: ảnh gốc, có tên tệp và alt rõ ràng có thể mang về lượt truy cập, nhất là với sản phẩm, công trình, món ăn.
- Chi phí: ảnh nặng tốn dung lượng lưu trữ, băng thông và làm bản sao lưu phình to.
Ý nghĩa của LCP và CLS có trong bài Core Web Vitals là gì.
Chọn định dạng ảnh nào?
| Định dạng | Dùng cho | Lưu ý |
|---|---|---|
| WebP | Gần như mọi ảnh chụp và đồ họa trên website | Nhẹ hơn JPEG, PNG ở cùng chất lượng; mọi trình duyệt hiện đại đều hiển thị; WordPress hỗ trợ tải lên từ bản 5.8 |
| AVIF | Ảnh chụp lớn khi muốn giảm dung lượng hơn nữa | Nén tốt hơn WebP nhưng mã hóa chậm hơn; WordPress hỗ trợ từ bản 6.5 nếu máy chủ có thư viện xử lý AVIF |
| JPEG | Ảnh chụp khi chưa chuyển được sang WebP | Nén ở mức chất lượng vừa đủ, không xuất ở chất lượng tối đa |
| PNG | Ảnh cần nền trong suốt, ảnh chụp màn hình nhiều chữ | Ảnh chụp lưu dạng PNG thường nặng gấp nhiều lần; có thể thay bằng WebP |
| SVG | Logo, biểu tượng | Nét ở mọi kích thước; chỉ dùng tệp SVG từ nguồn tin cậy vì SVG có thể chứa mã |
| GIF | Hầu như không nên dùng | Ảnh động nên chuyển thành video MP4 ngắn để nhẹ hơn nhiều |
Google Tìm kiếm hỗ trợ lập chỉ mục các định dạng BMP, GIF, JPEG, PNG, WebP, SVG và AVIF theo tài liệu Google Search Central về hình ảnh.
Kích thước và dung lượng: thu nhỏ trước khi nén
Nén một ảnh rộng 4000px vẫn nặng hơn nhiều so với ảnh đã thu về 1.200px rồi mới nén. Thứ tự đúng là: cắt theo tỷ lệ khung → thu nhỏ → nén.
| Vai trò ảnh | Chiều rộng nên xuất (tham khảo) | Ghi chú |
|---|---|---|
| Banner rộng toàn màn hình | Khoảng 1.920px | Cân nhắc ảnh riêng, hẹp hơn cho điện thoại |
| Ảnh trong bài viết | Khoảng 1.200px | Đủ nét trên màn hình mật độ điểm ảnh cao |
| Ảnh sản phẩm | Theo khung hiển thị và tính năng phóng to của theme | Giữ cùng tỷ lệ cho mọi sản phẩm để lưới không lệch |
| Ảnh đại diện nhỏ, ảnh thành viên | Gấp đôi khung hiển thị | Ví dụ khung 300px thì xuất 600px |
WordPress tự tạo nhiều kích thước từ ảnh gốc (mặc định gồm 150, 300, 768, 1024, 1536, 2048px) và tự chèn thuộc tính srcset để trình duyệt chọn bản phù hợp màn hình. Ảnh tải lên lớn hơn 2.560px sẽ được WordPress tự thu nhỏ làm bản dùng chính. Nhờ vậy, việc của người đăng chủ yếu là không tải lên ảnh quá lớn và chèn ảnh ở kích thước hợp lý trong trình soạn thảo.
Ảnh đầu trang cần xử lý khác
Ảnh đầu tiên khách nhìn thấy quyết định LCP, nên quy tắc ngược với các ảnh còn lại.
- Không lazy-load ảnh đầu trang. Từ WordPress 5.5, ảnh được thêm
loading="lazy"tự động; các bản WordPress mới đã bỏ lazy-load cho ảnh đầu tiên và thêmfetchpriority="high"cho ảnh có khả năng là LCP. Nhưng plugin tối ưu hoặc theme có thể bật lazy-load lại cho tất cả, cần kiểm tra. - Tránh đặt ảnh chính bằng ảnh nền CSS hoặc nạp bằng JavaScript (nhiều slider làm vậy). Trình duyệt phát hiện ảnh đó muộn.
- Một ảnh tĩnh thay cho slider năm ảnh. Phần lớn khách không xem tới ảnh thứ hai, nhưng trang vẫn phải tải chúng.
- Ảnh banner riêng cho điện thoại nếu bố cục khác hẳn, thay vì thu nhỏ ảnh ngang rộng.
Chống xô dịch bố cục do ảnh
Trình duyệt cần biết tỷ lệ ảnh trước khi tải để giữ chỗ. Ảnh chèn qua trình soạn thảo WordPress thường đã có thuộc tính width và height. Những chỗ hay thiếu: ảnh trong khối tùy chỉnh của page builder, ảnh chèn bằng mã HTML tự viết, iframe video và bản đồ, banner quảng cáo. Với các khối này, khai báo kích thước hoặc đặt tỷ lệ khung (aspect-ratio) bằng CSS.
SEO hình ảnh: tên tệp, alt và ngữ cảnh
Theo hướng dẫn về hình ảnh của Google Search Central, Google hiểu ảnh chủ yếu qua văn bản quanh ảnh, thẻ alt, tên tệp và tiêu đề trang.
- Tên tệp có nghĩa, không dấu, nối bằng gạch ngang:
may-loc-nuoc-ro-10-loi.webpthay vìIMG_20260912.jpg. Đặt tên trước khi tải lên vì đổi sau khó hơn. - Alt mô tả đúng nội dung ảnh như đang tả cho người không nhìn thấy: “Kỹ thuật viên thay lõi lọc máy lọc nước tại bếp gia đình”. Không nhồi danh sách từ khóa.
- Ảnh trang trí (đường kẻ, họa tiết nền) để alt rỗng để trình đọc màn hình bỏ qua.
- Đặt ảnh gần đoạn văn liên quan, thêm chú thích khi ảnh cần giải thích.
- Không đặt chữ quan trọng trong ảnh như giá, số điện thoại, bảng thông số. Google và khách dùng điện thoại đều khó đọc.
- Ưu tiên ảnh thật của sản phẩm, công trình, đội ngũ. Ảnh kho xuất hiện trên hàng nghìn website không giúp phân biệt bạn, và ảnh lấy từ mạng có rủi ro bản quyền.
- Sơ đồ trang có ảnh: plugin SEO phổ biến như Rank Math, Yoast đưa ảnh trong bài vào sitemap, kiểm tra tùy chọn đã bật.
Quy trình cho người đăng bài, đăng sản phẩm
- Cắt ảnh đúng tỷ lệ khung đã thống nhất cho từng loại nội dung.
- Thu nhỏ về chiều rộng theo bảng ở trên.
- Xuất WebP (hoặc dùng plugin tự chuyển đổi khi tải lên).
- Đặt tên tệp không dấu, có nghĩa.
- Tải lên, điền alt ngay trong thư viện.
- Xem bài trên điện thoại: ảnh đầu hiện nhanh, không nhảy chữ.
Nếu khối lượng sản phẩm, bài viết lớn và không có người làm đều tay, dịch vụ đăng sản phẩm, bài viết chuẩn SEO của Marketing SEO Top xử lý ảnh nén có alt cho từng bài, giá 20.000đ và 50.000đ mỗi bài tùy mức.
Xử lý kho ảnh cũ đã tải lên
- Sao lưu thư mục ảnh trước khi chạy bất kỳ công cụ nén hàng loạt nào.
- Dùng plugin nén, chuyển WebP hàng loạt có giữ bản gốc, chạy thử trên vài ảnh, kiểm tra chất lượng rồi mới chạy toàn bộ.
- Ưu tiên ảnh xuất hiện ở trang có nhiều lượt xem và ảnh đầu trang; không cần xử lý cùng lúc hàng chục nghìn ảnh không ai xem.
- Sau khi đổi theme hoặc kích thước khung, tạo lại các kích thước ảnh thu nhỏ để khớp bố cục mới.
- Xóa ảnh không còn dùng một cách thận trọng: ảnh có thể được dùng trong page builder hoặc trang không liên kết trực tiếp.
Sai lầm thường gặp
- Tải ảnh chụp điện thoại thẳng lên vài MB mỗi ảnh, nhất là khi nhiều người cùng đăng bài.
- Lazy-load toàn bộ ảnh, kể cả ảnh banner.
- Nén quá tay làm ảnh sản phẩm bị vỡ, khách không nhìn rõ chi tiết khi mua.
- Alt sao chép tiêu đề bài cho mọi ảnh trong bài.
- Dùng ảnh trên mạng không rõ nguồn, sau đó nhận yêu cầu gỡ hoặc đòi bồi thường bản quyền.
Ảnh chỉ là một phần của tốc độ. Thứ tự xử lý toàn bộ website có trong bài cách tăng tốc website WordPress; nếu cần người làm từ máy chủ đến JavaScript, xem dịch vụ tối ưu tốc độ website.
Câu hỏi thường gặp
Ảnh WebP có hiển thị trên mọi trình duyệt không?
Có với các trình duyệt hiện đại như Chrome, Safari, Firefox, Edge trên cả máy tính và điện thoại. Chỉ trình duyệt rất cũ mới không hỗ trợ. Một số plugin chuyển đổi vẫn giữ bản JPEG, PNG để dự phòng.
Nên nén ảnh trước khi tải lên hay dùng plugin nén?
Tốt nhất là cả hai: thu nhỏ kích thước trước khi tải lên, rồi để plugin nén và chuyển định dạng. Plugin không sửa được thói quen tải ảnh 5 MB lên, và ảnh gốc quá lớn vẫn chiếm dung lượng máy chủ.
Thẻ alt có cần chứa từ khóa không?
Chỉ khi từ khóa mô tả đúng nội dung ảnh. Alt viết để người dùng trình đọc màn hình và Google hiểu ảnh; một câu mô tả tự nhiên tốt hơn chuỗi từ khóa lặp lại. Không cần alt giống nhau cho mọi ảnh trong bài.
Tên tệp ảnh tiếng Việt có dấu có sao không?
Nên tránh. Tên có dấu, khoảng trắng bị mã hóa thành chuỗi ký tự khó đọc trong đường dẫn và có thể gây lỗi ở một số máy chủ, công cụ sao lưu. Viết không dấu, nối bằng gạch ngang.
Có nên dùng ảnh AVIF thay WebP không?
Có thể, nếu máy chủ hỗ trợ tạo AVIF và bạn đã thử chất lượng hiển thị. AVIF thường nhẹ hơn WebP với ảnh chụp lớn, nhưng xử lý chậm hơn khi tải lên. Với website doanh nghiệp nhỏ, WebP đã đủ tốt.
Cần người làm giúp phần này?
Mô tả ngắn nhu cầu hoặc gửi link website. Chúng tôi phản hồi bằng đánh giá cụ thể trước khi báo giá.
