Mobil Öncelikli Görseller

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

Önce Mobil İçin Görseller, görsellerin önce küçük ekranlarda iyi çalışmasını sağlamak, ardından daha büyük ekranlar için iyileştirmek anlamına gelir. Mobil cihazlarda büyük ve ağır görseller yüklemeyi yavaşlatabilir, bu yüzden daha küçük, optimize edilmiş sürümlerle başlarız. Ekranlar büyüdükçe daha yüksek kaliteli görseller kullanabiliriz

Ekran genişliğine göre farklı görsel boyutları sunmak için HTML picture öğesini kullanalım.

<picture> → farklı ekranlar için birden fazla görsel seçeneği barındıran kapsayıcı.

<source> → hangi görselin yükleneceğini (srcset) ve hangi koşulda yükleneceğini (media) belirtir. Örnek: telefon (≤600px) → küçük görsel; tablet (≤1024px) → orta boy görsel.

<img> → hiçbir <source> eşleşmezse yedek olarak kullanılır; 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="Görselin açıklaması">
</picture>

Görev

Kolay

Sana hem mobil hem de masaüstü ekranlarda iyi görünen bir Ay görseli gösterme hedefi veriliyor.

Görevin:

Duyarlı görselleri ayarlamak için <picture> öğesini kullan.
768px ve daha geniş ekranlarda daha büyük Ay görselini yükle: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Daha küçük ekranlarda (varsayılan olarak mobil) daha küçük Ay görselini yükle:
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ğinden emin ol.

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>