HTML'da rasm qo'yish: img, src, alt, width va height

Qisqacha: Rasm img tegi bilan qo'yiladi: src — rasm fayli qayerda, alt — rasm ko'rinmasa yoki ekran o'quvchi o'qiganda uning o'rnidagi matn. width va height ga rasmning haqiqiy o'lchami (birliksiz, pikselda) yoziladi. Shunda brauzer rasm yuklanmasdan oldin joy ajratadi va sahifa "sakramaydi".

Bu darsda

• img tegi bilan sahifaga rasm qo'yasiz.
• src ga to'g'ri nisbiy yo'l yozasiz.
• alt nima uchun majburiy ekanini tushunasiz.
• width va height ni to'g'ri yozasiz va ular sahifani qanday barqaror qilishini ko'rasiz.
• Buzilgan rasm sababini DevTools yordamida topasiz.

Oldin bilishingiz kerak: Havola asoslari, Ko'p sahifali sayt tuzilmasi, Rasm formatlari.

1. Nega bu kerak?

Choyxona saytida hali birorta rasm yo'q. Lekin odamlar ovqatni avval ko'zi bilan tanlaydi. Bug'i chiqib turgan oshning surati uzun tavsifdan ko'ra ko'proq mijoz olib keladi.

Rasm qo'yish oson ko'rinadi: faylni ko'rsatasiz — tayyor. Lekin bu darsda ko'rasizki, bitta img qatorida uchta muhim qaror bor: rasm qayerdan olinadi, ko'rinmasa nima chiqadi va sahifada qancha joy egallaydi. Uchalasini noto'g'ri qilsangiz, sayt sekin, noqulay va ba'zi foydalanuvchilar uchun "ko'r" bo'ladi.

2. img tegi

2.1 Eng oddiy rasm

Rasmni assets/images/ papkasiga qo'ying (o'tgan darsdagi tuzilma). Masalan, osh.jpg. Keyin bosh sahifada:

<img src="assets/images/osh.jpg" alt="Bir tarelka Toshkent oshi">

• img — bo'sh element, yopuvchi tegi yo'q.
• src (source — manba) — rasm fayliga yo'l.
• alt (alternative text — muqobil matn) — rasm o'rnini bosadigan matn.

Brauzerda rasm aslidagi o'lchamida chiqadi. Telefon kamerasi bilan olingan rasm bo'lsa — juda katta, ekrandan chiqib ketishi mumkin. Rasmni ekranga moslashni CSS qiladi. HTML'ning vazifasi — to'g'ri ma'lumot berish.

2.2 img — matn ichidagi element

Brauzer img ni standart holatda inline element sifatida ko'rsatadi — div va span darsidagi span kabi. U matn qatorida turadi:

<p>Bugungi taom:
<img src="assets/images/osh-kichik.jpg" alt="Osh"> osh!</p>

Kichik ikonkalar uchun bu qulay. Katta rasmlarni esa odatda alohida qatorga qo'yamiz — paragraf ichida emas, uning oldida yoki keyinida.

3. src — rasm qayerda

3.1 Nisbiy yo'l

Havolalar bilan bir xil qoidalar: yo'l joriy HTML fayl turgan papkadan hisoblanadi. menyu/index.html sahifasida:

<img src="../assets/images/osh.jpg" alt="Bir tarelka Toshkent oshi">

../ — bir papka yuqoriga, keyin assets/images/. Havola asoslari darsidagi hamma qoidalar bu yerda ham ishlaydi.

3.2 Boshqa saytdagi rasm

src ga to'liq manzil ham yozish mumkin:

<img src="https://example.com/rasmlar/choy.jpg" alt="Ko'k choy">

Lekin boshqa saytning rasmini to'g'ridan-to'g'ri ishlatish (inglizcha "hotlinking") odatda yomon g'oya:

• Mualliflik huquqi. Rasm kimningdir mulki. Ruxsatsiz ishlatish qonunni buzishi mumkin.
• Ishonchsizlik. O'sha sayt rasmni o'chirsa yoki manzilini o'zgartirsa, sizning sahifangizda bo'sh joy qoladi.
• Begona serverga yuk. Siz boshqa saytning trafigini sarflaysiz. Ba'zi saytlar buni bloklaydi.

Qoida: rasmni o'zingiz olasiz yoki ruxsat bilan yuklab, o'z assets/ papkangizga qo'yasiz. Bepul va erkin foydalaniladigan rasmlar uchun maxsus saytlar bor — ularning litsenziya shartlarini o'qing.

4. alt — rasm ko'rinmaganda

4.1 Kimga kerak

alt matni uch holatda ishlaydi:

1. Ekran o'quvchi rasmni "ko'ra olmaydi" — u alt ni ovoz chiqarib o'qiydi.
2. Rasm yuklanmadi — sekin internet, xato yo'l. Brauzer rasm o'rnida alt matnini ko'rsatadi.
3. Google rasm nima haqida ekanini alt dan biladi — "Google Rasmlar" qidiruvi ham.

4.2 alt — majburiy

alt siz img — xato. Nu HTML Checker:

Error: An “img” element must have an “alt” attribute, except under certain conditions.

Tarjimasi: "img elementida alt atributi bo'lishi shart, ba'zi maxsus holatlardan tashqari." Validatsiya darsida bu xabarni ko'rgan edik.

4.3 Qisqa qoida

Yaxshi alt — rasm nimani yetkazayotganini qisqa aytadi. "rasm", "foto", "osh.jpg" — yomon. "Bir tarelka Toshkent oshi, ustida bedana tuxumi" — yaxshi.

Rasm faqat bezak bo'lsa (masalan, chiroyli naqsh chizig'i), alt bo'sh qoldiriladi: alt="". Bo'sh alt ekran o'quvchiga "bu rasmni o'tkazib yubor" deydi. Diqqat: alt ni butunlay tashlab ketish va alt="" yozish — boshqa-boshqa narsalar.

Yaxshi alt yozish — alohida mahorat. Uni keyingi darsda batafsil o'rganamiz.

Tekshirib ko'ring: <img src="osh.jpg" alt="rasm"> — alt bor, validator xato bermaydi. Muammo nimada?

5. width va height — sahifa sakramasin

5.1 Muammo: "sakraydigan" sahifa

Telefonda yangilik saytini o'qiyapsiz. Birdan matn pastga sakraydi — tepada rasm yuklandi. Siz bosmoqchi bo'lgan havola o'rnida endi boshqasi turibdi va noto'g'ri joyni bosasiz.

Sabab: brauzer rasm yuklanmaguncha uning o'lchamini bilmaydi. U avval 0 balandlik ajratadi, matnni joylashtiradi. Rasm kelgach esa uning uchun joy ochib, hammasini pastga suradi.

Bu hodisa layout shift ("joylashuvning siljishi") deyiladi. Google uni CLS (Cumulative Layout Shift — umumiy siljish) degan ko'rsatkich bilan o'lchaydi. CLS — sayt sifatining asosiy ko'rsatkichlaridan biri (Core Web Vitals). Yomon CLS qidiruv natijalariga ham ta'sir qiladi.

5.2 Yechim

Rasmning haqiqiy o'lchamini width (kenglik) va height (balandlik) atributlariga yozing:

<img src="assets/images/osh.jpg" alt="Bir tarelka Toshkent oshi"
     width="1200" height="800">

Endi brauzer rasm hali yuklanmasdan oldin bilib oladi: "1200 ga 800, ya'ni nisbati 3:2". U shunday joyni oldindan ajratadi — rasm yuklanganda hech narsa siljimaydi.

Uchta muhim detal:

1. Raqamlar birliksiz. width="1200" — pikselda. width="1200px" — xato.
2. Haqiqiy o'lcham yoziladi — faylning o'z o'lchami, ekrandagi ko'rinish o'lchami emas.
3. CSS bilan ziddiyat yo'q. Keyinroq CSS'da width: 100%; height: auto; yozib, rasmni ekranga moslaysiz. Zamonaviy brauzerlar shunda ham width va height dan nisbatni olib, to'g'ri joy ajratadi.

5.3 Rasm o'lchamini qanday bilish

• VS Code: chap panelda rasm faylini oching — pastki holat qatorida o'lchami chiqadi, masalan 1200x800.
• Windows: fayl ustida o'ng tugma → Properties → Details — "Width" va "Height".
• macOS: faylni belgilab, Cmd + I (Get Info) → "More Info".

5.4 O'zingiz ko'ring

DevTools'da siljishni ko'rish mumkin. F12 → Network paneli → tezlik menyusidan "Slow 4G" ni tanlang (DevTools II darsida ko'rgan sekin internet imitatsiyasi). Sahifani Ctrl + Shift + R bilan yangilang:

• width va height siz: matn avval chiqadi, keyin rasm kelib uni pastga itaradi.
• width va height bilan: rasm uchun bo'sh joy darhol paydo bo'ladi, matn joyidan qimirlamaydi.

Tekshirib ko'ring: Rasm fayli 1600×900. Sahifada uni kichikroq ko'rsatmoqchisiz. width va height ga nima yozasiz?

6. Buzilgan rasm

6.1 Belgilari

Rasm o'rnida kichik "singan rasm" belgisi va alt matni chiqdi. Demak, brauzer faylni topa olmadi.

DevTools Console'da xabar bo'ladi:

Failed to load resource: the server responded with a status of 404 (Not Found)

Tarjimasi: "Resursni yuklab bo'lmadi: server 404 (Topilmadi) status bilan javob berdi." Xabar yonida qaysi fayl ekani ko'rsatiladi. Network panelida esa bu so'rov qizil rangda turadi.

6.2 Sabablari

1. Noto'g'ri yo'l — ko'pincha ichki papkadagi sahifada ../ unutilgan.
2. Katta-kichik harf — faylda Osh.JPG, kodda osh.jpg. Kompyuteringizda ishlaydi, serverda — yo'q.
3. Fayl kengaytmasi — osh.jpeg va osh.jpg — ikki xil nom.
4. Fayl umuman yo'q — assets/ ga ko'chirishni unutgansiz.

alt matni bu yerda yana bir bor asqotdi: rasm buzilgan bo'lsa ham, foydalanuvchi u yerda nima bo'lishi kerakligini biladi.

7. Qaysi formatni tanlash

Rasm formatlari darsida formatlarni batafsil ko'rgan edik. Sayt uchun qisqa eslatma:

GIF animatsiyalari juda katta hajmli — ularning o'rniga qisqa video ishlatiladi.

Yana bir muhim narsa — fayl hajmi. Telefon kamerasidagi foto 4000×3000 piksel va 4–5 MB bo'ladi. Sahifada u 600 piksel kenglikda ko'rinsa, foydalanuvchi keraksiz megabaytlarni yuklaydi. Rasmni joylashdan oldin kichraytiring. Masalan, Google'ning bepul Squoosh (squoosh.app) veb-vositasi rasmni o'lcham va format bo'yicha bir necha soniyada siqadi.

Turli ekranlar uchun turli o'lchamdagi rasmlar va boshqa tezlik usullarini Responsive rasmlar va Rasm unumdorligi darslarida o'rganamiz.

8. Ko'p uchraydigan xatolar

8.1 alt yo'q

Validator xatosi, ekran o'quvchi foydalanuvchisi uchun esa — sirli "rasm". Ba'zi ekran o'quvchilar alt bo'lmasa fayl nomini o'qiydi: "i-m-g-underscore-2-0-2-6...". Tuzatish: har bir img ga alt — mazmunli yoki bezak uchun bo'sh.

8.2 width da birlik

<img src="osh.jpg" alt="Osh" width="400px" height="300">

Error: Bad value “400px” for attribute “width” on element “img”: Expected a digit but saw “p” instead.

Tarjimasi: "img elementining width atributi uchun '400px' — yaroqsiz qiymat: raqam kutilgan edi, 'p' uchradi." Tuzatish: width="400".

8.3 Nisbat buzilgan

Rasm 1200×800, lekin width="400" height="400" yozilgan. CSS bo'lmasa, brauzer rasmni aynan 400×400 qilib ko'rsatadi — osh tarelkasi cho'zilib, tuxumsimon bo'lib qoladi. Tuzatish: haqiqiy o'lchamlarni yozing (yoki hech bo'lmasa, to'g'ri nisbatni).

8.4 Ulkan fayl

Sahifa sekin ochilyapti. Network panelida osh.jpg — 5 MB. Tuzatish: rasmni kerakli o'lchamga kichraytiring va siqing.

9. Mashqlar

1-mashq (oson): Atributlarni to'ldiring

1. Rasm fayliga yo'l qaysi atributda?
2. Rasmning muqobil matni qaysi atributda?
3. Rasm faylining haqiqiy kengligi qaysi atributga yoziladi?

2-mashq (o'rta): Beshta xato

menyu/index.html faylida:

<img src="assets/images/Osh.JPG">
<img src="https://example.org/kabob.jpg" alt="kabob.jpg">
<img src="../assets/images/choy.png" alt="Ko'k choy"
     width="300px" height="200px">

<img src="../assets/images/osh.jpg" alt="Bir tarelka Toshkent oshi"
     width="1200" height="800">
<img src="../assets/images/kabob.jpg" alt="Sixdagi qiyma kabob"
     width="1200" height="800">
<img src="../assets/images/choy.png" alt="Piyoladagi ko'k choy"
     width="300" height="200">

3-mashq (qiyin): Menyuga rasmlar

1. Uchta taom rasmini toping yoki o'zingiz oling. Ularni kichraytirib (kengligi 1200 piksel atrofida), assets/images/ ga ma'noli nomlar bilan joylang.
2. menyu/index.html dagi har bir taom kartochkasiga rasm qo'shing: to'g'ri yo'l, mazmunli alt, haqiqiy width va height.
3. DevTools'da "Slow 4G" bilan sahifa sakramasligini tekshiring.
4. Bitta rasm yo'lini ataylab buzing va Console'dagi xabarni o'qing. Keyin tuzating.
5. npx html-validate va npx linkinator . --recurse — xato yo'q.

<div class="taom-karta">
  <img src="../assets/images/toshkent-oshi.jpg"
       alt="Tarelkadagi Toshkent oshi, ustida bedana tuxumi"
       width="1200" height="800">
  <h3><a href="../taomlar/osh.html">Toshkent oshi</a></h3>
  <p>35 000 so'm</p>
</div>

10. Real ishda

• Onlayn do'konlar va yetkazib berish ilovalari — mahsulot rasmlari sotuvning asosi. Ularda width/height, siqilgan formatlar va to'g'ri alt — standart talab.
• Core Web Vitals. Google sahifa tezligi va barqarorligini o'lchaydi. O'lchamsiz rasmlar — CLS yomonlashuvining eng keng tarqalgan sababi. Lighthouse "Image elements do not have explicit width and height" ("Rasm elementlarida aniq kenglik va balandlik yo'q") deb ogohlantiradi.
• Accessibility qonunlari. Ko'p davlatlarda davlat va yirik xizmat saytlari uchun alt matnlar majburiy.
• Freymvorklar (masalan, Next.js'dagi Image komponenti — kursda o'rganamiz) width va height ni majburiy qiladi. Sababi — shu darsda ko'rgan CLS muammosi.

Xulosa

• Rasm: <img src="yo'l" alt="matn" width="..." height="..."> — bo'sh element, standartda inline.
• src — nisbiy yo'l havolalardagi kabi; begona saytdan rasmni to'g'ridan-to'g'ri olmang.
• alt — majburiy: mazmunli yoki bezak uchun alt=""; batafsil — keyingi darsda.
• width va height — faylning haqiqiy o'lchami, birliksiz; brauzer joyni oldindan ajratadi, CLS bo'lmaydi.
• Buzilgan rasm: Console'da 404, sabablari — yo'l, harf, kengaytma.
• Foto — JPEG/WebP, logotip — SVG; joylashdan oldin rasmni kichraytiring va siqing.

Keyingi dars: Yaxshi alt matn yozish — informativ, bezak va funksional rasmlar uchun alt ni qanday yozish kerak.

Manbalar

• MDN: <img>: The Image Embed element — developer.mozilla.org
• web.dev: "Cumulative Layout Shift (CLS)" va "Optimize Cumulative Layout Shift" — web.dev
• WHATWG HTML: "The img element" — html.spec.whatwg.org