Duyarlı Görseller

HTML içinde duyarlı görseller kavramını, kullanım sınırlarını ve güvenilir uygulama biçimini öğrenin.

Duyarlı Görseller, HTML ile medya ve gömülü içerik çalışırken hata durumlarını denetlenebilir bir akışa dönüştürmek için kullanılan yaklaşımı açıklar. Medya içeriğinde boyut, alternatif açıklama, yükleme stratejisi ve kullanıcı kontrolü birlikte düşünülmelidir.

Üçüncü taraf gömmelerini en az yetkiyle sınırlandırmak; otomatik oynatma ve düzen kaymasını önlemek erişilebilirlik ile performansı korur. Girdinin biçimini ve geçerliliğini sınırda denetlemek, iç katmanların daha sade kalmasını sağlar. Aşağıdaki örnek, konuyu küçük ve izlenebilir bir akış içinde gösterir.

Yaygın hata ve doğru yaklaşım

Kavramı her durumda uygulanacak bir kural gibi kullanmak gereksiz karmaşıklık üretir. Önce problemin sınırını belirleyin, ardından en küçük yeterli yapıyı seçin.

Sonuç

Duyarlı Görseller, doğru sınırlar ve açık bir sözleşmeyle kullanıldığında HTML kodunun güvenilirliğini artırır. Önce doğruluğu kurun; ölçüm göstermeden karmaşık optimizasyona yönelmeyin.

Duyarlı Görseller örneği

<figure>
  <picture>
    <source srcset="/images/book.avif" type="image/avif">
    <img src="/images/book.jpg" alt="Açık duran bir kod kitabı" width="800" height="450">
  </picture>
  <figcaption>Duyarlı Görseller</figcaption>
</figure>