Mobil Öncelikli Görseller

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 9 / 35.

Mobil Öncelikli Görseller, resimlerin önce küçük ekranlarda iyi çalışmasını sağlamak, ardından daha büyük ekranlar için onları geliştirmek anlamına gelir. Mobilde, büyük ve ağır görseller yüklemeyi yavaşlatabilir, bu nedenle daha küçük, optimize edilmiş sürümlerle başlarız. Ekranlar büyüdükçe, daha yüksek kaliteli görsellerle değiştirebiliriz.

Ekran genişliğine bağlı olarak farklı görüntü boyutları sunmak için HTML picture öğesini kullanalım.

<picture> → farklı ekranlar için birden fazla görüntü seçeneği barındıran sarmalayıcı.

<source> → hangi görüntünün (srcset) ve hangi koşulda (media) yükleneceğini tanımlar. Örnek: telefon (≤600px) → küçük görüntü; tablet (≤1024px) → orta boy görüntü.

<img> → hiçbir <source> eşleşmezse geri dönüş seçeneğidir, genellikle büyük masaüstü görselidir. Ayrıca alt metnini içerir.

<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="Resim açıklaması">
</picture>

Görev

Kolay

Hem mobil hem de masaüstü ekranlarda iyi görünen bir Ay görüntüsü gösterme hedefiniz var.

Göreviniz:

Duyarlı görüntüler oluşturmak için <picture> öğesini kullanın.
768px ve daha geniş ekranlar için daha büyük Ay görüntüsünü yükleyin: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Daha küçük ekranlar (varsayılan olarak mobil) için daha küçük Ay görüntüsünü yükleyin:
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/330px-FullMoon2010.jpg
Erişilebilirlik için alt="Moon in the night sky" eklediğinizden emin olun.

Kendin dene

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