Tối ưu tốc độ tải và thẻ alt cho hình ảnh AI trên trang web, blog

07/10/2026 · 8 phút đọc · AI Hình Ảnh

Hình ảnh AI tải về để nguyên mà gắn vào bài là trang nặng, chậm, và vô hình với máy tìm kiếm. Cách thu nhỏ, nén, khai kích thước, tải trễ và viết thẻ alt có ích.

Tối ưu tốc độ tải và thẻ alt cho hình ảnh AI trên trang web, blog

Hình ảnh tải về từ AI Hình Ảnh có cạnh dài từ 1280 tới 1664 px. Gắn nguyên tệp đó vào một khung hình thu nhỏ rộng 360 trên điện thoại là bắt người đọc tải gấp nhiều lần lượng dữ liệu cần thiết. Nhân lên mười hình trong một trang danh sách bài, trang chậm thấy rõ, nhất là khi người đọc dùng mạng di động.

Phần thứ hai hay bị bỏ quên là thẻ alt. Máy tìm kiếm và người dùng trình đọc màn hình không "nhìn" được hình; họ chỉ đọc được dòng chữ bạn khai. Bài này đi qua cả hai việc theo đúng thứ tự làm.

Bước 1: Biết khung hiển thị thật trên trang

Trước khi nén bất cứ thứ gì, đo xem mỗi loại hình ảnh trên trang hiển thị rộng bao nhiêu.

Cách đo nhanh: mở trang trên máy tính, bấm chuột phải vào hình, chọn "Kiểm tra" (Inspect). Thanh công cụ sẽ hiện kích thước hiển thị, ví dụ 760 × 427. Làm lại với chế độ giả lập điện thoại.

Vị trí	Thường hiển thị rộng (máy tính)	Trên điện thoại	Nên xuất rộng
Hình đầu bài	700–900	360–430	1200 (đủ cho màn hình nét gấp đôi)
Hình giữa bài	600–760	360–430	1000
Hình thu nhỏ trong danh sách	240–360	160–360	600
Hình đầu trang chủ khổ rộng	gần hết màn hình	hết màn hình	1664 (giữ nguyên)

Số trong bảng là mức thường gặp ở các giao diện blog phổ biến, không phải chuẩn. Đo trang của bạn để có số đúng. Cột cuối nhân đôi khoảng khung điện thoại vì màn hình điện thoại hiện nay có mật độ điểm cao.

Bước 2: Thu nhỏ và nén

Tệp tải về đã là webp — định dạng nhẹ hơn jpeg ở cùng chất lượng và mọi trình duyệt hiện nay đều đọc. Việc còn lại là thu nhỏ về đúng chiều rộng và chọn mức nén.

Ba cách, chọn cách hợp tay:

Không biết lập trình: dùng Squoosh (chạy ngay trên trình duyệt), kéo hình vào, chỉnh "Resize" về chiều rộng cần, chọn WebP, kéo thanh chất lượng, so sánh hai nửa trước và sau.

Dùng dòng lệnh trên máy chủ (cần cài ImageMagick):

```bash
# Thu nhỏ hình đầu bài về rộng 1200, nén webp chất lượng 80
magick dau-bai-goc.webp -resize 1200x -quality 80 dau-bai-1200.webp

# Tạo thêm bản 600 cho hình thu nhỏ
magick dau-bai-goc.webp -resize 600x -quality 76 dau-bai-600.webp
```

Lấy qua API: nếu bạn tạo hình bằng khoá API, có thể xin kích thước tự chọn bằng tham số size (máy tự làm tròn về bội số 16) và định dạng webp bằng output_format. Vẫn nên thu nhỏ thêm bản cho hình thu nhỏ.

Mức chất lượng 75–82 thường đủ cho hình chụp chân thực. Hình phong cách Minh hoạ phẳng có mảng màu lớn, nén thấp dễ lộ vệt — thử từ 82 trở lên. Không có con số đúng cho mọi hình: nén ba mức, mở trên điện thoại, chọn mức thấp nhất mà mắt chưa thấy khác.

Bước 3: Khai kích thước và để trình duyệt chọn bản vừa

Gắn hình vào trang với đủ thuộc tính:

```html
<img
src="/hinh/so-tay-thue-tro-1200.webp"
srcset="/hinh/so-tay-thue-tro-600.webp 600w,
/hinh/so-tay-thue-tro-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 760px"
width="1200" height="669"
alt="Hai cô gái trẻ khiêng thùng đồ lên cầu thang hẹp của khu tập thể cũ, ánh chiều lọt qua ô thoáng"

```

Giải thích từng dòng, vì đây là chỗ người làm web hay làm thiếu:

srcset và sizes cho trình duyệt biết có những bản nào và khung hiển thị rộng bao nhiêu. Điện thoại tự lấy bản 600, máy tính lấy bản 1200.
width và height là kích thước thật của tệp (hoặc đúng tỉ lệ). Có hai thuộc tính này, trình duyệt giữ chỗ trước khi hình tải xong, chữ phía dưới không bị nhảy lên nhảy xuống — đây là lỗi "trang giật" mà người đọc rất ghét.
Tỉ lệ 1200 × 669 ở trên lấy từ khổ Màn rộng 16:9 của trang vẽ (1664 × 928) thu nhỏ theo tỉ lệ.

Bước 4: Tải trễ đúng chỗ, tải sớm đúng chỗ

Thuộc tính loading="lazy" bảo trình duyệt chỉ tải hình khi người đọc cuộn gần tới. Rất có lợi cho hình giữa bài và hình thu nhỏ phía dưới.

Nhưng đừng gắn loading="lazy" cho hình đầu bài. Hình đầu bài là thứ lớn nhất người đọc thấy ngay khi mở trang; bắt nó tải trễ là làm trang trông chậm hơn. Với hình đầu bài, làm ngược lại: báo trình duyệt ưu tiên nó.

```html

<img src="/hinh/dau-bai-1200.webp" fetchpriority="high" width="1200" height="669" alt="...">

<img src="/hinh/giua-bai-1000.webp" loading="lazy" width="1000" height="667" alt="...">
```

Trong trang danh sách bài, hai ba hình thu nhỏ đầu tiên (thấy ngay không cần cuộn) để tải bình thường, các hình sau gắn loading="lazy".

Bước 5: Tên tệp có nghĩa

Tệp tải về có tên do hệ thống đặt. Đổi tên trước khi tải lên trang:

Viết thường, không dấu, nối bằng gạch ngang: thue-tro-khu-tap-the.webp
Mô tả nội dung hình, không nhồi từ khoá: thue-tro-ha-noi-gia-re-uy-tin-nhat.webp là quá tay
Thêm hậu tố kích thước nếu có nhiều bản: -600, -1200

Tên tệp có nghĩa giúp máy tìm kiếm hiểu thêm về hình, và giúp chính bạn tìm lại trong thư mục sau sáu tháng.

Đo lại sau khi sửa

Làm xong năm bước, đo lại thay vì đoán. PageSpeed Insights của Google (dán đường dẫn bài, chờ chấm) sẽ liệt kê từng hình còn quá lớn so với khung, hình thiếu kích thước, và hình nào là "phần tử lớn nhất" khi trang mở ra — thường chính là hình đầu bài. Nếu hình đầu bài vẫn bị gọi tên, xem lại bước 4.

Đo trên chế độ điện thoại trước, vì đó là chỗ chênh lệch rõ nhất. Mỗi lần đo có thể lệch vài điểm do mạng; so sánh xu hướng trước và sau, đừng so từng điểm số.

Thẻ alt: viết cho người không nhìn thấy hình

Thẻ alt có hai người đọc: người khiếm thị dùng trình đọc màn hình, và máy tìm kiếm. Viết cho người thứ nhất thì người thứ hai cũng hài lòng.

Ba quy tắc

Mô tả cái có trong hình, không phải chủ đề bài. Bài về "kinh nghiệm thuê trọ" nhưng hình là hai cô gái khiêng thùng đồ trên cầu thang — alt mô tả hai cô gái khiêng thùng đồ.
Một câu, khoảng 8–20 chữ. Đủ để hình dung, không kể lể.
Không bắt đầu bằng "Hình ảnh của…". Trình đọc màn hình đã tự báo đây là hình.

Bảng alt tốt, alt dở

Hình	Alt dở	Alt tốt
Mâm cơm gia đình nhìn từ trên xuống	"hình ảnh"	"Mâm cơm gia đình với bát canh rau ngót, đĩa cá kho và rổ rau sống, nhìn từ trên xuống"
Cô bán rau ở chợ sớm	"bảo hiểm tự nguyện, đóng bảo hiểm tự nguyện, bảo hiểm xã hội"	"Người phụ nữ bán rau ngồi dưới mái tôn chợ lúc trời còn tối, đèn bóng tròn treo trên đầu"
Hình minh hoạ bước 3 quy trình	"buoc-3.webp"	"Minh hoạ: người thợ ngồi đối diện khách hàng, giữa hai người là tập hồ sơ"
Đường kẻ trang trí giữa hai mục	"đường kẻ trang trí hoa văn"	`alt=""` (để trống)

Dòng cuối quan trọng: hình chỉ để trang trí thì để alt rỗng (alt=""), không bỏ hẳn thuộc tính. Alt rỗng bảo trình đọc màn hình bỏ qua; không có thuộc tính alt thì nó có thể đọc to tên tệp.

Đừng dán câu lệnh vẽ vào alt

Dưới mỗi kết quả trên trang vẽ có dòng "Câu lệnh vẽ" bằng tiếng Anh, dài, nhiều chi tiết kỹ thuật như ánh sáng, ống kính. Dán nó vào alt là sai cả ba quy tắc: tiếng Anh trên trang tiếng Việt, quá dài, và mô tả cách vẽ chứ không mô tả nội dung. Thay vào đó, rút mô tả tiếng Việt bạn đã gõ thành một câu.

Mô tả đã gõ để vẽ: "Hai cô gái trẻ khoảng hai mươi tuổi khiêng một thùng các-tông lớn lên cầu thang hẹp của khu tập thể cũ ở Hà Nội, tường vôi vàng bong tróc, ánh chiều lọt qua ô thoáng hình hoa, chụp từ chân cầu thang nhìn lên, tông ấm."

Alt rút gọn: "Hai cô gái trẻ khiêng thùng đồ lên cầu thang hẹp của khu tập thể cũ, ánh chiều lọt qua ô thoáng."

Hình ảnh AI có cần ghi "minh hoạ" trong alt?

Với bài tin tức, bài có thể gây hiểu nhầm là hình chụp thật, nên thêm "Minh hoạ:" ở đầu alt. Bài blog đời sống, bài hướng dẫn thì không bắt buộc. Chi tiết ở bài minh hoạ tin tức và ranh giới đạo đức.

Lỗi hay gặp và cách sửa

Trang danh sách bài nặng vài chục MB. Dùng nguyên tệp gốc cho hình thu nhỏ. Tạo bản 600 cho mọi hình đầu bài và dùng bản đó trong danh sách.

Chữ nhảy khi hình tải xong. Thiếu width và height. Thêm vào, đúng tỉ lệ thật của tệp.

Hình đầu bài hiện chậm dù đã nén. Kiểm tra có lỡ gắn loading="lazy" không. Gỡ ra, thêm fetchpriority="high".

Hình bị mờ trên điện thoại. Đã thu nhỏ bản cho điện thoại đúng bằng khung hiển thị (360) thay vì gấp đôi. Màn hình điện thoại nét nên cần khoảng gấp đôi số px.

Alt giống nhau ở mọi bài. Thường do giao diện tự lấy tiêu đề bài làm alt. Chỉnh để lấy trường mô tả riêng, và viết alt theo nội dung hình.

Danh sách kiểm cho mỗi hình ảnh

Vẽ ở ô vẽ đúng khổ khung hiển thị (đầu bài: Màn rộng 16:9 hoặc Ngang 3:2).
Tải về từ kho hình ảnh đã tạo, đổi tên tệp có nghĩa.
Thu nhỏ ra hai bản (600 và 1200), nén webp 75–82.
Gắn vào trang với srcset, width, height.
Đầu bài: fetchpriority="high"; còn lại: loading="lazy".
Viết alt một câu mô tả nội dung; hình trang trí để alt="".

Hỏi đáp nhanh

Hình ảnh tải về đã là webp rồi, còn cần nén nữa không?

Cần thu nhỏ về đúng khung hiển thị, và thường nén thêm một chút. Tệp gốc có cạnh dài 1280–1664 px, lớn hơn nhiều so với khung hiển thị trên điện thoại. Thu nhỏ về 600 hoặc 1200 là cách giảm dung lượng hiệu quả nhất.

Có nên dùng câu lệnh vẽ tiếng Anh làm thẻ alt cho tiện không?

Không. Câu lệnh vẽ dài, bằng tiếng Anh và mô tả cách vẽ chứ không mô tả nội dung cho người đọc. Hãy rút mô tả tiếng Việt bạn đã gõ thành một câu ngắn 8–20 chữ.

Có nên nhồi từ khoá của bài vào thẻ alt?

Không. Alt nhồi từ khoá không giúp người khiếm thị, và máy tìm kiếm hiện nay nhận ra kiểu viết này. Mô tả đúng nội dung hình là đủ; nếu hình liên quan tới chủ đề bài, từ khoá tự nhiên sẽ xuất hiện.

Hình đầu bài có nên gắn loading lazy không?

Không. Hình đầu bài là thứ người đọc thấy ngay khi mở trang, bắt nó tải trễ làm trang trông chậm hơn. Gắn fetchpriority high cho hình đầu bài, còn lazy dành cho hình giữa bài và phía dưới.

Hình trang trí có cần thẻ alt không?

Cần có thuộc tính alt nhưng để rỗng, viết alt="". Như vậy trình đọc màn hình biết mà bỏ qua. Nếu bỏ hẳn thuộc tính, một số trình đọc sẽ đọc to tên tệp, rất khó chịu cho người nghe.