Mobil Öncelikli Görseller

Coddy'nin HTML Journey'sinin Practical Frontend 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 yükleneceğini (srcset) ve hangi koşul altında (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örüntüleme hedefi size veriliyor.

Göreviniz:

Duyarlı (responsive) görseller ayarlamak için <picture> öğesini kullanın.
768px ve daha geniş ekranlar için daha büyük olan Ay görselini yükleyin: https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg
Daha küçük ekranlar için (varsayılan mobil), daha küçük olan Ay görselini 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.

Kopya kağıdı

Mobil öncelikli duyarlı (responsive) görüntüler için <picture> öğesini kullanın:

<picture> → birden fazla görüntü seçeneği için sarmalayıcı
<source> → görüntüyü (srcset) ve koşulu (media) tanımlar
<img> → alt metni içeren yedek görüntü

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

Yükleme performansını artırmak için mobil cihazlar için daha küçük, optimize edilmiş görüntülerle başlayın, ardından daha büyük ekranlar için geliştirin.

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>