Rasmlar — img tegi, src, alt, width, height, loading

~15 daq · HTML · HTML Asoslari

Muammodan boshlaylik

Sahifangizga rasm qo'shdingiz. Brauzerda ochsangiz — rasm o'rnida singan belgi. Yoki rasm bor, lekin sahifa juda sekin yuklanadi. Yoki ko'zi ojiz foydalanuvchi sahifani o'qitayotganda ekran o'quvchi dasturi shunchaki "image" deydi — hech qanday ma'lumot yo'q.

Bu uchala muammo HTML da rasmlar bilan ishlashni to'g'ri bilmaslikdan kelib chiqadi. Bu darsda <img> tegining har bir atributini nima uchun ishlatilishini tushunib o'rganamiz.

img tegi nima?

<img> — brauzerga "shu joyga rasm joylashtir" deb aytuvchi teg.

Boshqa teglardan muhim bir farqi bor: <img> yopilmaydi. Chunki uning ichiga kontent joylashtirilmaydi — u o'zi mustaqil, yolg'iz turuvchi element.

<!-- To'g'ri -->
<img src="rasm.jpg" alt="Rasm tavsifi" />

<!-- Xato — yopuvchi teg mantiqsiz -->
<img src="rasm.jpg" alt="Rasm tavsifi"></img>

src — rasm manzili

src (source — manba) atributi rasmning qayerda joylashganini ko'rsatadi. Ikkita usul bor: nisbiy yo'l va mutlaq yo'l.

Nisbiy yo'l

Rasm loyiha ichida bo'lsa — fayl tuzilmasiga qarab yo'l yoziladi.

loyiha/
├── index.html
├── rasmlar/
│   └── mushuk.jpg
└── mushuk.jpg

<!-- index.html bilan bir papkada -->
<img src="mushuk.jpg" alt="Mushuk" />

<!-- rasmlar papkasida -->
<img src="rasmlar/mushuk.jpg" alt="Mushuk" />

<!-- bir papka yuqoriga chiqib, boshqa papkaga -->
<img src="../boshqa-papka/mushuk.jpg" alt="Mushuk" />

Mutlaq yo'l

Rasm boshqa serverda yoki CDN da bo'lsa — to'liq URL yoziladi.

<img src="https://example.com/rasmlar/mushuk.jpg" alt="Mushuk" />

Diqqat: Boshqa saytning rasm URL ini bevosita ishlatmang. O'sha sayt rasmni o'chirib tashlasa yoki URL ni o'zgartirsa — sizning sahifangizda ham sinadi. Rasmni o'z serveringizga ko'chirib oling.

alt — eng muhim atribut

alt (alternative text — muqobil matn) — rasm ko'rinmagan holatda uning o'rnida ko'rinadigan matn.

Nima uchun bu muhim?

Ko'zi ojiz foydalanuvchilar ekran o'quvchi dasturdan foydalanadi. Ekran o'quvchi sahifadagi hamma narsani ovoz chiqarib o'qiydi — rasmlarni emas, faqat alt matnini. alt yo'q bo'lsa, dastur fayl nomini o'qiydi: "mushuk dot jay peg". Bu foydalanuvchiga hech narsa anglatmaydi.

Ikkinchi sabab — rasm yuklanmasa (sekin internet, noto'g'ri yo'l) alt matni o'rniga ko'rinadi.

Uchinchi sabab — qidiruvlar rasmni "ko'rmaydi", faqat alt matnini o'qiydi. Bu SEO uchun to'g'ridan-to'g'ri ta'sir qiladi.

<!-- To'g'ri — aniq va foydali tavsif -->
<img src="olma.jpg" alt="Daraxtdan yangi uzilgan qizil olma" />

<!-- Xato — bo'sh alt, ekran o'quvchi o'tkazib yuboradi -->
<img src="olma.jpg" alt="" />

<!-- Xato — kalit so'z spami, foydasiz -->
<img src="olma.jpg" alt="olma olma qizil olma meva rasm" />

<!-- Xato — alt yo'q, ekran o'quvchi fayl nomini o'qiydi -->
<img src="olma.jpg" />

Dekorativ rasmlar

Agar rasm faqat ko'rinish uchun bo'lsa va hech qanday ma'lumot bermasa — alt="" yozing, lekin atributni tushirib qoldirmang. Bo'sh alt ekran o'quvchiga "bu rasmni o'tkazib yubor" degan signal.

<!-- Dekorativ separator yoki fon uchun -->
<img src="dekorativ-chiziq.png" alt="" />

width va height — o'lchamlar

Bu ikki atribut rasmning kengligi va balandligini pikselda belgilaydi.

<img src="rasm.jpg" alt="Tog' manzarasi" width="800" height="600" />

Nima uchun bularni yozish shart?

Sahifa yuklanayotganda matn paydo bo'ldi, siz o'qishni boshladingiz. Keyin rasm yuklanib, matn to'satdan pastga "sakrab" ketdi. O'qiyotgan joyingiz ko'chib qoldi.

Bu muammo layout shift deyiladi. Brauzer width va height ni bilmasa — rasm uchun joy ajratmaydi, shunchaki matnni joylashtiradi. Rasm yuklanib kelganda hammani siqib pastga tushiradi.

width va height yozsangiz — brauzer rasm kelmasdan oldin to'g'ri o'lchamdagi bo'sh joy ajratib qo'yadi. Rasm kelganda hech narsa sakramaydi.

<!-- To'g'ri — brauzer oldindan joy ajratadi -->
<img src="banner.jpg" alt="Kampaniya banneri" width="1200" height="400" />

<!-- Xato — joy ajratilmagan, sahifa sakrashi mumkin -->
<img src="banner.jpg" alt="Kampaniya banneri" />

Eslatma: width va height HTML da faqat raqam — CSS birligi yozilmaydi. width="400" to'g'ri, width="400px" xato. Keyin CSS da o'lchamni erkin o'zgartirish mumkin: img { width: 100%; height: auto; }.

loading — rasmni qachon yuklash

loading atributi brauzerga rasmni qachon yuklab olishni aytadi.

<img src="rasm.jpg" alt="Rasm" loading="lazy" />
<img src="rasm.jpg" alt="Rasm" loading="eager" />

loading="eager"

Sahifa ochilishi bilan rasm darhol yuklanadi. Hozir ko'rinmasa ham. Bu standart xulq — loading atributini yozmagan holda shu ishlaydi.

loading="lazy"

Rasm foydalanuvchi ekraniga yaqinlashganda yuklanadi. Sahifa birinchi ochilganda ekranda ko'rinmaydigan rasmlar umuman yuklanmaydi — foydalanuvchi scroll qilib yaqinlashgandagina yuklanishni boshlaydi.

Katta sahifalarda, ayniqsa ko'p rasmli do'kon yoki galereya sahifalarida bu juda katta farq qiladi — dastlabki yuklash vaqti va internet trafigi sezilarli kamayadi.

<!-- Sahifa tepasidagi asosiy rasm — darhol yuklansin -->
<img src="hero.jpg" alt="Bosh sahifa banneri" width="1920" height="800" loading="eager" />

<!-- Pastdagi mahsulot rasmlari — foydalanuvchi yetib kelganda yuklansin -->
<img src="mahsulot-1.jpg" alt="Qora charm sumka" width="400" height="400" loading="lazy" />
<img src="mahsulot-2.jpg" alt="Ko'k junvor palto" width="400" height="400" loading="lazy" />
<img src="mahsulot-3.jpg" alt="Oq paxta ko'ylak" width="400" height="400" loading="lazy" />

Qoida: Sahifani birinchi ochganda ko'rinadigan rasmlar uchun eager yoki atributsiz. Qolgan barcha rasmlar uchun lazy.

To'liq to'g'ri yozilgan img tegi

<img
  src="rasmlar/chimyon.jpg"
  alt="Chimyon tog'lari qish faslida qor ostida, ko'k osmon fonida"
  width="1200"
  height="800"
  loading="lazy"
/>

Har bir atributning o'z vazifasi bor:

• src — rasmning to'g'ri manzili
• alt — aniq va foydali tavsif
• width va height — sahifa sakramasligi uchun
• loading="lazy" — sahifani tezlashtirish uchun

Tez-tez uchraydigan xatolar

Katta-kichik harf farqiga e'tibor bermaslik

<!-- Xato — Linux serverda rasm topilmaydi -->
<img src="Rasmlar/Mushuk.JPG" alt="Mushuk" />

<!-- To'g'ri — kichik harf, izchil nomlash -->
<img src="rasmlar/mushuk.jpg" alt="Mushuk" />

Windows kompyuterda fayl nomidagi katta-kichik harf farqi muhim emas — ikkisi ham ishlaydi. Lekin Linux serverda (ko'pchilik hosting) Mushuk.JPG va mushuk.jpg ikki xil fayl. Local da ishlagan kod serverda ishlamasligi mumkin. Fayl nomlarini har doim kichik harf bilan yozing.

alt ni tushirib qoldirish

<!-- Xato — accessibility va SEO uchun zarar -->
<img src="jamoa.png" />

<!-- To'g'ri -->
<img src="jamoa.png" alt="DevDocs jamoasi, Toshkent 2024" />

alt tushirib qoldirilsa ekran o'quvchi fayl nomini o'qiydi. Bu foydalanuvchi uchun ham, qidiruv uchun ham foydасiz.

width va height siz og'ir rasmlar

<!-- Xato — 4MB rasm, o'lcham yo'q — sahifa sekin va sakraydi -->
<img src="fon.jpg" alt="Fon" />

<!-- To'g'ri — o'lcham ko'rsatilgan -->
<img src="fon.jpg" alt="Tog' fonida quyosh botishi" width="1920" height="1080" loading="lazy" />

Sahifaning boshidagi muhim rasmga lazy loading qo'yish

<!-- Xato — bosh rasm kech yuklanadi, foydalanuvchi bo'sh joy ko'radi -->
<img src="hero.jpg" alt="Bosh banner" loading="lazy" />

<!-- To'g'ri -->
<img src="hero.jpg" alt="Bosh banner" width="1920" height="600" loading="eager" />

Birinchi ko'rinish maydonidagi rasmlarga lazy qo'yish teskari natija beradi — foydalanuvchi sahifa ochilganda bo'sh joy ko'radi.

Xulosa

<img> — yopilmaydigan teg, sahifaga rasm joylashtiradi.

src — rasmning manzili. Loyiha ichidagi fayllar uchun nisbiy yo'l, tashqi server uchun to'liq URL.

alt — hech qachon tushirib qoldirmaydigan atribut. Ko'zi ojiz foydalanuvchilar, yuklanmagan rasmlar va qidiruvlar uchun zarur. Dekorativ rasmlar uchun alt="" — bo'sh, lekin mavjud.

width va height — sahifa sakramasligi uchun. Brauzer rasm kelmasdan oldin to'g'ri joy ajratadi.

loading — sahifa tepasidagi rasmlar uchun eager, qolganlar uchun lazy. Dastlabki yuklash vaqtini va internet trafigini tejaydi.

Keyingi dars

7-dars: Jadvallar — table, tr, td, th, thead, tbody, tfoot, colspan, rowspan