Type özniteliği

AVIF/WebP gibi modern biçimleri progresif olarak sunarsın.

Type ile biçim seçimi

<source>'un bir diğer özniteliği type, görselin biçimini (MIME türü) bildirir. Tarayıcı, desteklemediği biçimleri atlar; ilk desteklediğini seçer.

Örneğin AVIF daha küçük dosya boyutuyla benzer kaliteyi sunar; WebP neredeyse her yerde çalışır; PNG/JPEG ise en eski yedektir. type="image/avif" yazmak, tarayıcının AVIF'i denemesini ve desteklemiyorsa atlamasını sağlar. Buna progresif iyileştirme denir.

Progresif iyileştirme sırası

<picture> ile biçim sunarken sıra şöyledir: en modern biçim en üstte, en eski biçim en altta (yani <img>'de). Tarayıcı yukarıdan aşağı dener ve ilk desteklediğini alır.

Önemli nokta: <img>'nin src özniteliği her zaman eski biçim (PNG veya JPEG) olmalı. Çünkü <img>, source'ların hiçbiri çalışmazsa gösterilen son yedektir; eski tarayıcıların da açması gerekir. AVIF'i en sona koymak, desteklemeyen tarayıcıda boş bir görsel gösterir.

Uygulama AVIF, WebP ve PNG ile picture yaz

Body içine bir <picture> ekle. İçine iki <source> koy: birincinin type özniteliği image/avif, srcset özniteliği mavi-deniz.avif; ikincinin type özniteliği image/webp, srcset özniteliği mavi-deniz.webp olsun. Sonra bir <img> ekle; src özniteliği mavi-deniz.png, alt özniteliği Mavi deniz olsun.

Örnek çözümü göster

<body>
  <picture>
    <source type="image/avif" srcset="mavi-deniz.avif">
    <source type="image/webp" srcset="mavi-deniz.webp">
    <img src="mavi-deniz.png" alt="Mavi deniz">
  </picture>
</body>

Kendini test et

<picture> ile AVIF ve WebP sunarken hangisi DOĞRU bir sıradır?
- Önce img AVIF, sonra source WebP
- Yalnızca img src="resim.avif" yazmak yeterlidir
- Source önce PNG, sonra AVIF, en son img PNG
- Source önce AVIF, sonra WebP, en son img PNG yedek
Cevabı göster

Source önce AVIF, sonra WebP, en son img PNG yedek — Doğru. En modern biçim (AVIF) üstte, en eski (PNG) img'de altta olur.

Source'a type özniteliği yaz

<picture>
  <source ____="image/avif" srcset="kahve.avif">
  <source type="image/webp" srcset="kahve.webp">
  <img src="kahve.png" alt="Kahve fincanı">
</picture>

Cevabı göster

<picture>
  <source type="image/avif" srcset="kahve.avif">
  <source type="image/webp" srcset="kahve.webp">
  <img src="kahve.png" alt="Kahve fincanı">
</picture>

MIME türünü biçimiyle eşleştir

image/avif

AVIF biçimi
image/webp

WebP biçimi
image/png

PNG biçimi
image/jpeg

JPEG biçimi

Sıradaki ders: Aspect-ratio

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler