HTML'da rasmlar va media bilan qanday to'g'ri ishlash kerak?

Savol

srcset/sizes va <picture> yordamida moslashuvchan rasmlarni qanday amalga oshirish mumkin va <video> hamda <audio> teglari qanday asosiy imkoniyatlarni beradi?

Qisqa javob

<img>dagi srcset + sizes brauzerga bir rasmning bir nechta variantidan o'lchamiga mos kelganini o'zi tanlashga imkon beradi. <picture> bundan ham uzoqqa boradi va bir nechta <source> orqali shartlarga qarab manbaning o'zini (format, art direction) o'zgartirishga imkon beradi. <video>/<audio> esa uchinchi tomon kutubxonalarisiz bir nechta manba va matnli treklarga ega o'rnatilgan pleyer beradi.

Batafsil javob

srcset + sizes (bir xil kadr, turli o'lcham):

• srcset fayl variantlarini kenglik deskriptori (480w) yoki piksel zichligi deskriptori (2x) bilan sanab o'tadi.
• sizes brauzerga rasm turli viewport shartlarida ekranda qancha kenglikni egallashini bildiradi — bu srcsetdagi qaysi faylni yuklab olishni brauzer hisoblashi uchun yuklashdan oldin kerak.
• Qaysi faylni yuklashni brauzer haqiqiy ekran va piksel zichligi (DPR) asosida o'zi hal qiladi, bu esa verstkachini rasmlar uchun qo'lda media query yozishdan xalos qiladi.

<picture> (turli manbalar, art direction / formatlar):

• Shartlar (media, type) bilan bir nechta <source>ni va majburiy fallback sifatida <img>ni o'z ichiga oladi.
• Shunchaki turli o'lcham emas, balki turli fayl kerak bo'lganda ishlatiladi: masalan, type orqali JPEG'ga fallback bilan WebP/AVIF, yoki media orqali mobil va desktop uchun boshqa kadr (art direction — mobilda kattaroq planni ko'rsatish).
• Brauzer yuqoridan pastga birinchi mos <source>ni tanlaydi; hech biri mos kelmasa — <img>ni render qiladi.

<video> / <audio>:

• controls, autoplay, muted, loop, poster (faqat video'da) atributlari pleyerni "qutidan chiqishi bilan" boshqaradi.
• Turli formatlar (mp4, webm) bilan bir nechta <source> muayyan kodekni qo'llab-quvvatlamaydigan brauzerlar uchun fallback beradi.
• <track kind="subtitles"> JS'siz subtitr/trek qo'shadi.
• Brauzerlar ovozli avtomatik ijroni siyosat bo'yicha bloklaydi — kafolatlangan autoplay uchun video muted bo'lishi kerak.

Misol

<!-- srcset + sizes: bir xil kadr, turli o'lcham -->
<img
  src="cat-800.jpg"
  srcset="cat-400.jpg 400w, cat-800.jpg 800w, cat-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Derazadagi mushuk"
/>

<!-- picture: turli formatlar + art direction -->
<picture>
  <source srcset="banner.avif" type="image/avif" />
  <source srcset="banner.webp" type="image/webp" />
  <source media="(max-width: 600px)" srcset="banner-mobile.jpg" />
  <img src="banner.jpg" alt="Aksiya banneri" loading="lazy" />
</picture>

<!-- bir nechta format va subtitrlar bilan video -->
<video controls poster="preview.jpg" width="640">
  <source src="movie.webm" type="video/webm" />
  <source src="movie.mp4" type="video/mp4" />
  <track kind="subtitles" src="subs-uz.vtt" srclang="uz" label="O'zbekcha" />
  Brauzeringiz videoni qo'llab-quvvatlamaydi.
</video>

Qo'shimcha savollar

• srcsetdagi w deskriptori x deskriptoridan nimasi bilan farq qiladi?
• loading="lazy" sahifa yuklanish unumdorligiga qanday ta'sir qiladi?
• Nega mutedsiz autoplay ko'pchilik brauzerlarda ishlamaydi?