Duyarlı Görseller ve Picture Öğesi
srcset, sizes ve HTML picture öğesiyle uygun boyutlardaki görselleri sunun.
Duyarlı Görseller ve Picture Öğesi, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 4. 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, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Duyarlı Görsel Zorlukları
Tam çözünürlüklü bir masaüstü görselinin mobil cihaza indirilmesi bant genişliğini israf eder ve yükleme süresini uzatır. Duyarlı görseller, cihaz için doğru görseli doğru boyutta sunar.
max-width: 100% Temel Kuralı
Duyarlı görseller için temel kural: en-boy oranını korurken görsellerin kapsayıcılarından taşmasını önleyin.
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='700'><rect width='1200' height='700' fill='%234f8cff'/><circle cx='600' cy='350' r='260' fill='%23ffb84d'/></svg>" alt="wide landscape" />Farklı Çözünürlükler için srcset
srcset özniteliği birden fazla görsel kaynağı sağlar. Tarayıcı, cihaz piksel oranına (DPR) göre en uygun olanı seçer:
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg>"
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%234f8cff'/><circle cx='400' cy='250' r='180' fill='%237ee787'/></svg> 1x, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%234f8cff'/><circle cx='800' cy='500' r='360' fill='%237ee787'/></svg> 2x"
alt="A beautiful landscape"
style="max-width:100%;height:auto;display:block;"
>Genişlik Tanımlayıcılarıyla srcset
Her görsel dosyasının gerçek piksel genişliğini tarayıcıya bildirmek için w tanımlayıcılarını kullanın:
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w,
data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w,
data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000'><rect width='1600' height='1000' fill='%23ffb84d'/></svg> 1600w"
alt="Hero image"
style="max-width:100%;height:auto;display:block;"
>sizes Özniteliği
sizes özniteliği, görselin farklı görünüm alanı boyutlarında ne kadar geniş görüntüleneceğini tarayıcıya bildirir ve tarayıcının srcset içinden doğru kaynağı seçmesine yardımcı olur.
<img
srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='250'><rect width='400' height='250' fill='%23ffb84d'/></svg> 400w, data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg> 800w"
sizes="(max-width: 600px) 100vw, 50vw"
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='500'><rect width='800' height='500' fill='%23ffb84d'/></svg>"
alt="Product photo"
style="max-width:100%;height:auto;display:block;"
>picture Öğesi
<picture> öğesi, medya koşullarına sahip <source> öğelerini kullanarak hangi görsel dosyasının sunulacağı üzerinde tam denetim sağlar. Tarayıcı, eşleşen ilk kaynağı kullanır.
<picture>
<source media="(min-width: 1024px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='400'><rect width='1200' height='400' fill='%234f8cff'/><text x='30' y='220' font-size='40' fill='white'>hero-large</text></svg>">
<source media="(min-width: 600px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='400'><rect width='800' height='400' fill='%237ee787'/><text x='30' y='220' font-size='36' fill='white'>hero-medium</text></svg>">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ffb84d'/><text x='20' y='260' font-size='30' fill='white'>hero-small</text></svg>" alt="Hero image" style="max-width:100%;height:auto;display:block;">
</picture>picture ile Sanat Yönetimi
Sanat yönetimi, aynı görselin yalnızca daha küçük bir sürümünü sunmak yerine farklı ekran boyutları için farklı bir kırpma veya kompozisyon sunar.
<picture>
<!-- Wide crop for desktop -->
<source media="(min-width: 768px)" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><rect width='1200' height='300' fill='%23b57bff'/><text x='30' y='170' font-size='34' fill='white'>banner-wide (desktop crop)</text></svg>">
<!-- Square crop for mobile (this preview is narrow, so this is what renders) -->
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23b57bff'/><text x='20' y='260' font-size='26' fill='white'>banner-square (mobile crop)</text></svg>" alt="Banner" style="max-width:100%;height:auto;display:block;">
</picture>Modern Görsel Biçimleri: WebP ve AVIF
<picture> öğesi biçim seçimini mümkün kılar. Modern biçimleri bir geri dönüş seçeneğiyle sunun:
<picture>
<source type="image/avif" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
<source type="image/webp" srcset="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400'><rect width='600' height='400' fill='%233fd0c9'/><text x='20' y='210' font-size='28' fill='white'>photo</text></svg>" alt="Photo" style="max-width:100%;height:auto;display:block;">
</picture>Performans için loading="lazy"
loading="lazy" özniteliği, ekran dışındaki görsellerin yüklenmesini kullanıcı onlara yaklaşana kadar erteler:
<img
src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><rect width='500' height='500' fill='%23ff6b6b'/><text x='20' y='260' font-size='26' fill='white'>product</text></svg>"
loading="lazy"
decoding="async"
alt="Product"
style="max-width:100%;height:auto;display:block;"
>width ve height Öznitelikleri
Görsellere her zaman width ve height özniteliklerini ekleyin. Bunlar, görsel yüklenmeden önce tarayıcının düzen alanı ayırmasını sağlayarak düzen kaymasını (CLS) önler.
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect width='800' height='600' fill='%234f8cff'/><circle cx='400' cy='300' r='200' fill='%23ffd700'/></svg>" width="800" height="600" loading="lazy" alt="Photo" style="max-width:100%;height:auto;">Kapsayıcılardaki Görseller için object-fit
Bir görsel sabit boyutlu bir kapsayıcıda olduğunda, alanı nasıl dolduracağını denetlemek için object-fit kullanın:
<img class="thumbnail" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='300'><rect width='800' height='300' fill='%23b57bff'/><text x='20' y='170' font-size='30' fill='white'>wide source photo</text></svg>" alt="thumbnail" />Hızlı Kontrol
Görselin farklı görünüm alanı boyutlarındaki görüntüleme genişliğini tarayıcıya bildirmek için srcset ile birlikte hangi HTML özniteliği kullanılır?
Özet
Duyarlı görseller, uygun boyuttaki görselleri sunmak için srcset ve sizes kullanır. <picture> öğesi sanat yönetimini ve biçim seçimini mümkün kılar. Kapsayıcı içindeki görseller için her zaman loading="lazy", width/height özniteliklerini ve object-fit kullanın.
Sıkça Sorulan Sorular
“Duyarlı Görseller ve Picture Öğesi” dersi ücretsiz mi?
Evet — “Duyarlı Görseller ve 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 CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Duyarlı Görseller ve Picture Öğesi” dersinde ne öğreneceğim?
srcset, sizes ve HTML picture öğesiyle uygun boyutlardaki görselleri sunun. CSS 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.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS 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 4. dersidir.
“Duyarlı Görseller ve 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 CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS 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
- Mobil Öncelikli ve Masaüstü Öncelikli Yaklaşım
- Yüzdelerle Akışkan Genişlikler
- Min-Width ve Max-Width Kalıpları
- Duyarlı Görseller ve Picture Öğesi