Hình ảnh ưu tiên thiết bị di động

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 9 trên 35.

Hình ảnh ưu tiên thiết bị di động nghĩa là đảm bảo hình ảnh hiển thị tốt trên màn hình nhỏ trước, rồi nâng cấp cho màn hình lớn hơn. Trên thiết bị di động, hình ảnh lớn, nặng có thể làm chậm tốc độ tải, nên chúng ta bắt đầu với các phiên bản nhỏ hơn, đã tối ưu. Khi màn hình lớn hơn, chúng ta có thể thay bằng hình ảnh chất lượng cao hơn

Hãy dùng phần tử HTML picture để hiển thị ảnh với các kích thước khác nhau tùy theo chiều rộng màn hình.

<picture> → phần bao chứa nhiều lựa chọn hình ảnh cho các màn hình khác nhau.

<source> → xác định ảnh cần tải (srcset) và điều kiện tải ảnh (media). Ví dụ: điện thoại (≤600px) → ảnh nhỏ; máy tính bảng (≤1024px) → ảnh cỡ vừa.

<img> → phương án dự phòng nếu không có <source> nào phù hợp, thường là ảnh lớn dành cho máy tính để bàn. Thẻ này cũng chứa văn bản alt.

<picture>
  <source srcset="small-image.jpg" media="(max-width: 600px)">
  <source srcset="medium-image.jpg" media="(max-width: 1024px)">
  <img src="large-image.jpg" alt="Description of image">
</picture>

Thử thách

Dễ

Bạn cần hiển thị hình ảnh Mặt Trăng trông đẹp trên cả màn hình điện thoại và máy tính.

Nhiệm vụ của bạn:

Dùng phần tử <picture> để thiết lập hình ảnh thích ứng.
Với màn hình rộng từ 768px trở lên, tải hình ảnh Mặt Trăng lớn hơn: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Với màn hình nhỏ hơn (mặc định là điện thoại), tải hình ảnh Mặt Trăng nhỏ hơn:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Đảm bảo có alt="Moon in the night sky" để hỗ trợ khả năng truy cập.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Images</title>
  <style>
        body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 1rem;
      line-height: 1.6;
      background: #0a0a23;
      color: #f5f5f5;
    }

    header {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    h1 {
      font-size: 1.5rem;
      color: #ffd369;
    }

    .content {
      max-width: 800px;
      margin: 0 auto;
    }

    img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 1rem 0;
    }

    p {
      font-size: 1rem;
    }

    @media (min-width: 768px) {
      h1 {
        font-size: 2.25rem;
      }

      p {
        font-size: 1.125rem;
      }
    }
  </style>
</head>
<body>
    <header>
    <h1>The Moon</h1>
  </header>

  <main class="content">
    <p>
      The Moon is Earth's only natural satellite and has fascinated humans for thousands of years. 
      It influences tides, inspires myths, and continues to be a target for exploration.
    </p>

  

    <p>
      Mobile-first images ensure the page loads fast on smaller devices while still looking 
      beautiful on bigger screens.
    </p>
  </main>
</body>
</html>