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