Rasm, ovoz va video raqamli ko'rinishda

Qisqacha: Rasm — piksellar jadvali: har piksel qizil, yashil va ko'k rangning uchta sonidan (RGB) iborat. Ovoz — soniyasiga o'n minglab marta o'lchangan tovush balandligi (sample rate). Video — soniyasiga 24–60 ta almashadigan rasm. Bu ma'lumot juda katta bo'lgani uchun siqiladi: lossless siqish hech narsani yo'qotmaydi, lossy esa ko'z va quloq sezmaydigan detallarni tashlab yuboradi.

Bu darsda

• Rasm qanday qilib sonlar jadvaliga aylanishini tushuntira olasiz.
• RGB rang va alpha (shaffoflik) kanalini o'qiy olasiz.
• Rasm, ovoz va videoning siqilmagan hajmini hisoblay olasiz.
• Sample rate, bit depth va FPS nima ekanini bilasiz.
• Lossy va lossless siqish farqini va qaysi biri qachon kerakligini aytib bera olasiz.

Oldin bilishingiz kerak: Nega 0 va 1: ikkilik sanoq sistemasi, O'lchov birliklari: KB, MB, GB, O'n oltilik sanoq sistemasi.

1. Nega bu kerak?

Telegram'da do'stingizga rasm yubordingiz. Keyin xuddi shu rasmni "fayl sifatida" yubordingiz. Ikkinchisi ancha sekin yuklandi, lekin tiniqroq chiqdi. Nega?

Birinchi holatda Telegram rasmni siqdi: hajmini kichraytirdi, sifatdan biroz voz kechdi. Ikkinchisida asl fayl o'zgarmasdan ketdi.

Dasturchi sifatida siz ham har kuni shunday tanlov qilasiz. Saytga qanday rasm qo'yish kerak? Nega sahifa sekin ochilyapti? Logotip nega xira chiqdi? Bu savollarga javob berish uchun rasm, ovoz va video ichkarida qanday tuzilganini bilish kerak.

2. Raqamlashtirish: dunyoni sonlarga bo'lish

Tabiatdagi yorug'lik va tovush uzluksiz (analog). Quyosh nuri bir rangdan boshqasiga silliq o'tadi, ovoz to'lqini uzilmaydi.

Kompyuter esa faqat sonlarni saqlaydi. Shuning uchun u dunyoni ikki qadamda sonlarga aylantiradi. Bu jarayon raqamlashtirish (digitization) deyiladi:

1. Bo'laklash. Uzluksiz narsa mayda bo'laklarga bo'linadi: rasm — kataklarga, ovoz — vaqt bo'laklariga.
2. O'lchash. Har bir bo'lak bitta son bilan yoziladi: katakning rangi yoki shu lahzadagi tovush balandligi.

O'xshatish: katakli daftarga rasm ko'chiryapsiz. Har katakni bitta rang bilan bo'yaysiz. Kataklar qancha mayda bo'lsa, rasm asliga shuncha o'xshaydi. Lekin ishingiz ham, daftar varag'i ham shuncha ko'payadi.

flowchart LR
  A["Haqiqiy dunyo: yorug'lik, tovush"] --> B["Bo'laklash: piksel yoki namuna"]
  B --> C["O'lchash: har bo'lak = son"]
  C --> D["Baytlar: 0 va 1"]
  D --> E["Siqish: fayl kichrayadi"]

3. Raqamli rasm

3.1 Piksel

Telefon ekraniga lupa bilan qarasangiz, u mitti rangli nuqtalardan iborat ekanini ko'rasiz. Har bir nuqta piksel (pixel) deyiladi — "picture element", ya'ni "rasm bo'lagi".

Kompyuter uchun rasm — shunchaki jadval. Har katakda bitta piksel rangi turadi. 4 × 3 o'lchamli rasm — 4 ustun va 3 qatordan iborat 12 ta katak.

3.2 RGB: uchta son — bitta rang

Ekrandagi har piksel uchta mitti chiroqdan iborat: qizil (Red), yashil (Green) va ko'k (Blue). Ularning ravshanligini o'zgartirib, istalgan rangni hosil qilish mumkin. Bu model RGB deyiladi.

Har chiroqning ravshanligi 1 bayt bilan yoziladi: 0 (o'chiq) dan 255 (eng yorug') gacha.

Oxirgi qatorga e'tibor bering. Bu bo'yoq aralashtirish emas, nur aralashtirish. Qizil va yashil nur qo'shilsa, ko'z sariqni ko'radi.

Bitta piksel = 3 bayt = 24 bit. Mumkin bo'lgan ranglar soni: 256 × 256 × 256 = 16 777 216 — taxminan 16.7 million. Bu ko'z ajrata oladigan ranglarning deyarli hammasi.

Hex bilan bog'liqlik. Saytlarda rang #ff8800 ko'rinishida yoziladi. Bu uchta hex son: ff, 88, 00. O'n oltilik sanoq sistemasi darsidan eslang: ff = 255, 88 = 136, 00 = 0. Demak #ff8800 — R = 255, G = 136, B = 0, ya'ni to'q sariq rang.

Endi o'zingiz: #00ff00 rangida qizil qismi (R) nechaga teng? Javob:

3.3 Alpha kanal: shaffoflik

Ba'zan pikselga to'rtinchi son qo'shiladi — alpha (A). U shaffoflikni bildiradi: 0 — butunlay shaffof, 255 — to'liq ko'rinadi. Bunday piksel RGBA deyiladi va 4 bayt oladi.

Alpha logotip uchun juda kerak. Shaffof fonli logotip saytning oq fonida ham, qora fonida ham chiroyli turadi. Alpha'ni PNG, WebP va AVIF formatlari saqlaydi, JPEG esa saqlamaydi.

Tekshirib ko'ring: RGB = 0, 0, 255 qanday rang? RGBA = 0, 0, 0, 0 chi?

3.4 Rezolyutsiya va rasm hajmi

Rezolyutsiya (resolution) — rasmdagi piksellar soni: eni × bo'yi. Full HD ekran — 1920 × 1080, ya'ni 2 073 600 piksel (taxminan 2 million). Telefoningizdagi "12 MP" kamera esa taxminan 4000 × 3000 = 12 million piksel beradi. MP — megapiksel, million piksel.

Siqilmagan rasm hajmini hisoblash oson. To'liq yechilgan misol — Full HD rasm:

1. Piksellar: 1920 × 1080 = 2 073 600.
2. Har piksel 3 bayt (RGB): 2 073 600 × 3 = 6 220 800 bayt.
3. MB ga o'tkazamiz: taxminan 6.2 MB.

Qisman yechilgan misol — 12 MP kamera rasmi: 12 000 000 piksel × 3 bayt = bayt (sonni bo'sh joysiz yozing), ya'ni taxminan 36 MB.

Lekin telefoningizdagi rasm odatda 3–5 MB bo'ladi. Qolgan joy qayerga ketdi? Javob — siqish. Unga yetib boramiz.

3.5 DPI, PPI va DPR

Rasmning tiniqligi faqat piksellar soniga emas, ular qanchalik zich joylashganiga ham bog'liq.

• PPI (Pixels Per Inch) — ekranning bir dyuymida (2.54 sm) nechta piksel bor. Zamonaviy telefonlarda 400 dan ortiq.
• DPI (Dots Per Inch) — xuddi shu g'oya, lekin printer uchun: bir dyuymga nechta siyoh nuqtasi tushadi. Sifatli bosma uchun odatda 300 DPI.
• DPR (Device Pixel Ratio) — "qurilma piksel nisbati". Telefonlar matnni tiniq ko'rsatish uchun bitta "sayt pikseli" o'rniga 2×2 yoki 3×3 ta haqiqiy piksel ishlatadi. Bunday telefonda DPR = 2 yoki 3.

DPR nega dasturchiga kerak? Saytdagi rasm 300 piksel enida ko'rinsin, deylik. DPR = 3 bo'lgan telefonda uni tiniq ko'rsatish uchun 900 piksellik rasm kerak bo'ladi. Aks holda rasm xira chiqadi. Har ekranga mos rasm berishni responsive rasmlar darsida o'rganamiz.

Tekshirib ko'ring: 800 × 600 o'lchamli siqilmagan RGB rasm necha bayt?

4. Raqamli ovoz

4.1 Sample rate: soniyasiga necha marta o'lchaymiz

Tovush — havoning tebranishi. Mikrofon bu tebranishni elektr signaliga aylantiradi. Kompyuter esa shu signalni juda tez-tez o'lchab turadi: "hozir balandligi 12, hozir 45, hozir 98".

Har bir o'lchov namuna (sample) deyiladi. Soniyasiga olinadigan namunalar soni — sample rate (namuna chastotasi).

Analog to'lqin:  ~~~/\~~~/\~~~
Namunalar:       | | | | | | |   (soniyasiga 44 100 marta)
Sonlar:          12, 45, 98, 70, ...

Musiqa uchun standart — 44.1 kHz, ya'ni soniyasiga 44 100 ta namuna. Nega aynan shuncha? Inson qulog'i taxminan 20 000 Hz gacha tovushni eshitadi. Qoida bor: tovushni to'g'ri yozish uchun uning eng yuqori chastotasidan kamida 2 barobar ko'p o'lchash kerak. 2 × 20 000 = 40 000, bunga ozgina zaxira qo'shilgan.

Boshqa standartlar ham bor:

• 48 kHz — video va filmlarda.
• 8–16 kHz — telefon qo'ng'iroqlari va ovozli xabarlarda. Shuning uchun telefondagi ovoz biroz "yassi" eshitiladi: yuqori tovushlar kesib tashlangan.

4.2 Bit depth va kanallar

Bit depth (bit chuqurligi) — har namuna necha bit bilan yozilishi. 16 bit bo'lsa, balandlikning 65 536 ta darajasi bor. Studiyalarda 24 bit ishlatiladi — yanada nozik.

Kanallar: mono — 1 ta, stereo — 2 ta (chap va o'ng quloqchin uchun alohida).

4.3 Bosqichli misol: qo'shiq qancha joy oladi?

To'liq yechilgan misol — CD sifatidagi 1 soniya ovoz:

1. Soniyasiga 44 100 namuna.
2. Har namuna 16 bit = 2 bayt.
3. Stereo — 2 kanal.
4. Jami: 44 100 × 2 × 2 = 176 400 bayt soniyasiga.

1 daqiqa: 176 400 × 60 = 10 584 000 bayt, taxminan 10.6 MB. 4 daqiqalik qo'shiq — taxminan 42 MB.

Endi siz: 1 soniyalik mono yozuv (qolgani o'sha-o'sha) necha bayt bo'ladi? Javob (bo'sh joysiz): bayt.

Lekin telefoningizdagi 4 daqiqalik MP3 odatda 4 MB atrofida bo'ladi. Yana siqish!

Tekshirib ko'ring: Nega ovozli xabarlar musiqadan ko'ra kamroq joy oladi?

5. Video: rasmlar oqimi

Video — tez almashadigan rasmlar ketma-ketligi va ular bilan birga ovoz. Har bir rasm kadr (frame) deyiladi. Soniyasiga ko'rsatiladigan kadrlar soni — FPS (Frames Per Second):

• 24 FPS — kino. Ko'z harakatni silliq ko'rishi uchun yetarli.
• 30 FPS — oddiy video, telefon kamerasi.
• 60 FPS va undan ko'p — o'yinlar, sport, silliq animatsiya.

Siqilmagan Full HD video (60 FPS) qancha joy olishini hisoblaymiz:

1. Bitta kadr: 1920 × 1080 × 3 = 6 220 800 bayt.
2. 1 soniya: 6 220 800 × 60 = 373 248 000 bayt — taxminan 373 MB.
3. 1 daqiqa: taxminan 22 GB.

Bu internet orqali uzatib bo'lmaydigan hajm. YouTube'dagi Full HD video esa soniyasiga bir necha megabit bilan keladi. Demak video yuzlab barobar siqilgan.

Video siqishning asosiy siri: qo'shni kadrlar deyarli bir xil. Masalan, o'qituvchi gapirayotgan videoda fon qimirlamaydi, faqat yuz o'zgaradi. Shuning uchun har kadr to'liq saqlanmaydi. Vaqti-vaqti bilan bitta to'liq kadr, qolganlarida esa faqat "nima o'zgardi" yoziladi.

Tekshirib ko'ring: 30 FPS videoning 10 soniyasida nechta kadr bor?

6. Siqish: lossless va lossy

Siqilmagan media juda katta. Shuning uchun deyarli har bir rasm, qo'shiq va video siqilgan holda saqlanadi. Siqishning ikki turi bor.

6.1 Lossless — hech narsa yo'qolmaydi

Lossless (yo'qotishsiz) siqishda fayl kichrayadi, lekin ochilganda asl ma'lumot bit-bitigacha qaytadi.

To'liq yechilgan misol. Rasmning bir qatorida 10 ta oq (O) va 4 ta ko'k (K) piksel ketma-ket turibdi:

Asl:      O O O O O O O O O O K K K K   (14 ta qiymat)
Siqilgan: 10×O, 4×K                     (4 ta qiymat)

"O ni 10 marta takrorla" deb yozish 14 ta qiymat o'rniga 4 tasini oldi. Ochganda aynan o'sha qator tiklanadi. Bu eng oddiy usul, u RLE (Run-Length Encoding) deyiladi. Haqiqiy formatlar ancha aqlliroq usullarni ishlatadi, lekin g'oya shu: takrorlanishni qisqa yozish.

Qisman yechilgan misol: K K K K K K O O qatori ?×K, 2×O bo'lib siqiladi. So'roq o'rnida qaysi son turadi? Javob:

Lossless formatlar: PNG (rasm), FLAC (ovoz), ZIP (istalgan fayl). Rasm qancha "tekis" bo'lsa (logotip, sxema, skrinshot), lossless shuncha yaxshi siqadi. Foto esa lossless bilan yomon siqiladi: unda har piksel qo'shnisidan ozgina farq qiladi.

6.2 Lossy — sezilmaydigan narsa tashlanadi

Lossy (yo'qotishli) siqish ba'zi ma'lumotni butunlay o'chiradi. Lekin faqat ko'z yoki quloq sezmaydigan qismini:

• Ko'z yorug'lik o'zgarishini yaxshi sezadi, lekin juda yaqin rang tuslarini yomon ajratadi. JPEG shu tuslarni birlashtiradi.
• Quloq baland tovush yonidagi past tovushni eshitmaydi. MP3 va AAC uni yozmaydi.

Natija: fayl 10 barobar va undan ham ko'p kichrayadi, sifat esa deyarli o'zgarmagandek tuyuladi. Ko'p dasturlarda "sifat" (quality) sozlamasi bor. U qancha ma'lumot tashlanishini belgilaydi.

Maslahat: .mp4 — aslida "quti" (konteyner), ichida esa H.264 kabi siqish usuli (kodek) turadi. Bu farqni Audio va video formatlari darsida ko'ramiz. Qaysi rasm formatini qachon tanlashni Rasm formatlari darsida o'rganamiz.

Tekshirib ko'ring: Kod yozilgan ekran rasmini (skrinshot) saqlayapsiz. PNG tanlaysizmi yoki JPEG?

7. Ko'p uchraydigan xatolar

7.1 Telefondagi rasmni to'g'ridan-to'g'ri saytga qo'yish

12 MP, 5 MB lik foto saytda 400 piksel enida ko'rinadi. Brauzer baribir butun 5 MB ni yuklaydi. Sahifa sekin ochiladi, foydalanuvchining mobil trafigi ketadi.

Chrome'dagi sayt tekshiruvchi vosita Lighthouse bunday holatda shunday ogohlantiradi: Properly size images — "rasmlarni to'g'ri o'lchamda bering". Yechim: rasmni kerakli o'lchamga kichraytiring va WebP yoki AVIF ga o'tkazing.

7.2 Logotip yoki matnli rasmni JPEG qilish

JPEG shaffoflikni saqlamaydi: shaffof fon oq yoki qora bo'lib qoladi. Harflar atrofida esa xira dog'lar paydo bo'ladi. Yechim: logotip uchun SVG yoki PNG, skrinshot uchun PNG yoki WebP.

7.3 Kichik rasmni kattalashtirib "sifatini oshirish"

200 piksellik rasmni 1000 piksel qilib cho'zsangiz, yangi detal paydo bo'lmaydi. Rasm shunchaki xira yoki "katak-katak" bo'lib qoladi. Yo'qolgan piksellarni qaytarib bo'lmaydi.

7.4 JPEG'ni qayta-qayta saqlash

Har safar JPEG qayta siqilganda yana ozgina ma'lumot tashlanadi. Telegram'da ko'p marta forward qilingan mem-rasm xira bo'lib ketishi shundan. Yechim: asl faylni saqlab qo'ying va har safar o'shandan ishlang.

7.5 kbit/s va kB/s ni adashtirish

Audio va video tezligi bitda yoziladi: 128 kbit/s. Bu soniyasiga 16 kB, 128 kB emas. Bit va bayt farqini O'lchov birliklari darsidan eslang: 8 ga bo'lamiz.

8. Mashqlar

1-mashq (oson): Hex rangni o'qing

#ff0000 rangida R, G, B nechaga teng va bu qanday rang? Ishora: ff = 255, 00 = 0.

2-mashq (o'rta): Shaffof rasm hajmi

Shaffof fonli 800 × 600 logotip siqilmagan holda necha bayt bo'ladi? Ishora: shaffoflik bor, demak har piksel RGBA — 4 bayt.

3-mashq (qiyin): Qo'shiq va siqish

Malika 3 daqiqalik qo'shiqni yozib oldi: CD sifati, stereo (1 soniyasi 176 400 bayt).

1. Siqilmagan fayl necha MB?
2. MP3 da 128 kbit/s bilan saqlasa-chi? Ishora: 128 kbit/s = soniyasiga 16 000 bayt.
3. MP3 necha barobar kichik?

9. Real ishda

• Sayt tezligi: sahifa hajmining eng katta qismi odatda rasmlar. Frontend dasturchi rasmlarni siqadi, WebP/AVIF ga o'tkazadi va har ekranga mos o'lcham beradi.
• CSS ranglari: #ff8800 va rgb(255 136 0) — siz bu darsda o'qigan RGB. Ranglarni CSS ranglari darsida batafsil ko'ramiz.
• Telegram bot: bot rasmni "photo" sifatida yuborsa, Telegram uni siqadi. "Document" sifatida yuborsa, asl holicha qoladi. Chek yoki hujjat skanini ikkinchi usulda yuborish kerak.
• Backend: foydalanuvchi yuklagan rasmlarni server avtomatik kichraytiradi va siqadi. Video uchun ffmpeg degan vosita ishlatiladi.
• Intervyu savoli: "Lossy va lossless siqish farqi nima? Qaysi biri qachon kerak?"

Xulosa

• Raqamlashtirish — uzluksiz narsani bo'laklarga bo'lib, har bo'lakni son bilan yozish.
• Rasm — piksellar jadvali. Piksel = RGB (3 bayt) yoki RGBA (4 bayt). #ff8800 — shu sonlarning hex yozuvi.
• DPR — telefon bitta "sayt pikseli" uchun nechta haqiqiy piksel ishlatishi. Shuning uchun saytga kattaroq rasm kerak.
• Ovoz — soniyasiga 44 100 marta o'lchangan balandlik. Video — soniyasiga 24–60 ta kadr.
• Lossless (PNG, FLAC, ZIP) hech narsani yo'qotmaydi. Lossy (JPEG, MP3, H.264) sezilmaydigan detallarni tashlab, faylni ancha kichraytiradi.

Keyingi dars: Operatsion tizim nima: kernel, jarayon va oqim — apparat va ma'lumotdan keyin ularni boshqaradigan dasturga o'tamiz: operatsion tizimga.