Ảnh đẹp mà nặng sẽ làm trang chậm. Bài này dạy chèn ảnh, video đúng cách: có mô tả, kích thước, tải lười và định dạng hiện đại.
- Chèn ảnh với alt, width, height
- Dùng picture để chọn định dạng và kích thước
- Tải lười ảnh bằng loading="lazy"
- Nhúng video và âm thanh
- alt
- Văn bản thay thế mô tả ảnh cho người không xem được ảnh và cho công cụ tìm kiếm.
- WebP, AVIF
- Định dạng ảnh hiện đại, nhẹ hơn JPG, PNG đáng kể.
- Tải lười (lazy loading)
- Chỉ tải ảnh khi người dùng sắp cuộn tới.
- Ảnh đáp ứng
- Cung cấp nhiều kích thước để thiết bị chọn ảnh phù hợp.
Khái niệm và lý thuyết
Ảnh thường chiếm phần lớn dung lượng của trang, nên chọn đúng định dạng rất quan trọng. JPG tốt cho ảnh chụp, PNG cho ảnh cần nền trong suốt hoặc nhiều chữ, SVG cho biểu tượng và hình vẽ (vector, phóng to không vỡ), còn WebP và AVIF là định dạng hiện đại nén tốt hơn JPG/PNG khoảng 25–50% với chất lượng tương đương.
Ảnh đáp ứng: màn hình điện thoại không cần ảnh 2000px. Thuộc tính srcset cung cấp nhiều kích thước để trình duyệt tự chọn; thẻ picture cho phép chọn theo định dạng hoặc theo kích thước màn hình (art direction).
Chỉ số hiệu năng liên quan: LCP (thời gian hiển thị nội dung lớn nhất, thường là ảnh đầu trang) và CLS (độ xô lệch bố cục). Khai báo width, height giúp trình duyệt giữ chỗ trước để trang không giật; loading="lazy" trì hoãn tải ảnh ngoài màn hình.
Thẻ img đúng chuẩn
<img src="/hoa.webp" alt="Bông hoa đào nở ở Mộc Châu"
width="800" height="450" loading="lazy">Khai báo width và height để trình duyệt giữ chỗ trước, trang không bị "nhảy" khi ảnh tải xong (chỉ số CLS).
Ảnh đáp ứng với srcset và picture
<img src="/anh-800.jpg" srcset="/anh-400.jpg 400w, /anh-800.jpg 800w, /anh-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px" alt="...">
<picture>
<source srcset="/anh.avif" type="image/avif">
<source srcset="/anh.webp" type="image/webp">
<img src="/anh.jpg" alt="Mô tả">
</picture>Video và âm thanh
<video controls poster="/bia.jpg" width="640">
<source src="/bai-giang.webm" type="video/webm">
<source src="/bai-giang.mp4" type="video/mp4">
Trình duyệt không hỗ trợ video.
</video>
<audio controls src="/podcast.mp3"></audio>Video dài nên đăng lên YouTube rồi nhúng bằng iframe để tiết kiệm băng thông.
Viết alt tốt
| Không tốt | Tốt |
|---|---|
| alt="ảnh" | alt="Sinh viên thực hành lập trình trong phòng máy" |
| alt="IMG_2031.jpg" | alt="Biểu đồ doanh thu quý 3 tăng 20%" |
| Ảnh trang trí chèn alt dài | alt="" (rỗng) để trình đọc bỏ qua |
Một trang tin có 20 ảnh JPG mỗi ảnh 2 MB nên tải mất 15 giây trên 4G. Sau khi đổi sang WebP, thu nhỏ 800px, thêm loading="lazy", trang còn dưới 2 MB và tải trong chưa đầy 3 giây.
Công cụ nén ảnh miễn phí: squoosh.app. Ảnh nền hero nên giữ dưới 200 KB.
Không dùng loading="lazy" cho ảnh đầu trang (hero) vì sẽ làm chậm hiển thị nội dung chính.
- Nén một ảnh JPG thành WebP và so sánh dung lượng.
- Viết alt cho ba ảnh theo bảng trên.
- Chèn video YouTube bằng iframe.
- Luôn có alt, width, height.
- Dùng WebP/AVIF và picture/srcset.
- Lazy load ảnh ngoài màn hình đầu.