Ảnh thường là phần nặng nhất của một trang web. Ảnh quá lớn làm trang tải chậm, người xem bỏ đi, và điểm tốc độ trên điện thoại giảm. Tin tốt là phần lớn vấn đề có thể xử lý bằng vài nguyên tắc đơn giản: chọn định dạng phù hợp, đặt đúng kích thước, tải ảnh đúng lúc và mô tả ảnh rõ ràng.
Bài trước trong chuỗi tốc độ là INP thay FID trong Core Web Vitals. Tối ưu ảnh là một trong những việc giúp cải thiện các chỉ số này.
Chọn định dạng phù hợp
Khoá học Images của web.dev có các bài riêng về từng định dạng: GIF, PNG, JPEG, WebP và AVIF. Nguyên tắc chọn nhanh:
| Định dạng | Hợp với | Ghi chú |
|---|---|---|
| JPEG | Ảnh chụp, nhiều màu | Phổ biến, nén có mất chất lượng |
| PNG | Ảnh cần nền trong suốt, hình đồ hoạ | Tệp thường lớn với ảnh chụp |
| WebP | Hầu hết ảnh trên web | Thường nhẹ hơn JPEG, PNG ở chất lượng tương đương |
| AVIF | Ảnh cần nhẹ hơn nữa | Nén tốt, cần kiểm tra hỗ trợ trình duyệt và thời gian xử lý |
| SVG | Logo, biểu tượng | Vẽ bằng mã, không vỡ khi phóng to |
Với WordPress, nhiều plugin và máy chủ có thể chuyển ảnh sang WebP khi tải lên. Hãy kiểm tra kết quả bằng mắt, vì nén quá tay làm ảnh bị vỡ hạt.
Đặt kích thước theo khung hiển thị
Một lỗi phổ biến là tải ảnh gốc rộng nhiều nghìn điểm ảnh để hiển thị trong khung chỉ vài trăm điểm. Cách xử lý:
- Xác định chiều rộng lớn nhất ảnh được hiển thị trên website, rồi xuất ảnh theo kích thước đó, kèm bản gấp đôi cho màn hình có độ phân giải cao nếu cần.
- Dùng thuộc tính srcset và sizes để trình duyệt chọn ảnh có kích thước phù hợp với thiết bị. Web.dev có hướng dẫn riêng về cú pháp mô tả này.
- Khai báo chiều rộng và chiều cao của ảnh để trình duyệt giữ chỗ trước, tránh việc nội dung bị nhảy khi ảnh tải xong.
Lazy load đúng chỗ
Lazy load nghĩa là trì hoãn tải ảnh cho tới khi người dùng cuộn tới gần. Nó giúp trang ban đầu nhẹ hơn, nhưng cần dùng đúng:
- Dùng cho ảnh nằm dưới màn hình đầu tiên, như thư viện ảnh, bài viết liên quan.
- Không dùng cho ảnh lớn đầu trang (ảnh nền hero, ảnh nổi bật của bài), vì nó thường là phần tử chính được đo tốc độ. Tải trễ ảnh này làm trang có vẻ chậm hơn.
- Với trình duyệt hiện đại, thuộc tính loading của thẻ ảnh đã hỗ trợ việc này mà không cần thêm thư viện.
- Kiểm tra bằng cách cuộn trang và quan sát xem ảnh có xuất hiện kịp thời không.
Alt text: mô tả cho người và cho máy
Alt text là đoạn mô tả ngắn của ảnh. Nó giúp người dùng đọc màn hình nghe được nội dung ảnh, hiển thị thay thế khi ảnh lỗi, và giúp công cụ tìm kiếm hiểu ảnh. Cách viết:
- Mô tả ngắn gọn, đúng nội dung ảnh, như “nhân viên đang kiểm tra bảng điều khiển hosting”.
- Không nhồi từ khoá.
- Ảnh chỉ trang trí có thể để alt trống để người đọc màn hình bỏ qua.
- Nếu ảnh chứa chữ quan trọng, hãy lặp lại chữ đó trong văn bản gần ảnh.
Tiêu chuẩn thông tin trên trang cũng liên quan tới dữ liệu có cấu trúc: mô tả khai báo phải khớp nội dung thấy được.
Quy trình đơn giản cho website doanh nghiệp
- Chuẩn bị ảnh đúng kích thước trước khi tải lên, đừng đẩy ảnh gốc từ điện thoại hoặc máy ảnh.
- Nén và chuyển sang WebP hoặc định dạng phù hợp.
- Đặt tên tệp rõ ràng, viết alt text.
- Bật lazy load cho ảnh dưới màn hình đầu.
- Kiểm tra lại bằng công cụ đo tốc độ trên điện thoại và so sánh trước và sau.
Ảnh bìa và ảnh minh hoạ cho bài viết nội dung cũng nên theo cùng quy trình, ngay cả khi bạn đang viết cho những chủ đề như AI Overviews. Đối với các website cũ, tham khảo thêm Page Experience và Core Web Vitals năm 2021.
Nếu cần hỗ trợ về tối ưu tốc độ PageSpeed, có thể liên hệ đội Công nghệ của HVSC; mảng SEO cũng liên quan khi bạn tối ưu ảnh cho tìm kiếm.
Cập nhật 2026: Hỗ trợ định dạng ảnh của trình duyệt và công cụ nén tiếp tục thay đổi, nên hãy kiểm tra tài liệu hiện hành của web.dev. Về việc kiểm tra tổng thể, xem checklist SEO năm 2026 và viết nội dung cho AI Overviews.
Câu hỏi thường gặp
Nên dùng WebP hay AVIF?
WebP được hỗ trợ rộng và dễ dùng. AVIF có thể nhẹ hơn nữa nhưng cần kiểm tra hỗ trợ và quy trình xử lý. Có thể bắt đầu bằng WebP.
Có nên lazy load tất cả ảnh?
Không. Ảnh lớn ở đầu trang nên tải ngay. Chỉ lazy load ảnh ở phía dưới.
Alt text có ảnh hưởng SEO không?
Alt text giúp công cụ tìm kiếm hiểu ảnh và hỗ trợ khả năng truy cập. Hãy viết tự nhiên, không nhồi từ khoá.
Nguồn tham khảo
- web.dev, Learn Images — https://web.dev/learn/images
- Google, Giới thiệu dữ liệu có cấu trúc (tham chiếu về nguyên tắc nội dung hiển thị) — https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data
Cần tư vấn website, phần mềm hoặc bảo mật?
Mô tả bài toán, kỹ thuật HVSC trao đổi phạm vi và phương án phù hợp với doanh nghiệp.
Câu hỏi thường gặp
Nên dùng WebP hay AVIF?
WebP được hỗ trợ rộng và dễ dùng. AVIF có thể nhẹ hơn nữa nhưng cần kiểm tra hỗ trợ và quy trình xử lý. Có thể bắt đầu bằng WebP.
Có nên lazy load tất cả ảnh?
Không. Ảnh lớn ở đầu trang nên tải ngay. Chỉ lazy load ảnh ở phía dưới.
Alt text có ảnh hưởng SEO không?
Alt text giúp công cụ tìm kiếm hiểu ảnh và hỗ trợ khả năng truy cập. Hãy viết tự nhiên, không nhồi từ khoá.
▶
▶
▶
▶
▶