Bài 2. Hình ảnh và đa phương tiện

Ả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.

30 phútCơ bản
Bạn sẽ học được
  • 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
Thuật ngữ cần biết
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.

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ốtTố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àialt="" (rỗng) để trình đọc bỏ qua
Tình huống: Trang tin tải nhanh gấp ba

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.

Mẹo hay

Công cụ nén ảnh miễn phí: squoosh.app. Ảnh nền hero nên giữ dưới 200 KB.

Lưu ý

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.

Thực hành
  1. Nén một ảnh JPG thành WebP và so sánh dung lượng.
  2. Viết alt cho ba ảnh theo bảng trên.
  3. Chèn video YouTube bằng iframe.
Tóm tắt bài học
  • Luôn có alt, width, height.
  • Dùng WebP/AVIF và picture/srcset.
  • Lazy load ảnh ngoài màn hình đầu.