Tối ưu ảnh cho website: định dạng, kích thước và lazy-load đúng cách
Nội dung chính
Ảnh thường chiếm phần lớn dung lượng tải của một trang web. Tối ưu ảnh là cách nhanh nhất để cải thiện tốc độ, đặc biệt trên điện thoại và mạng di động.
Chọn định dạng
| Định dạng | Dùng cho | Ghi chú |
|---|---|---|
| WebP | Ảnh chụp, ảnh sản phẩm, banner | Nhẹ hơn JPEG đáng kể ở cùng chất lượng, được trình duyệt hiện đại hỗ trợ |
| AVIF | Ảnh chụp cần nén mạnh | Thường nhẹ hơn WebP, mã hóa chậm hơn; nên có bản dự phòng |
| JPEG | Ảnh chụp khi cần tương thích rộng | Chọn chất lượng khoảng 70–85 |
| PNG | Ảnh cần nền trong suốt, ảnh chụp màn hình có chữ | Nặng với ảnh chụp; cân nhắc WebP có kênh alpha |
| SVG | Logo, icon, hình minh họa vector | Nét ở mọi kích thước; cần làm sạch nếu nhận file từ nguồn ngoài |
Có thể phục vụ nhiều định dạng bằng thẻ <picture>:
<picture>
<source srcset="/anh/banner.avif" type="image/avif">
<source srcset="/anh/banner.webp" type="image/webp">
<img src="/anh/banner.jpg" alt="Không gian quán buổi sáng" width="1600" height="900">
</picture>Xuất đúng kích thước
Không tải ảnh 4000 px để hiển thị trong khung 400 px. Tạo vài kích thước và để trình duyệt tự chọn bằng srcset và sizes:
<img src="/anh/sp-800.webp"
srcset="/anh/sp-480.webp 480w, /anh/sp-800.webp 800w, /anh/sp-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 33vw"
width="800" height="600" alt="Ghế gỗ sồi tựa lưng cong">Khai báo width và height
Luôn có width và height (hoặc CSS aspect-ratio) để trình duyệt giữ chỗ trước khi ảnh tải xong. Thiếu kích thước là nguyên nhân phổ biến làm nội dung bị nhảy (CLS cao).
Lazy-load đúng chỗ
- Thêm
loading="lazy"cho ảnh nằm dưới màn hình đầu tiên. - Không lazy-load ảnh lớn nhất ở màn hình đầu (thường là ảnh LCP). Với ảnh này, có thể thêm
fetchpriority="high". - Ảnh nền bằng CSS không lazy-load được bằng thuộc tính; cân nhắc dùng
<img>cho ảnh quan trọng.
Văn bản thay thế (alt)
Viết alt mô tả nội dung và chức năng của ảnh, ngắn gọn: "Bàn ăn gỗ 6 chỗ màu óc chó" tốt hơn "ảnh 1" hoặc nhồi từ khóa. Ảnh chỉ để trang trí dùng alt="" để trình đọc màn hình bỏ qua.
Đặt tên file và nơi lưu
- Tên file không dấu, có nghĩa:
ban-an-go-6-cho.webp. - Bật bộ nhớ đệm dài hạn cho ảnh (Cache-Control), thay tên hoặc thêm phiên bản khi đổi ảnh.
- Dùng CDN nếu khách truy cập từ nhiều khu vực hoặc website có rất nhiều ảnh.
Quy trình gợi ý cho đội nội dung
- Chụp hoặc nhận ảnh gốc, lưu trữ riêng.
- Cắt theo tỷ lệ khung hiển thị (ví dụ 3:2 cho thẻ sản phẩm).
- Xuất WebP ở 2–3 kích thước, chất lượng khoảng 75–82.
- Đặt tên file, viết alt, tải lên.
- Kiểm tra bằng PageSpeed Insights sau khi đăng.
Có câu hỏi về công cụ nén ảnh hàng loạt hoặc cấu hình máy chủ? Đăng trong chuyên mục Lập trình & công cụ kèm thông tin nền tảng bạn đang dùng.