HTML Academy · Ders

Sanat Yönetimi için picture Öğesi

Görüntü alanı koşullarına göre görsellerin tamamını değiştirmeyi öğrenin.

Sanat Yönetimi için picture Öğesi, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Sanat Yönetimi Sorunu

Sanat yönetimi, ekran boyutuna bağlı olarak temelde farklı bir görsel crop'u veya kompozisyonu sunmak anlamına gelir:

Masaüstünde yatay fotoğrafın tamamı
Mobilde yakınlaştırılmış dikey crop
Bu sorun yalnızca srcset + sizes ile çözülemez

picture Öğesi

<picture> elementi birden fazla <source> elementini ve bir <img> geri dönüşünü kapsar:

<picture>
  <source media="(min-width: 800px)" srcset="wide-crop.jpg">
  <source media="(min-width: 500px)" srcset="medium-crop.jpg">
  <img src="narrow-crop.jpg" alt="Team photo">
</picture>
<!-- Browser picks the first matching source -->
<!-- img is required as fallback and carries the alt attribute -->

picture Nasıl Çalışır

Tarayıcı, <source> elements öğelerini yukarıdan aşağıya sırayla değerlendirir:

İlk source'un media koşulunu denetleyin — eşleşiyorsa o görseli kullanın
İkinci source'u denetleyin — eşleşiyorsa onu kullanın
Varsayılan olarak <img> öğesine geçin

<img> elementi seçilen görseli görüntülemeye devam eder ve alt metnini taşır.

picture ile Biçim Değiştirme

<picture>, görsel biçimlerini tarayıcı desteğine göre de seçebilir:

<picture>
  <!-- AVIF: best compression, newest support -->
  <source type="image/avif" srcset="photo.avif">
  <!-- WebP: great compression, wide support -->
  <source type="image/webp" srcset="photo.webp">
  <!-- JPEG: universal fallback -->
  <img src="photo.jpg" alt="Mountain photo">
</picture>
<!-- Browser picks the first format it supports -->

Sanat Yönetimi ve Biçimi Birleştirme

media koşullarını ve biçim seçimini birleştirebilirsiniz:

<picture>
  <source
    media="(min-width: 800px)"
    type="image/webp"
    srcset="hero-wide.webp"
  >
  <source
    media="(min-width: 800px)"
    srcset="hero-wide.jpg"
  >
  <source type="image/webp" srcset="hero-mobile.webp">
  <img src="hero-mobile.jpg" alt="Hero image" width="1200" height="600">
</picture>

img Gereklidir

<picture> içindeki <img> elementi isteğe bağlı değildir:

Seçilen görseli görüntüler
Erişilebilirlik için alt metnini taşır
width, height, loading ve diğer öznitelikleri taşır
Olmadan hiçbir şey görüntülenmez

source media Özniteliği

media özniteliği standart CSS media sorgularını kabul eder:

<picture>
  <source media="(orientation: landscape)" srcset="landscape.jpg">
  <source media="(orientation: portrait)" srcset="portrait.jpg">
  <img src="portrait.jpg" alt="Scene">
</picture>

<!-- Other media features work too: -->
<!-- (prefers-color-scheme: dark) -->
<!-- (min-resolution: 2dppx) -->
<!-- (max-width: 600px) -->

Duyarlı Seçim için source srcset with

Tam denetim için sanat yönetimini srcset ile birleştirin:

<picture>
  <!-- Desktop: wide hero, multiple resolutions -->
  <source
    media="(min-width: 1024px)"
    srcset="hero-1024.jpg 1024w, hero-2048.jpg 2048w"
    sizes="100vw"
  >
  <!-- Mobile: portrait crop -->
  <img
    srcset="hero-mobile-400.jpg 400w, hero-mobile-800.jpg 800w"
    sizes="100vw"
    src="hero-mobile-400.jpg"
    alt="Conference keynote speaker on stage"
  >
</picture>

Koyu Mod Görselleri

Koyu mod kullanıcılarına farklı görseller sunun:

<picture>
  <source
    media="(prefers-color-scheme: dark)"
    srcset="logo-dark.svg"
  >
  <img src="logo-light.svg" alt="Company logo" width="120" height="40">
</picture>
<!-- Users with dark mode OS setting see logo-dark.svg -->
<!-- Everyone else sees logo-light.svg -->

picture ve CSS background-image

<picture> ile CSS arka planları ne zaman kullanılır:

İçerik görselleri — <picture> kullanın: alt metnine ihtiyaç duyar ve belge içeriğinin parçasıdır
Y dekoratif görseller — media sorgularıyla CSS background-image kullanın
SEO açısından önemli görseller — her zaman <picture> kullanın: tarayıcılar img elements öğelerini dizine ekler

Erişilebilirlik Notu

alt özniteliği her zaman <source> üzerinde değil, <img> üzerinde bulunur:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <!-- alt goes on img, not source: -->
  <img src="photo.jpg" alt="Sunset over the Pacific Ocean">
</picture>
<!-- screen readers read img's alt, whichever source was selected -->

picture ile Tembel Yükleme

<picture> içindeki <img> öğesine tembel yükleme ekleyin:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img
    src="photo.jpg"
    alt="Gallery photo"
    loading="lazy"
    width="800"
    height="600"
  >
</picture>

Hızlı Kontrol

Bir picture bloğunda her zaman bulunması gereken ve alt özniteliğini taşıyan öğe hangisidir?

Özet: picture Öğesi

picture ile sanat yönetimi:

<picture>, <source> elements öğelerini ve bir <img> öğesini kapsar
Tarayıcı, eşleşen ilk <source> öğesini seçer
Görüntü alanı koşulları için media, biçim seçimi için type kullanın
<img> gereklidir — görseli görüntüler ve alt metnini taşır
Tam duyarlı denetim için srcset + sizes ile birleştirin

Sıkça Sorulan Sorular

“Sanat Yönetimi için picture Öğesi” dersi ücretsiz mi?

Evet — “Sanat Yönetimi için picture Öğesi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Sanat Yönetimi için picture Öğesi” dersinde ne öğreneceğim?

Görüntü alanı koşullarına göre görsellerin tamamını değiştirmeyi öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Sanat Yönetimi için picture Öğesi” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← HTML Academy Sayfasına Dön