HTML picture Öğesi

Birçok sayfada tek bir img yeter. Farklı ekranlar veya formatlar için farklı dosyalar gerektiğinde — masaüstünde geniş bir kırpım, telefonlarda daha sıkı bir kırpım veya JPEG yedekli modern bir format — picture öğesi adaylar sunar. Tarayıcı uygun olanı seçer; yedek img eski istemcileri ve erişilebilirliği güvence altına alır.

picture ne ekler

picture bir kapsayıcıdır. İçine sıfır veya daha fazla source öğesi ve tam bir yedek img koyarsınız. Her source, ne zaman geçerli olduğunu (media) veya hangi formatta olduğunu (type) ve dosyanın nerede olduğunu (srcset) bildirebilir. img isteğe bağlı süs değildir: zorunlu yedektir ve alt için yerdir.

Doğrudan yanıt

Bir veya daha fazla <source> öğesini ve bir yedek <img> öğesini <picture> içine alın. Viewport koşulları için media, WebP gibi formatlar için type kullanın. img yine src ve alt ister. Yeni başlayanlar her modern formatı toplamadan önce aynı fotoğrafın iki genişliğiyle başlayabilir.

media ile art direction

Art direction, farklı viewport’lar için farklı kırpımlar veya düzenler demektir — yalnızca «aynı fotoğraf daha küçük» değildir. source üzerindeki media, geniş ve dar düzenleri farklı dosyalara yönlendirmenizi sağlar.

media örneğini okumak

• Kaynaklar yaygın öğretim kalıplarında daha özgül koşullardan daha genel koşullara doğru listelenir; tarayıcı yine de değerlendirir ve bir eşleşme seçer
• source üzerindeki srcset aday dosya URL’sine işaret eder
• Son img, hiçbir source eşleşmediğinde veya picture desteği eksik olduğunda src ve alt sağlar
• Pratikte pencereyi yeniden boyutlandırarak hangi dosyanın uygun olduğunu görün — isteğe bağlı olarak DevTools Network ile isteği doğrulayın

type ile format seçimi

Bazen aynı kompozisyon, destekleyen tarayıcılar için WebP ve diğerleri için JPEG olarak sunulur. type, MIME türünü söyler; böylece tarayıcı desteklenmeyen formatları önce indirmeden atlayabilir.

İlk gün kapsamını küçük tutun

İlk denemede her format ve her kırılma noktası gerekmez. İki mantıklı adayla bir picture çalıştırın, altı img üzerinde dürüst tutun, sonra genişletin. Duyarlı srcset yoğunluk tanımlayıcıları ve gelişmiş sizes öznitelikleri büyüdükçe gelir.

alt img üzerinde kalır

Erişilebilirlik metnini yalnızca source üzerine koymayın. Ekran okuyucular ve yedek render imge güvenir. Görseller oturumundaki dekor kuralları hâlâ geçerlidir: bilgilendirici görseller gerçek alt ister; saf dekorasyon alt="" kullanabilir.

picture ile tek img

Tek dosya yettiğinde düz img kullanın. Gerçekten koşullar için farklı dosyalar gerektiğinde — viewport art direction veya format değişimi — picturee başvurun. Gerçek ihtiyaç olmadan fazla işaretleme bakımı zorlaştırır.

Sıra ve yedek alışkanlıkları

source öğelerini imgden önce listeleyin. Her zaman img ekleyin. Yedeği unutursanız bazı tarayıcılar ve birçok öğretim doğrulayıcısı kalıbı eksik sayar. Dar ve geniş pencerede, ayrıca süslü formatınızı tercih etmeyebilecek bir tarayıcıda test edin.

Editörünüzde alıştırma

1. Aynı fotoğrafın iki genişliğini hazırlayın (veya iki net alıştırma dosyası).
2. İki source media sorgusu ve bir yedek img ile bir picture kurun.
3. Tarayıcı penceresini yeniden boyutlandırın ve hangi dosyanın uygun olduğunu gözlemleyin.
4. altın yalnızca bir yorumda değil, img üzerinde kaldığını doğrulayın.
5. İsteğe bağlı olarak JPEG imgnin üstüne type="image/webp" ile bir WebP source ekleyin ve kalıbın her yerde görsel gösterdiğini doğrulayın.

Kolay hatalar

• Yedek imgyi unutmak
• altı img yerine yalnızca source üzerine koymak
• Temel media kalıbı çalışmadan birçok formatla karmaşıklaştırmak
• Tek optimize img yeterliyken picture kullanmak
• Viewport bir kırılma noktasını geçince kullanıcıları şaşırtan uyumsuz kırpımlar
• source üzerindeki srcseti bir bağlantının hrefiyle karıştırmak

Özet

• picture birden fazla görsel adayı sunar; tarayıcı birini seçer
• source artı zorunlu yedek img kullanın
• media viewport seçimini; type format seçimini yönlendirir
• alt img üzerinde kalır
• Basit başlayın: iki genişlik veya bir modern format artı JPEG yedek