Responsive rasmlar: srcset va sizes bilan har bir ekranga mos rasm

Qisqacha: Bitta rasm hamma ekranga mos kelmaydi: telefon uchun katta rasm — isrof qilingan internet, katta ekran uchun kichik rasm — xira. Shuning uchun srcset atributida brauzerga bir nechta o'lchamni taklif qilasiz. Qo'shimcha sizes atributida esa rasm sahifada qancha joy egallashini aytasiz. Brauzer ekran kengligi va zichligiga qarab eng mosini o'zi tanlaydi.

Bu darsda

• Nega bitta rasm hamma ekranga mos kelmasligini tushuntirasiz.
• CSS piksel va qurilma pikseli (DPR) farqini bilasiz.
• Qat'iy o'lchamli rasmlar uchun 1x, 2x deskriptorlarini yozasiz.
• Moslashuvchan rasmlar uchun w deskriptorlari va sizes ni yozasiz.
• DevTools'da brauzer qaysi faylni tanlaganini tekshirasiz.

Oldin bilishingiz kerak: Rasm qo'yish: img asoslari, Rasm, ovoz va video raqamli ko'rinishda.

1. Nega bu kerak?

Choyxona menyusidagi osh surati — 1600 piksel kenglikda, 400 KB. Katta monitorda u chiroyli. Endi Jasur telefonda, avtobusda, sekin mobil internet bilan menyuni ochdi. Uning ekrani atigi 390 piksel. Lekin telefon baribir 400 KB ni yuklaydi — kerakli hajmdan bir necha barobar ko'p.

Teskari holat ham bor: 600 pikselli kichik rasmni katta retina ekranda ko'rsatsangiz, u xira va "pikselli" ko'rinadi.

Yechim — bir nechta o'lchamdagi nusxa tayyorlash va brauzerga tanlash imkonini berish. Bunday rasmlar responsive (moslashuvchan) rasmlar deyiladi.

2. CSS piksel va qurilma pikseli

Avval bitta muhim tushuncha. Telefon ekrani "390 piksel kenglikda" deyilganda, bu CSS piksel — sahifa o'lchovlari uchun shartli birlik. Ekranning o'zida esa haqiqiy nuqtalar — qurilma piksellari — ancha ko'p.

Ularning nisbati DPR (device pixel ratio — qurilma piksellari nisbati) deyiladi:

Rasm raqamli ko'rinishda darsida piksellar haqida gaplashgan edik. DPR 3 bo'lgan ekranda har bir CSS piksel ichida 3×3 = 9 ta haqiqiy nuqta bor. Tiniq ko'rinishi uchun rasm ham shuncha batafsil bo'lishi kerak.

O'z qurilmangiz DPR'ini bilish uchun DevTools Console'da yozing (DevTools I darsida Console bilan ishlagansiz):

window.devicePixelRatio

Oddiy monitorda 1, retina ekranda 2, ko'p telefonlarda 2 yoki 3 chiqadi.

3. 1x, 2x — qat'iy o'lchamli rasm

Logotip sahifada doim bir xil o'lchamda — 160 ga 40 CSS piksel. Oddiy ekranga 160 pikselli fayl yetadi, retina ekranga 320 pikselli kerak.

srcset bilan ikkala variantni taklif qilamiz:

<img src="logo-160.png"
     srcset="logo-160.png 1x, logo-320.png 2x, logo-480.png 3x"
     alt="Choyxona «Bahor»" width="160" height="40">

srcset — vergul bilan ajratilgan nomzodlar ro'yxati. Har bir nomzod: fayl va deskriptor (tavsiflovchi):

• 1x — "DPR 1 bo'lgan ekran uchun".
• 2x — "DPR 2 uchun", fayl ikki barobar katta.
• 3x — "DPR 3 uchun".

Brauzer o'z DPR'iga mosini oladi. src — eski brauzerlar uchun zaxira: srcset ni tushunmaydigan brauzer shu faylni yuklaydi.

Bu usul faqat rasmning sahifadagi o'lchami o'zgarmaydigan holatda qulay: logotiplar, avatarlar, ikonkalar.

4. w va sizes — moslashuvchan rasm

4.1 Muammo

Menyudagi osh surati ekran kengligiga moslashadi: telefonda butun kenglikni egallaydi, kompyuterda esa 600 piksellik ustunda turadi. Rasm o'lchami ekranga qarab o'zgaradi — 1x/2x bu yerda yetmaydi.

4.2 Yechim

Bir nechta o'lchamdagi fayl tayyorlaymiz — osh-480.jpg, osh-800.jpg, osh-1200.jpg, osh-1600.jpg — va brauzerga ikki narsani aytamiz:

<img src="osh-800.jpg"
     srcset="osh-480.jpg 480w, osh-800.jpg 800w,
             osh-1200.jpg 1200w, osh-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 600px"
     alt="Toshkent oshi: guruch ustida go'sht va bedana tuxumi"
     width="1600" height="1067">

srcset dagi w — faylning haqiqiy kengligi pikselda. 480w — "bu fayl 480 piksel keng". Brauzer fayllarni yuklamasdan oldin ularning o'lchamini bilib oladi.

sizes — rasm sahifada qancha joy egallashi. Bu yerda:

• (max-width: 600px) 100vw — "ekran kengligi 600 pikselgacha bo'lsa, rasm ekranning butun kengligini egallaydi". 100vw — ekran kengligining 100%. vw — CSS birligi, uni CSS qismida batafsil ko'ramiz.
• 600px — "aks holda rasm 600 piksel keng".

sizes dagi shartlar chapdan o'ngga tekshiriladi, birinchi mos kelgani olinadi. Oxirgi qiymat — shartsiz, "boshqa hamma holatlar uchun".

4.3 Brauzer qanday tanlaydi

Brauzer shunday hisoblaydi:

1. sizes dan rasm egallaydigan joyni topadi (CSS pikselda).
2. Uni DPR'ga ko'paytiradi — shuncha haqiqiy piksel kerak.
3. srcset dan shu raqamga yetadigan eng kichik faylni oladi.

Bizning misol uchun:

Ko'ryapsizmi? osh-1600.jpg bu to'rt qurilmaning birortasiga ham kerak bo'lmadi. Katta monitorda ham rasm 600 piksellik ustunda turadi.

Muhim nozik joy: standart brauzerga tanlash erkinligini beradi. Masalan, fayl allaqachon keshda bo'lsa yoki internet juda sekin bo'lsa, brauzer boshqa nomzodni olishi mumkin. Siz faqat variantlarni taklif qilasiz — yakuniy qaror brauzerniki.

Bo'sh joyni to'ldiring: sizes 600 piksel, DPR 2. Brauzerga necha piksellik rasm kerak?

Tekshirib ko'ring: Nega srcset da w ishlatilganda sizes ham kerak?

5. sizes ni qanday yozish

sizes sahifaning haqiqiy joylashuviga mos bo'lishi kerak. Joylashuvni esa CSS belgilaydi. Shuning uchun sizes odatda CSS yozilgandan keyin aniqlashtiriladi.

Uch tipik holat:

Aniq bilmasangiz, 100vw xavfsiz boshlanish: rasm hech qachon xira bo'lmaydi. Faqat ba'zan keragidan kattaroq fayl yuklanadi. CSS tayyor bo'lgach, sizes ni aniqlashtirasiz.

Maslahat: Yangi brauzerlarda sizes="auto" qiymati paydo bo'ldi — u faqat loading="lazy" rasmlarda ishlaydi va brauzer joyni o'zi hisoblaydi. Hozircha hamma brauzer uni qo'llamaydi, shuning uchun zaxira qiymat bilan yoziladi. Kechiktirib yuklashni Rasm unumdorligi darsida ko'ramiz.

6. DevTools'da tekshirish

Brauzer qaysi faylni tanlaganini ko'rish uchun:

1. Elements paneli. img qatori ustiga sichqonchani olib boring. Kichik oynada "Rendered size" (ekrandagi o'lcham), "Intrinsic size" (fayl o'lchami) va "Current source" (tanlangan fayl) chiqadi.
2. Console. Elements'da img ni tanlang va Console'da yozing: $0.currentSrc. $0 — Elements'da tanlangan element, currentSrc — hozir ko'rsatilayotgan fayl manzili.
3. Network paneli. "Img" filtrini tanlang — qaysi fayl yuklanganini va uning hajmini ko'rasiz.
4. Device mode. DevTools'dagi telefon belgisini bosing. Yuqoridagi paneldan ekran kengligi va DPR'ni o'zgartirib, tanlov qanday o'zgarishini kuzating.

Diqqat: Brauzer bir marta katta faylni yuklab olsa, oynani kichraytirganda ham o'shani ishlatishi mumkin — u allaqachon keshda. Tekshirayotganda Network panelidagi Disable cache belgisini yoqing va har safar Ctrl + Shift + R bilan yangilang.

7. Fayllarni qanday tayyorlash

Har bir rasmning 3–5 ta o'lchamini qo'lda tayyorlash mumkin — masalan, img asoslari darsida ko'rgan Squoosh bilan. Nomlashda kenglikni fayl nomiga qo'shing: osh-480.jpg, osh-800.jpg. Shunda srcset ni yozish va tekshirish oson.

Qancha o'lcham kerak? Amaliy qoida: 400–500 dan 1600–2000 pikselgacha, har biri oldingisidan taxminan 1,5 barobar katta. Ko'p rasmli saytlarda bu ishni dasturlar va rasm CDN'lari avtomatik bajaradi — ularni Rasm unumdorligi darsida ko'ramiz.

8. Ko'p uchraydigan xatolar

8.1 w bor, sizes yo'q

<img src="osh-800.jpg" srcset="osh-480.jpg 480w, osh-800.jpg 800w"
     alt="Osh" width="800" height="533">

Nu HTML Checker:

Error: When the “srcset” attribute has any image candidate string with a width descriptor, the “sizes” attribute must also be specified.

Tarjimasi: "srcset da kenglik deskriptori bo'lsa, sizes atributi ham ko'rsatilishi shart." Tuzatish: haqiqiy joylashuvga mos sizes qo'shing, bilmasangiz — sizes="100vw".

8.2 x va w aralash

<img src="a.jpg" srcset="a.jpg 1x, b.jpg 800w" sizes="100vw" alt="A"
     width="800" height="533">

Error: Bad value “a.jpg 1x, b.jpg 800w” for attribute “srcset” on element “img”: Expected width descriptor but found “1x” at “a.jpg 1x,”.

Tarjimasi: "srcset uchun yaroqsiz qiymat: kenglik deskriptori kutilgan edi, lekin 1x topildi." Bitta srcset da faqat bitta turdagi deskriptor. Tuzatish: hammasini w ga o'tkazing.

8.3 w qiymati faylga mos emas

osh-800.jpg 1200w — fayl aslida 800 piksel, lekin brauzerga 1200 deb aytilgan. Brauzer noto'g'ri tanlaydi va rasm xira chiqishi mumkin. Tuzatish: w — faylning haqiqiy kengligi. Nomdagi raqam va w bir xil bo'lsin.

8.4 width va height ni unutish

srcset bo'lsa ham, img asoslari darsidagi qoida o'zgarmaydi: width va height sahifa sakramasligi uchun kerak. Ularga eng katta faylning o'lchami (yoki to'g'ri nisbat) yoziladi.

9. Mashqlar

1-mashq (oson): Qaysi deskriptor?

1. Sayt tepasidagi 120 ga 120 pikselli avatar —
2. Telefonda butun kenglikni egallaydigan banner —

2-mashq (o'rta): Brauzer nimani tanlaydi?

<img src="kabob-800.jpg"
     srcset="kabob-400.jpg 400w, kabob-800.jpg 800w,
             kabob-1200.jpg 1200w"
     sizes="(max-width: 500px) 100vw, 500px"
     alt="Sixdagi qiyma kabob" width="1200" height="800">

1. Telefon: kengligi 375, DPR 2.
2. Noutbuk: kengligi 1366, DPR 1.

3-mashq (qiyin): Menyuga responsive rasm

1. Bitta taom suratining to'rt o'lchamini tayyorlang: 480, 800, 1200, 1600 piksel kenglikda (Squoosh bilan). Nomlari: taom-480.jpg, taom-800.jpg, taom-1200.jpg, taom-1600.jpg.
2. menyu/index.html da shu rasm uchun srcset va sizes yozing: telefonda butun kenglik, 700 pikseldan keng ekranda 600 piksel.
3. DevTools'da Device mode'da ikki holatni tekshiring: "iPhone" (DPR 3) va "Responsive" 1200 piksel, DPR 1. Har birida $0.currentSrc ni yozib oling.

<img src="../assets/images/taom-800.jpg"
     srcset="../assets/images/taom-480.jpg 480w,
             ../assets/images/taom-800.jpg 800w,
             ../assets/images/taom-1200.jpg 1200w,
             ../assets/images/taom-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 600px"
     alt="Toshkent oshi: guruch ustida go'sht va bedana tuxumi"
     width="1600" height="1067">

10. Real ishda

• Mobil trafik. O'zbekistonda ko'p foydalanuvchi saytlarni mobil internet orqali ochadi. Responsive rasmlar sahifa hajmini ko'pincha bir necha barobar kamaytiradi — sahifa tez ochiladi, foydalanuvchi trafigi tejaladi.
• Onlayn do'konlar va yangilik saytlari — har bir mahsulot va maqola surati srcset bilan beriladi. Ko'pincha bu avtomatik: kontent tizimi rasm yuklanganda uning bir nechta o'lchamini o'zi yaratadi.
• Freymvorklar (masalan, Next.js'ning Image komponenti — kursda o'rganamiz) srcset va sizes ni avtomatik yozadi. Lekin sizes ni to'g'ri berish baribir dasturchining ishi — buning uchun shu darsdagi tushuncha kerak.
• Lighthouse "Properly size images" ("Rasmlarni to'g'ri o'lchamda bering") tavsiyasi bilan keragidan katta rasmlarni ko'rsatadi.

Xulosa

• Bitta rasm hamma ekranga mos kelmaydi: katta — trafik isrofi, kichik — xiralik.
• DPR — qurilma piksellari va CSS piksellar nisbati (window.devicePixelRatio).
• Qat'iy o'lchamli rasm: srcset="a.png 1x, a@2x.png 2x".
• Moslashuvchan rasm: srcset da w (faylning haqiqiy kengligi) va sizes (sahifadagi joy).
• Brauzer: joy × DPR → yetarli eng kichik fayl; yakuniy tanlov brauzerniki.
• Tekshirish: Elements'dagi "Current source", $0.currentSrc, Network va Device mode.

Keyingi dars: Responsive rasmlar II: picture va source — zamonaviy formatlarni (AVIF, WebP) zaxira bilan berish va telefon uchun boshqa kadrni ko'rsatish.

Manbalar

• MDN: "Responsive images", <img> — srcset va sizes — developer.mozilla.org
• web.dev: "Responsive images" — web.dev
• WHATWG HTML: "Images" (srcset va sizes) — html.spec.whatwg.org