Hình ảnh và đa phương tiện

Thẻ hình ảnh <img>

Thẻ <img> nhúng hình ảnh vào trang. Đây là thẻ tự đóng (không có thẻ đóng).

<img src="anh-meo.jpg" alt="Một con mèo đang ngủ" width="400" height="300">

Tầm quan trọng của thuộc tính alt

Thuộc tính alt là cực kỳ quan trọng vì:

• Khả năng tiếp cận (Accessibility): Trình đọc màn hình đọc alt cho người khiếm thị.
• SEO: Công cụ tìm kiếm hiểu nội dung ảnh qua alt.
• Fallback: Hiển thị khi ảnh không tải được.

<!-- Đúng -->
<img src="bieu-do.png" alt="Biểu đồ doanh thu tháng 1-6 năm 2024">

<!-- Sai — alt rỗng (chỉ dùng khi ảnh thuần trang trí) -->
<img src="gach-nen.png" alt="">

Tải ảnh lười biếng (Lazy Loading)

<img src="anh-lon.jpg" alt="Ảnh phong cảnh" loading="lazy">

Ảnh chỉ được tải khi người dùng cuộn đến gần vị trí của nó, giúp trang tải nhanh hơn.

Phần tử <figure> và <figcaption>

Dùng để nhóm ảnh cùng chú thích:

<figure>
  <img src="bieu-do.png" alt="Biểu đồ tăng trưởng">
  <figcaption>Hình 1: Tăng trưởng người dùng năm 2024</figcaption>
</figure>

Ảnh responsive với srcset

srcset cho phép trình duyệt chọn ảnh phù hợp theo độ phân giải màn hình:

<img
  src="anh-400.jpg"
  srcset="anh-400.jpg 400w, anh-800.jpg 800w, anh-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Ảnh phong cảnh"
>

Hiển thị inline vs block

Mặc định, <img> là phần tử inline — nghĩa là nó nằm trong dòng chữ. Để hiển thị như block độc lập, dùng CSS:

img {
  display: block;
  max-width: 100%; /* ảnh responsive */
}

Ví dụ thực tế

<h2>Ảnh cơ bản</h2>
<img src="https://picsum.photos/300/200?random=1" alt="Ảnh ngẫu nhiên từ Picsum" width="300" height="200">

<h2>Ảnh trong figure với chú thích</h2>
<figure>
  <img src="https://picsum.photos/300/200?random=2" alt="Phong cảnh thiên nhiên" width="300" height="200" loading="lazy">
  <figcaption>Hình 1: Phong cảnh thiên nhiên (nguồn: picsum.photos)</figcaption>
</figure>

<h2>Ảnh inline trong đoạn văn</h2>
<p>
  Đây là văn bản và đây là ảnh inline:
  <img src="https://picsum.photos/60/40?random=3" alt="Ảnh nhỏ" width="60" height="40">
  — nhận thấy ảnh nằm trên cùng dòng với chữ.
</p>

figure {
  display: inline-block;
  margin: 0;
  text-align: center;
}

figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.25rem;
  font-style: italic;
}

img {
  max-width: 100%;
  height: auto;
}