Gambar mobile-first

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 9 dari 35.

Gambar yang Mengutamakan Perangkat Seluler berarti memastikan gambar berfungsi dengan baik di layar kecil terlebih dahulu, lalu meningkatkannya untuk layar yang lebih besar. Di perangkat seluler, gambar besar dan berat dapat memperlambat pemuatan, jadi kita mulai dengan versi yang lebih kecil dan dioptimalkan. Saat layar semakin besar, kita dapat menggantinya dengan gambar berkualitas lebih tinggi

Mari gunakan elemen HTML picture untuk menampilkan gambar dengan ukuran berbeda berdasarkan lebar layar.

<picture> → pembungkus yang menampung beberapa opsi gambar untuk layar yang berbeda.

<source> → menentukan gambar yang akan dimuat (srcset) dan kondisi yang berlaku (media). Contoh: ponsel (≤600px) → gambar kecil; tablet (≤1024px) → gambar sedang.

<img> → fallback jika tidak ada <source> yang cocok, biasanya gambar desktop berukuran besar. Juga berisi teks 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>

Tantangan

Mudah

Kamu diminta menampilkan gambar Bulan yang terlihat bagus di layar ponsel maupun desktop.

Tugasmu:

Gunakan elemen <picture> untuk menyiapkan gambar responsif.
Untuk layar berukuran 768px atau lebih lebar, muat gambar Bulan yang lebih besar: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Untuk layar yang lebih kecil (default untuk ponsel), muat gambar Bulan yang lebih kecil:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Pastikan untuk menyertakan alt="Moon in the night sky" demi aksesibilitas.

Coba sendiri

<!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>