Hiểu Google
Tối ưu hình ảnh: kích thước, nén ảnh và văn bản thay thế
Th10
Mùa 4 – Hiểu Google: Kiến thức và thực hành SEO
Bài này giúp bạn
Chuẩn bị một ảnh vừa chỗ hiển thị, giảm dung lượng hợp lý và viết văn bản thay thế theo mục đích của ảnh.
Cần chuẩn bị
Một ảnh gốc và trang dự định đăng. Giữ bản gốc để đối chiếu; chưa cần đổi toàn bộ thư viện ảnh hay cài thêm plugin.
Bức ảnh chiếc đèn nhìn rất rõ trên điện thoại. Đưa lên bài viết, trang lại mở chậm hơn. Bạn nén mạnh tay, ảnh nhẹ đi nhưng đường viền chao vải bắt đầu nhòe.
Một ảnh nhỏ hơn chưa chắc là một ảnh tốt hơn. Người đang chọn sản phẩm vẫn cần nhìn được hình dáng, màu sắc và những chi tiết quan trọng.
Tối ưu ảnh là chọn kích thước, định dạng và mức nén phù hợp với nơi dùng, rồi giữ lại thông tin người đọc cần. Văn bản thay thế cũng cần phản ánh mục đích ấy.
Đừng nhầm ba việc: kích thước, dung lượng và cắt ảnh
- Kích thước pixel: chẳng hạn 900 × 600 px, cho biết số điểm ảnh theo chiều ngang và dọc.
- Dung lượng: số KB hoặc MB cần truyền để tải tệp.
- Khung cắt: phần nội dung còn được giữ trong ảnh.
Giảm dung lượng có thể nhờ thay cách mã hóa hoặc mức nén mà chưa cần cắt mất sản phẩm. Ngược lại, cắt cho đúng tỷ lệ cũng chưa chắc làm tệp đủ gọn.
Chọn ảnh để giải quyết một việc
Ảnh đại diện giúp nhận ra chủ đề. Ảnh sản phẩm giúp khách nhận mẫu. Ảnh phần gá giúp khách hiểu cấu tạo hoặc gửi thông tin đúng khi đặt làm.
Trước khi sửa, hỏi: “Người đọc phải nhìn được điều gì trong ảnh này?”. Nếu là phần gá, giữ chi tiết đó rõ quan trọng hơn làm phông nền đẹp. Nếu là ảnh kỹ thuật có chữ, thu nhỏ đến mức chữ không đọc được là mất mục đích.
Trong dự án Hiểu Google, ảnh biên tập dùng khung 900 × 600 px. Đây là quy cách của dự án, không phải kích thước Google bắt buộc cho mọi ảnh trên mọi website. Ảnh sản phẩm cần zoom hoặc bản vẽ kỹ thuật có thể cần phương án khác.
1. Chuẩn bị kích thước phù hợp nơi hiển thị
Hãy xem cột nội dung hoặc ô sản phẩm sẽ đặt ảnh. Tránh tải nguyên một ảnh rất lớn chỉ để hiển thị thành một ô nhỏ, nhưng cũng đừng bỏ hết độ phân giải cần thiết cho màn hình mật độ cao hoặc chức năng phóng lớn.
WordPress có thể tạo nhiều cỡ ảnh và giao diện có thể chọn cỡ phù hợp. Cần kiểm tra bản thực sự được tải trên trang, không chỉ nhìn tên tệp gốc trong thư viện.
Nếu ảnh đứng không hợp khung ngang, cân nhắc bố trí nền trống thay vì cắt mất đầu đèn hoặc chân đế. Tỷ lệ đẹp cần đi cùng một sản phẩm còn nguyên thông tin.
2. Chọn định dạng và nén có đối chiếu
Ảnh chụp có thể thử WebP, AVIF hoặc JPEG tùy hệ thống đang hỗ trợ. Những hình cần độ trong suốt, đường nét hoặc chữ sắc có thể có lựa chọn khác; không nên đổi tất cả bằng một quy tắc duy nhất.
Hướng dẫn mã hóa và nén ảnh của web.dev giải thích việc tạo các phiên bản phù hợp. Với người tự làm, bắt đầu bằng một ảnh, so dung lượng và nhìn bản xuất ở đúng kích thước sử dụng.
Không có một mức KB chung bảo đảm mọi ảnh đều đẹp và nhanh. Ảnh nền đơn giản khác ảnh chi tiết nhiều vật liệu. Chọn mức gọn nhất mà vẫn giữ đủ chi tiết cho công việc.
Nếu dùng plugin tối ưu, kiểm tra hệ thống đã có phần nào làm việc đó. Đừng bật nhiều cơ chế chuyển đổi hoặc thay ảnh chồng nhau trước khi biết nguồn nào đang phục vụ tệp.
3. Đặt tên tệp có ý nghĩa
Trước khi tải ảnh mới lên, có thể dùng tên mô tả như den-ban-go-chao-vai-db01.webp hoặc chi-tiet-ga-chao-den-db01.webp. Không cần nhét nhiều biến thể từ khóa vào một tên dài.
Đây là ví dụ tên tệp. Với ảnh đã đăng ở nhiều nơi, đừng đổi đường dẫn chỉ để làm tên đẹp hơn mà quên kiểm tra các liên kết và nơi đang sử dụng.
4. Viết alt theo vai trò của ảnh
Alt là văn bản thay thế, giúp diễn đạt ý nghĩa của ảnh khi người đọc không nhìn được nó, trong đó có người dùng trình đọc màn hình. Google cũng dùng văn bản này cùng ngữ cảnh để hiểu ảnh. Hướng dẫn SEO hình ảnh của Google.
| Ảnh đang làm gì? | Ví dụ cách mô tả |
|---|---|
| Nhận diện sản phẩm. | Đèn bàn chân gỗ, chao vải màu kem DB01. |
| Chỉ vị trí đo. | Đặt thước ngang miệng chao để đo đường kính ngoài. |
| Chỉ là chi tiết trang trí, không thêm thông tin. | Có thể dùng alt rỗng theo ngữ cảnh và cấu trúc trang. |
Không cần bắt đầu mọi câu bằng “hình ảnh của”. Không viết một danh sách từ khóa thay cho nội dung ảnh. Alt và chú thích có vai trò khác nhau: chú thích là dòng người đọc nhìn thấy bên dưới khi mình cần giải thích thêm.
Tham khảo thêm cây quyết định alt của W3C WAI để chọn mô tả theo chức năng của ảnh.
Với ảnh là nút hoặc liên kết, phần thay thế cần giúp hiểu hành động hay đích liên quan; không chỉ kể màu sắc. Nếu ảnh chứa thông tin phức tạp như bảng hoặc sơ đồ, bài viết cũng nên có phần giải thích bằng văn bản.
5. Kiểm tra cách tải và khoảng trống dành cho ảnh
Ảnh ở xa phần đang xem có thể được tải trì hoãn bằng lazy load. Nhưng ảnh lớn quan trọng xuất hiện ngay đầu trang thường cần tải sớm; đừng mặc định mọi ảnh đều nên trì hoãn.
Trang cũng cần dành không gian phù hợp trước khi ảnh hiện để hạn chế chữ và nút bị đẩy nhảy. Thuộc tính kích thước hoặc cách bố trí của giao diện có thể hỗ trợ việc này.
Xem hướng dẫn lazy load của web.dev. Nếu dùng theme hoặc plugin, ưu tiên hiểu lựa chọn đã có và kiểm tra kết quả thay vì thêm mã ngay.
Thực hành: kiểm tra một ảnh từ gốc đến trang
- Ghi ảnh giúp người đọc hiểu việc gì.
- Giữ bản gốc, tạo phiên bản phù hợp nơi dùng và so dung lượng.
- Nhìn lại chi tiết quan trọng, chữ và màu ở kích thước hiển thị.
- Điền alt theo vai trò ảnh, thêm chú thích nếu cần.
- Mở trang công khai trên điện thoại và máy tính; xem có mờ, bị cắt hoặc làm nội dung nhảy khi tải không.
Trang và ảnh: …
Thông tin cần giữ: …
Pixel, định dạng, dung lượng trước / sau: …
Alt và lý do viết như vậy: …
Kết quả xem trên trang: …
Điều cần chỉnh tiếp: …
Giảm phần dữ liệu phải tải, giữ phần thông tin người đọc cần nhìn thấy.
Phần tiếp theo sẽ giải thích các chỉ số tốc độ: vì sao ảnh đã nhẹ nhưng trang vẫn có thể phản hồi chậm hoặc làm nội dung nhảy.
Các chuyên đề Mùa 4 · Bản đồ Hiểu Google
Đối chiếu tài liệu Google và web.dev ngày 20/10/2026. Các mã sản phẩm và tên tệp là ví dụ. Quy cách 900 × 600 px áp dụng cho ảnh biên tập của dự án, không phải yêu cầu chung của Google.
