HTML picture va source: AVIF va WebP'ni zaxira bilan berish, art direction

Qisqacha: picture bitta rasmning bir nechta variantini beradi. Ichidagi source teglari tartib bilan tekshiriladi: brauzer qo'llaydigan birinchi format (type) yoki mos kelgan birinchi ekran sharti (media) tanlanadi. Oxirida albatta oddiy img turadi — u zaxira variant va alt, width, height ning joyi. Shu tarzda zamonaviy AVIF va WebP'ni eski brauzerlarga zarar yetkazmasdan ishlatasiz.

Bu darsda

• picture, source va img qanday birga ishlashini tushunasiz.
• AVIF → WebP → JPEG zanjirini to'g'ri tartibda yozasiz.
• source da srcset va sizes ni ishlatasiz.
• Telefon uchun boshqa kadrni media bilan ko'rsatasiz (art direction).
• DevTools'da formatlarni o'chirib, zaxira ishlashini tekshirasiz.

Oldin bilishingiz kerak: Responsive rasmlar I: srcset va sizes, Rasm formatlari.

1. Nega bu kerak?

O'tgan darsda brauzerga bitta rasmning bir nechta o'lchamini berdik. Endi ikki yangi masala.

Birinchisi — format. Rasm formatlari darsida ko'rgan AVIF va WebP bir xil sifatda JPEG'dan ko'pincha sezilarli kichikroq. Lekin eski brauzerlar — masalan, yangilanmagan eski iPhone'lar — AVIF'ni ochmaydi. img src="osh.avif" ularda buzilgan rasm bo'lib chiqadi.

Ikkinchisi — kadr. Keng banner kompyuterda chiroyli: chapda qozon, o'ngda oshpaz, o'rtada choyxona nomi. Telefonda esa u kichrayib, hamma narsa mayda bo'lib qoladi. Telefon uchun boshqacha kesilgan rasm kerak — faqat qozon, yaqindan.

Ikkala masalani picture hal qiladi.

2. picture tuzilishi

<picture>
  <source srcset="osh.avif" type="image/avif">
  <source srcset="osh.webp" type="image/webp">
  <img src="osh.jpg" alt="Toshkent oshi, ustida bedana tuxumi"
       width="1200" height="800">
</picture>

Uch qism:

• picture — konteyner. U o'zi hech narsa ko'rsatmaydi.
• source — variantlar. Ularda fayl srcset da yoziladi (src emas!).
• img — majburiy, doim oxirida. Ekranda aynan shu img ko'rinadi — faqat brauzer uning manbasini tanlangan source dan oladi.

alt, width va height faqat img da yoziladi. source larda ular bo'lmaydi — alt ham. CSS bilan ham picture ni emas, uning ichidagi img ni bezaysiz.

2.1 Brauzer qanday tanlaydi

Brauzer source larni yuqoridan pastga o'qiydi:

1. Birinchi source: "Men image/avif ni bilamanmi?" Ha bo'lsa — shu fayl, qidiruv tugaydi.
2. Yo'q bo'lsa — keyingi source: "image/webp ni bilamanmi?"
3. Hech biri mos kelmasa — img ning src idagi fayl.

Juda eski brauzer picture va source ni umuman tanimaydi. U shunchaki img ni ko'radi va JPEG'ni ko'rsatadi. Hech kim buzilgan rasm ko'rmaydi.

Tekshirib ko'ring: Nega AVIF birinchi, JPEG oxirida turadi? Tartibni teskari qilsak nima bo'ladi?

3. Format zanjiri: AVIF → WebP → JPEG

3.1 type atributi

type — faylning MIME turi. HTTP sarlavhalari darsida ko'rgan MIME turlari aynan shu: image/avif, image/webp, image/jpeg, image/png.

Brauzer type ga qarab faylni yuklamasdan turib hal qiladi: "bu formatni bilaman" yoki "bilmayman". Shuning uchun type ni doim yozing — aks holda brauzer faylni yuklab ko'rishi kerak bo'ladi.

3.2 Bugungi holat

Barcha asosiy zamonaviy brauzerlar WebP'ni ham, AVIF'ni ham qo'llaydi (AVIF'ni oxirgilardan bo'lib 2024-yilda Edge qo'shdi). Unda zanjir nega kerak?

• Foydalanuvchilarning bir qismi yangilanmagan telefon va brauzerlardan foydalanadi.
• Zanjirning narxi — bir necha qator HTML. Foydasi — hech kim buzilgan rasm ko'rmaydi.

3.3 srcset va sizes bilan birga

Formatlar va o'lchamlarni birlashtirish mumkin: har bir source o'z srcset va sizes ini oladi:

<picture>
  <source type="image/avif"
          srcset="osh-480.avif 480w, osh-800.avif 800w,
                  osh-1200.avif 1200w"
          sizes="(max-width: 600px) 100vw, 600px">
  <source type="image/webp"
          srcset="osh-480.webp 480w, osh-800.webp 800w,
                  osh-1200.webp 1200w"
          sizes="(max-width: 600px) 100vw, 600px">
  <img src="osh-800.jpg"
       srcset="osh-480.jpg 480w, osh-800.jpg 800w, osh-1200.jpg 1200w"
       sizes="(max-width: 600px) 100vw, 600px"
       alt="Toshkent oshi, ustida bedana tuxumi"
       width="1200" height="800">
</picture>

Kod uzun, lekin mantiq oddiy: brauzer avval formatni type bo'yicha tanlaydi, keyin shu source ichidan o'lchamni srcset va sizes bo'yicha. Bitta rasm uchun to'qqizta fayl — bu ishni odatda dasturlar avtomatik bajaradi (keyingi darsda).

Bo'sh joyni to'ldiring: WebP formatining MIME turi image/ bilan boshlanadi. Undan keyin nima yoziladi?

4. Art direction: telefon uchun boshqa kadr

4.1 media atributi

Endi banner muammosiga qaytamiz. Kompyuter uchun keng banner, telefon uchun esa kvadrat, qozon yaqindan:

<picture>
  <source media="(max-width: 600px)"
          srcset="banner-kvadrat.jpg" width="600" height="600">
  <img src="banner-keng.jpg"
       alt="Choyxona «Bahor»: qozonda osh damlanmoqda"
       width="1600" height="500">
</picture>

media — ekran sharti, o'tgan darsdagi sizes dagi shartlar kabi. (max-width: 600px) — "ekran 600 pikselgacha bo'lsa". Shart bajarilsa — kvadrat rasm, aks holda — img dagi keng banner.

Bu usul art direction ("badiiy rahbarlik") deyiladi: siz dizayner sifatida har bir ekran uchun qaysi kadr ko'rsatilishini o'zingiz hal qilasiz.

4.2 source dagi width va height

Kvadrat va keng rasmning nisbati har xil: 1:1 va 16:5. img asoslari darsidagi width/height qoidasi bu yerda ham ishlaydi: brauzer sahifa sakramasligi uchun nisbatni oldindan bilishi kerak. Shuning uchun source ga ham o'z o'lchamini yozamiz. Zamonaviy brauzerlar buni qo'llaydi.

4.3 srcset / sizes va media farqi

Qoida: faqat o'lcham kerak bo'lsa — picture shart emas, img dagi srcset yetarli. picture ni format zanjiri yoki art direction uchun ishlating.

Tekshirib ko'ring: Mahsulot surati telefon va kompyuterda bir xil, faqat o'lchami farq qiladi. picture va media kerakmi?

5. DevTools'da tekshirish

Brauzeringiz AVIF'ni biladi — demak, WebP va JPEG zaxiralari ishlashini oddiy tarzda ko'ra olmaysiz. Chrome DevTools buni sinash imkonini beradi:

1. F12 → Ctrl + Shift + P (DevTools buyruqlar oynasi) → Show Rendering ni tanlang.
2. Ochilgan Rendering panelini pastga aylantiring: Disable AVIF image format va Disable WebP image format belgilari bor.
3. AVIF'ni o'chiring va sahifani yangilang. Network panelida endi .webp fayl yuklanganini ko'rasiz.
4. WebP'ni ham o'chiring — .jpg yuklanadi.

Art direction'ni esa Device mode'da ekran kengligini 600 dan kichik va katta qilib tekshirasiz: rasm kadri almashishi kerak.

6. Ko'p uchraydigan xatolar

6.1 img yo'q

<picture>
  <source srcset="osh.avif" type="image/avif">
</picture>

Error: Element “picture” is missing a required instance of child element “img”.

Tarjimasi: "picture elementida majburiy img bolasi yo'q." img siz hech narsa ko'rsatilmaydi. Tuzatish: oxiriga img qo'shing — alt, width va height bilan.

6.2 source da src

<source src="osh.avif" type="image/avif">

Error: Element “source” is missing required attribute “srcset”.

Tarjimasi: "source elementida majburiy srcset atributi yo'q." picture ichidagi source faqat srcset bilan ishlaydi. (Video va audio ichidagi source esa src ishlatadi — shuning uchun chalkashlik ko'p. Ularni video va audio darsida ko'ramiz.)

6.3 img birinchi, source keyin

<picture>
  <img src="osh.jpg" alt="Osh" width="1200" height="800">
  <source srcset="osh.webp" type="image/webp">
</picture>

html-validate:

Element <source> must be used before <img> in this context

Tarjimasi: "Bu kontekstda source img dan oldin ishlatilishi kerak." Brauzer img ga yetganda qidiruvni to'xtatadi — keyingi source hech qachon o'qilmaydi. Tuzatish: img — doim oxirida.

6.4 source ga alt yozish

<source srcset="osh.avif" alt="Osh"> — Nu Checker: "Attribute “alt” not allowed on element “source”". source faqat fayl variantini beradi, matn esa img da. Tuzatish: alt ni img ga ko'chiring.

7. Mashqlar

1-mashq (oson): Tartibni tiklang

Bu qatorlarni to'g'ri tartibda yozing: img (JPEG), source (WebP), source (AVIF).

<picture>
  <source srcset="manti.avif" type="image/avif">
  <source srcset="manti.webp" type="image/webp">
  <img src="manti.jpg" alt="Bug'da pishgan qovoqli manti"
       width="1200" height="800">
</picture>

2-mashq (o'rta): To'rtta xato

<picture>
  <img src="lagmon.jpg" alt="Lag'mon" width="1200" height="800">
  <source src="lagmon.webp" type="image/webp" alt="Lag'mon">
  <source srcset="lagmon.avif">
</picture>

<picture>
  <source srcset="lagmon.avif" type="image/avif">
  <source srcset="lagmon.webp" type="image/webp">
  <img src="lagmon.jpg" alt="Qo'lda cho'zilgan lag'mon"
       width="1200" height="800">
</picture>

3-mashq (qiyin): Bosh sahifa banneri

1. Bitta rasmdan ikki kadr tayyorlang: keng (1600×500) va kvadrat (600×600). Har birini JPEG va WebP formatida saqlang (Squoosh bilan).
2. index.html da banner yozing: 600 pikselgacha ekranda kvadrat, kattaroqda keng. Har ikki holatda avval WebP, keyin JPEG.
3. DevTools Rendering panelida WebP'ni o'chirib, zaxira ishlashini tekshiring.

Maslahat: bir nechta source da ham media, ham type bo'lishi mumkin. Brauzer ikkala shart bajarilgan birinchi source ni oladi.

<picture>
  <source media="(max-width: 600px)" type="image/webp"
          srcset="assets/images/banner-kvadrat.webp"
          width="600" height="600">
  <source media="(max-width: 600px)"
          srcset="assets/images/banner-kvadrat.jpg"
          width="600" height="600">
  <source type="image/webp" srcset="assets/images/banner-keng.webp">
  <img src="assets/images/banner-keng.jpg"
       alt="Choyxona «Bahor»: qozonda osh damlanmoqda"
       width="1600" height="500">
</picture>

8. Real ishda

• Katta saytlarda formatlar avtomatik. Rasm CDN'lari foydalanuvchi brauzerini aniqlab, eng mos formatni o'zi beradi — unda picture kerak bo'lmasligi mumkin. Buni keyingi darsda ko'ramiz. Lekin o'z serveringizda yoki GitHub Pages'da picture — eng ishonchli yo'l.
• Marketing bannerlari — art direction'ning asosiy qo'llanilish joyi. Dizaynerlar telefon va kompyuter uchun alohida kadr chizadi, dasturchi ularni picture bilan ulaydi.
• Lighthouse eski formatdagi og'ir rasmlarni ko'rsatib, zamonaviy formatlarni tavsiya qiladi.
• Freymvorklar (Next.js, Astro — kursda o'rganamiz) picture ni rasm komponentlari ichida avtomatik yasaydi. U qanday ishlashini bilsangiz, muammo chiqqanda sababini tez topasiz.

Xulosa

• picture = bir nechta source + oxirida majburiy img; ekranda aynan img ko'rinadi.
• alt, width, height — img da; source da fayl srcset da yoziladi (src emas).
• Brauzer mos kelgan birinchi source ni oladi: tartib AVIF → WebP → JPEG (img).
• type — MIME turi (image/avif, image/webp); har bir source o'z srcset va sizes iga ega bo'lishi mumkin.
• media — art direction: ekranga qarab boshqa kadr; source ga o'z width/height.
• Faqat o'lcham farq qilsa — picture emas, img srcset yetarli.

Keyingi dars: Rasm unumdorligi — loading="lazy", fetchpriority va boshqa usullar bilan sahifani tezroq ochish.

Manbalar

• MDN: <picture>, <source>, "Responsive images — Art direction" — developer.mozilla.org
• web.dev: "Serve images in modern formats" — web.dev
• caniuse.com: AVIF va WebP qo'llab-quvvatlashi