Rasm formatlari: qachon qaysi biri

Qisqacha: Fotosurat uchun AVIF yoki WebP (zaxira sifatida JPEG), shaffof fonli rasm va skrinshot uchun WebP yoki PNG, logotip va ikonka uchun SVG tanlanadi. Animatsiya uchun GIF emas, video ishlatiladi. Saytga qo'yishdan oldin rasm kerakli o'lchamga kichraytiriladi, siqiladi va ichidagi EXIF ma'lumoti (joylashuv, telefon modeli) tozalanadi.

Bu darsda

• Raster va vektor rasm farqini o'z so'zingiz bilan tushuntira olasiz.
• JPEG, PNG, GIF, WebP, AVIF, SVG va ICO ning har biri qachon kerakligini bilasiz.
• Rasm uchun 3 ta savol berib, to'g'ri formatni tanlay olasiz.
• Squoosh bilan rasmni siqib, SVGO bilan SVG faylni tozalay olasiz.
• Fotosurat ichidagi EXIF ma'lumoti qanday xavfli ekanini va uni qanday o'chirishni bilasiz.

Oldin bilishingiz kerak: Rasm, ovoz va video raqamli ko'rinishda, Matnli va binar fayllar, XML va uning vorislari.

1. Nega bu kerak?

Malika uyda pishiriq tayyorlab sotadi va o'zi uchun kichik sayt ochmoqchi. Telefonida 20 ta chiroyli tort surati bor. Har biri 4 MB atrofida. U hammasini saytga shundayligicha qo'ydi.

Natija: sahifa 80 MB bo'ldi. Mijoz mobil internetda sahifani ochadi — rasmlar bittalab, sekin chiqadi. Trafik ham tugab qoladi. Ko'p odam kutmasdan chiqib ketadi. Google tadqiqotiga ko'ra (2016), mobil sahifa 3 soniyadan ko'proq yuklansa, tashrif buyuruvchilarning yarmidan ko'pi uni tashlab ketadi.

Shu 20 ta rasmni to'g'ri formatga o'tkazib, kerakli o'lchamga kichraytirsa, sahifa taxminan 2 MB bo'ladi. Ko'rinishda farq deyarli sezilmaydi. Bu darsning oxirida siz ham shuni qila olasiz.

Rasm, ovoz va video darsidan eslang: rasm — piksellar jadvali, siqish esa uni kichraytiradi. Lossless siqish hech narsani yo'qotmaydi, lossy esa ko'z sezmaydigan detallarni tashlaydi. Endi shu bilimni amaliyotga aylantiramiz: qaysi format qaysi siqishni ishlatadi va qachon kerak.

2. Raster va vektor

Kompyuterdagi har qanday rasm ikki usuldan biri bilan saqlanadi.

2.1 Raster — piksellar jadvali

Raster rasm (raster image) — har bir pikselning rangi alohida yozilgan rasm. Rasm, ovoz va video darsidagi katakli daftarni eslang: har katak — bitta rang.

Raster rasmni kattalashtirsangiz, yangi detal paydo bo'lmaydi. Kataklar shunchaki kattalashadi va rasm "katak-katak" yoki xira bo'lib qoladi.

Raster (kichik)     Raster (5 barobar kattalashtirilgan)
 ██░░                ██████████░░░░░░░░░░
 ██░░                ██████████░░░░░░░░░░
                     (qirralar zinapoya bo'lib qoladi)

Fotosuratlar doim raster bo'ladi, chunki kamera har nuqtaning rangini o'lchaydi. Raster formatlar: JPEG, PNG, GIF, WebP, AVIF.

2.2 Vektor — chizish ko'rsatmasi

Vektor rasm (vector image) — piksellar emas, shakllarni chizish ko'rsatmasi saqlangan rasm.

Hayotdan o'xshatish. Do'stingizga telefonda rasm tushuntiryapsiz: "Varaq o'rtasiga doira chiz, kattaligi varaqning deyarli hammasi, ichini to'q sariqqa bo'ya". Do'stingiz buni kichik daftarga ham, katta devorga ham chiza oladi. Ikkalasida ham qirralar tiniq chiqadi. Chunki siz rasmni emas, uni qanday chizishni yubordingiz.

Vebdagi vektor format — SVG. Uning ichi — oddiy matn, aniqrog'i XML:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

Bu yerda circle — "doira chiz", cx va cy — markazi qayerda, r — radiusi, fill — ichining rangi. Brauzer bu ko'rsatmani o'qib, ekran o'lchamiga mos qilib chizadi. Shuning uchun SVG telefonda ham, katta televizorda ham tiniq.

Lekin vektor fotosurat uchun yaramaydi. Yuzdagi har bir soya va har bir soch tolasini "doira" va "chiziq" bilan yozib bo'lmaydi.

Tekshirib ko'ring: Kafe logotipi saytning tepasida kichkina, reklama bannerida esa juda katta ko'rinishi kerak. Raster tanlaysizmi yoki vektor?

3. Formatni tanlash: uchta savol

Formatlarni birma-bir o'rganishdan oldin, asosiy yo'lni ko'ramiz. Rasmga qarab o'zingizga 3 ta savol bering:

1. Rasm harakatlanadimi? Ha bo'lsa — bu aslida video.
2. Bu logotip, ikonka yoki oddiy chizmami? Ha bo'lsa — SVG.
3. Bu fotosuratmi? Ha bo'lsa — AVIF yoki WebP. Yo'q bo'lsa (skrinshot, shaffof fonli rasm) — WebP yoki PNG.

flowchart TD
  A["Saytga rasm qo'shyapman"] --> B{"Harakatlanadimi?"}
  B -->|Ha| C["Video: MP4 yoki WebM, GIF emas"]
  B -->|Yo'q| D{"Logo, ikonka yoki oddiy chizmami?"}
  D -->|Ha| E["SVG"]
  D -->|Yo'q| F{"Fotosuratmi?"}
  F -->|Ha| G["AVIF yoki WebP, zaxira: JPEG"]
  F -->|Yo'q| H["Skrinshot, shaffof rasm: WebP yoki PNG"]

Endi har bir formatni alohida ko'ramiz va nega aynan shunday tanlanishini tushunamiz.

4. Eski, lekin hamon kerakli formatlar

4.1 JPEG — fotosuratlar uchun

JPEG (.jpg yoki .jpeg) — 1992-yildan beri ishlatiladigan fotosurat formati. U lossy siqadi: ko'z yomon ajratadigan yaqin rang tuslarini birlashtiradi.

JPEG saqlayotganda dasturlar sifat (quality) so'raydi: 0 dan 100 gacha. Son qancha kichik bo'lsa, shuncha ko'p ma'lumot tashlanadi va fayl kichrayadi. Vebda odatda 75–85 atrofi tanlanadi: fayl ancha kichik, farq esa ko'zga deyarli ko'rinmaydi.

JPEG'ning ikki kamchiligi bor:

• Shaffoflik yo'q. Shaffof fon oq yoki qora bo'lib qoladi.
• Keskin qirralarni buzadi. Matn va chiziqlar atrofida xira "dog'lar" paydo bo'ladi.

Bugun JPEG asosan zaxira format: hamma dastur, hamma brauzer, hatto eng eski telefon ham uni ochadi.

4.2 PNG — aniq va shaffof

PNG (.png) — lossless format. U rasmni bit-bitigacha saqlaydi va shaffoflikni (alpha kanalni) qo'llaydi.

PNG qachon yaxshi:

• Skrinshot — matn va tugmalar tiniq qoladi.
• Shaffof fonli rasm — masalan, oq fonsiz mahsulot surati.
• Tekis rangli chizma — grafik, sxema.

PNG qachon yomon: fotosuratda. Fotoda har piksel qo'shnisidan ozgina farq qiladi, lossless siqish bunday rasmni yaxshi kichraytira olmaydi. «Sifat va hajm balansi» bo'limida real o'lchovni ko'rasiz: bitta foto PNG'da JPEG'dan 9 barobar og'ir chiqadi.

4.3 GIF — harakatlanuvchi rasmlar bobosi

GIF (.gif) — 1987-yilda yaratilgan format. Uning mashhurligi bitta sababdan: GIF bir nechta kadrni ketma-ket ko'rsatib, animatsiya qila oladi. Internetdagi mem-animatsiyalarning ko'pi shu nom bilan ataladi.

Lekin GIF juda eski:

• Bitta rasmda ko'pi bilan 256 ta rang. Fotosurat unda donador va "chiziqli" ko'rinadi.
• Animatsiyani yomon siqadi: har kadrni deyarli to'liq saqlaydi.

Shuning uchun bugun saytga animatsiya kerak bo'lsa, GIF emas, ovozsiz qisqa video qo'yiladi. Google'ning web.dev qo'llanmasidagi misolda 3,7 MB lik GIF MP4 formatida 551 KB, WebM formatida esa 341 KB bo'lgan — 7–11 barobar kichik. Video formatlarini keyingi darsda ko'ramiz.

Maslahat: Telegram'dagi "GIF" bo'limini ochib ko'ring. U yerdagi animatsiyalarning ko'pi aslida MP4 video. Telegram ularni GIF deb atashda davom etadi, chunki odamlar bu nomga o'rganib qolgan.

Tekshirib ko'ring: Nega do'kon mahsuloti fotosuratini GIF'da saqlash yomon fikr?

5. Zamonaviy formatlar: WebP va AVIF

5.1 WebP — hamma narsani biladigan format

WebP (.webp) — Google 2010-yilda yaratgan format. U avvalgi uchta formatning ishini bitta o'zi qiladi:

• lossy siqish (JPEG kabi) — fotosurat uchun;
• lossless siqish (PNG kabi) — skrinshot uchun;
• shaffoflik (PNG kabi);
• animatsiya (GIF kabi).

Google o'lchovlariga ko'ra, WebP bir xil sifatda JPEG'dan taxminan 25–34%, PNG'dan esa taxminan 26% kichik. Barcha asosiy brauzerlar (Chrome, Firefox, Safari, Edge) 2020-yildan beri WebP'ni ko'rsatadi. Shuning uchun 2026 holatiga uni bemalol ishlatsa bo'ladi.

5.2 AVIF — eng kuchli siqish

AVIF (.avif) — 2019-yilda paydo bo'lgan format. U AV1 degan video siqish usuliga (kodekka) asoslangan. Fotosuratlarni ko'pincha JPEG'dan taxminan 2 barobar kichik qiladi, shaffoflik va animatsiyani ham biladi.

2026 holatiga AVIF'ni Chrome 85+, Firefox 93+, Safari 16.4+ (iPhone'da iOS 16+) va Edge 121+ ko'rsatadi. Bu dunyodagi brauzerlarning taxminan 95 foizi.

AVIF'ning ikki kamchiligi bor:

• Saqlash sekin. Katta rasmni AVIF'ga o'tkazish WebP'ga qaraganda ancha ko'p vaqt oladi.
• Juda eski qurilmalar uni ochmaydi. Shuning uchun AVIF yonida odatda WebP yoki JPEG zaxira nusxasi ham beriladi.

Brauzerga "AVIF'ni ocholmasang, JPEG'ni ol" deyish uchun HTML'da picture degan teg bor. Uni responsive rasmlar darsida o'rganamiz — hozir bilish shart emas.

6. Sifat va hajm balansi

Endi eng qiziq joy: raqamlar. Bitta qulupnay fotosuratini oldik, uni 1200 × 1200 pikselga kichraytirdik va turli formatlarda saqladik. Quyidagi o'lchamlar haqiqiy:

Nimani ko'ryapmiz?

• PNG fotosuratni atigi 2 barobar kichraytirdi. JPEG sifat 80 — 20 barobar.
• JPEG'da sifatni 95 dan 80 ga tushirish hajmni 2 barobar kamaytirdi, ko'zga esa deyarli ta'sir qilmadi.
• AVIF JPEG'dan taxminan 3 barobar kichik chiqdi.

Diqqat: Har formatning "sifat" shkalasi o'ziga xos. AVIF'dagi 50 JPEG'dagi 50 ga teng emas. Raqamga emas, ekrandagi natijaga qarang.

6.1 O'lcham ham hajm

Format — yarim ish. Ikkinchi yarmi — rasmning o'lchami (eni × bo'yi pikselda).

Telefon kamerasi 4000 × 3000 piksel rasm beradi. Saytda esa u ko'pincha 1200 piksel enidan katta ko'rinmaydi. Ortiqcha piksellar baribir yuklanadi, lekin hech kim ularni ko'rmaydi.

To'liq yechilgan misol — piksellar sonini solishtiramiz:

1. Asl rasm: 4000 × 3000 = 12 000 000 piksel.
2. Kichraytirilgan rasm: 1200 × 900 = 1 080 000 piksel.
3. 12 000 000 ÷ 1 080 000 ≈ 11. Demak ma'lumot taxminan 11 barobar kam.

Endi o'zingiz. Rasmni 800 × 600 ga kichraytirsak, piksellar soni (bo'sh joysiz yozing): . Bu 12 millionga nisbatan 25 barobar kam.

Maslahat: Amaliy mo'ljal: sahifadagi asosiy katta rasm 200 KB dan, mahsulot kartochkasidagi kichik rasm 100 KB dan oshmasin. Bu qat'iy qoida emas, lekin yaxshi boshlanish nuqtasi.

Rasm, ovoz va video darsidagi DPR'ni eslang: telefon ekrani 2–3 barobar zich. Shuning uchun 400 piksel enida ko'rinadigan rasm uchun 800–1200 piksellik fayl kerak bo'ladi. Har ekranga mos o'lcham berishni srcset darsida o'rganamiz.

Tekshirib ko'ring: Jasur logotipini SVG emas, PNG qilib qo'ydi. Rasm 5 KB. Keyin u saytidagi 3 MB lik fotoni AVIF'ga o'tkazib, 300 KB qildi. Qaysi ish sahifani ko'proq tezlashtirdi?

7. SVG va ICO — ikonkalar olami

7.1 SVG qachon kerak

SVG'ni 2-bo'limda ko'rdik. U quyidagilar uchun eng yaxshi tanlov:

• logotip;
• ikonkalar (savat, qidiruv, menyu belgilari);
• oddiy diagramma va chizmalar.

SVG matn bo'lgani uchun uni istalgan matn muharririda ochib, rangini o'zgartirish mumkin. Oddiy ikonka SVG'da bor-yo'g'i 0,5–2 KB bo'ladi.

SVG fotosurat va murakkab rasmlar uchun yaramaydi. Minglab shakldan iborat SVG PNG'dan ham og'ir va sekin chiziladi.

7.2 ICO va favicon

Favicon — brauzer tabida sayt nomi yonidagi kichkina ikonka. Uning an'anaviy formati — ICO (.ico). ICO — bir nechta o'lchamdagi (16 × 16, 32 × 32, 48 × 48) rasmni bitta faylga yig'adigan "quti". Brauzer o'ziga keraklisini tanlaydi.

2026 holatiga zamonaviy brauzerlar SVG faviconni ham ko'rsatadi: Chrome va Edge 80+, Firefox 41+, Safari esa 26-versiyadan boshlab. Shunga qaramay, eski qurilmalar uchun favicon.ico hamon zaxira sifatida qo'yiladi. Faviconlarni to'liq favicon darsida sozlaymiz.

8. Uchrab qoladigan boshqa formatlar

Bu formatlarni saytga qo'ymaysiz, lekin ular bilan albatta to'qnashasiz:

• HEIC (.heic) — iPhone suratlarining standart formati. JPEG'dan kichik, lekin 2026 holatiga uni faqat Safari 17+ ko'rsatadi. Chrome, Firefox va Edge ko'rsatmaydi. Foydalanuvchi iPhone'dan HEIC yuklasa, uni JPEG yoki WebP'ga o'tkazish kerak.
• JPEG XL (.jxl) — JPEG'ning yangi, kuchli vorisi. Safari 17+ uni ko'rsatadi. Chrome uni 2022-yilda olib tashlagan edi, lekin 2026-yil boshida qaytardi — hozircha sozlamalarda yashirin holda. Firefox va Chrome uni yaqin versiyalarda hamma uchun yoqishni rejalashtirgan. Hozircha saytingizda asosiy format sifatida ishlatmang, faqat kuzatib boring.
• BMP va TIFF — siqilmagan yoki kam siqilgan eski formatlar. Skaner va bosmaxonada uchraydi, vebda — yo'q.

9. Vositalar: Squoosh va SVGO

9.1 Squoosh — brauzerdagi siqish vositasi

Squoosh — Google jamoasi yaratgan bepul vosita. U squoosh.app manzilida ochiladi va hech narsa o'rnatish talab qilmaydi. Rasm serverga yuborilmaydi, hammasi brauzeringiz ichida bajariladi.

Qanday ishlatiladi:

1. squoosh.app ni oching va rasmni oynaga sudrab tashlang.
2. O'ng tomondagi Resize (o'lchamni o'zgartirish) bo'limida enini, masalan, 1200 qiling.
3. Compress (siqish) ro'yxatidan WebP yoki AVIF'ni tanlang.
4. Quality (sifat) slayderini suring. Ekrandagi chiziqni surib, chapda asl rasmni, o'ngda siqilganini solishtiring.
5. Pastda yangi hajm yoziladi. Ko'zingiz farqni sezmaydigan eng kichik sifatni tanlab, yuklab oling.

Squoosh rasmni qaytadan saqlagani uchun EXIF ma'lumoti ham yangi faylga o'tmaydi. Bu bizga 10-bo'limda kerak bo'ladi.

9.2 SVGO — SVG tozalagich

Figma, Illustrator yoki Inkscape kabi dasturlar SVG saqlaganda ichiga ko'p keraksiz narsa qo'shadi: dastur nomi, izohlar, bo'sh guruhlar, 50.000000 kabi uzun sonlar. SVGO (SVG Optimizer) shularni o'chiradi, rasm esa o'zgarmaydi. 2026 holatiga uning joriy versiyasi — SVGO 4.

SVGO terminalda ishlaydi va Node.js talab qiladi. Node.js — JavaScript'ni brauzerdan tashqarida ishga tushiradigan dastur. Uni Node.js darsida o'rnatamiz, hozir bilish shart emas. npx bilan band portlar darsida tanishgansiz: u paketni o'rnatmasdan bir martalik ishga tushiradi.

# logo.svg ni tozalab, logo.min.svg ga yozish
npx svgo logo.svg -o logo.min.svg

Terminalda:

logo.svg:
Done in 17 ms!
0.605 KiB - 72.6% = 0.166 KiB

Bu natija haqiqiy. Tarjimasi: "17 millisekundda tayyor. 0,605 KB edi, 72,6% kamaydi, 0,166 KB bo'ldi". Rasm esa aynan o'sha-o'sha doira.

Tekshirib ko'ring: SVGO fotosuratni (JPEG) siqa oladimi?

10. EXIF va maxfiylik

10.1 Fotosurat ichidagi yashirin ma'lumot

Telefon rasm olganda fayl ichiga piksellardan tashqari qo'shimcha ma'lumot ham yozadi. U EXIF (Exchangeable Image File Format) deyiladi. Ichida nima bo'lishi mumkin:

• telefon yoki kamera modeli (masalan, iPhone 13);
• suratga olingan sana va soat;
• GPS koordinatalari — rasm aynan qayerda olingani (joylashuv yoqilgan bo'lsa).

Buni o'zingiz ko'rishingiz mumkin. Matnli va binar fayllar darsidagi file buyrug'ini eslang. Git Bash'da telefondan olingan rasmga ishlatib ko'ring:

file IMG_2045.jpg

Natija taxminan shunday bo'ladi (bir qatorda chiqadi, bu yerda qisqartirib bo'ldik):

IMG_2045.jpg: JPEG image data, Exif Standard: [...
  manufacturer=Apple, model=iPhone 13,
  datetime=2026:09:20 18:45:12, GPS-Data], ... 4000x3000

manufacturer — ishlab chiqaruvchi, model — telefon modeli, datetime — sana va vaqt. GPS-Data esa "ichida joylashuv bor" degani.

10.2 Nega bu xavfli

Ali uyida televizor suratini olib, e'lonlar saytiga qo'ydi. Agar sayt EXIF'ni tozalamasa, istalgan odam rasmni yuklab olib, GPS koordinatalarini xaritaga qo'yadi. Natijada Alining uyi aynan qayerdaligi, qimmat narsa borligi va surat qachon olingani ma'lum bo'ladi.

Messenjerlarda ham farq bor. Telegram'da rasmni oddiy "rasm" sifatida yuborsangiz, u siqiladi va EXIF odatda o'chadi. "Fayl" sifatida yuborsangiz, asl fayl ko'pincha barcha EXIF bilan, GPS bilan birga yetib boradi. Natija telefon va ilova versiyasiga qarab farq qilishi mumkin, shuning uchun bunga tayanmang.

10.3 EXIF'ni qanday o'chirish kerak

• Windows'da: faylni o'ng tugma bilan bosing → Properties (Xususiyatlar) → Details (Tafsilotlar) → pastdagi Remove Properties and Personal Information ("xususiyatlar va shaxsiy ma'lumotlarni o'chirish").
• Squoosh orqali: rasmni qayta saqlaganda EXIF yangi faylga o'tmaydi.
• Telefonda: kamera sozlamalarida joylashuvni (Location) o'chirib qo'ying. Shunda GPS umuman yozilmaydi.
• Saytingizda: foydalanuvchi yuklagan har bir rasmni server qayta saqlab, EXIF'ni o'chirishi kerak. Buni server dasturlash (backend) qismida o'rganamiz.

Tekshirib ko'ring: Malika buyurtmachiga tortning asl sifatli suratini Telegram'da "fayl" qilib yubormoqchi. Surat uyida olingan. Nima maslahat berasiz?

11. Hujumchi nigohi

Rasmlar oddiy ko'rinadi, lekin hujumchi ulardan ikki usulda foydalanadi:

1. EXIF orqali kuzatish. Hujumchi saytdagi profil yoki e'lon rasmlarini yuklab oladi va GPS'dan odamning uyini, ish joyini topadi. Himoya: server har bir yuklangan rasmni qayta saqlaydi va EXIF'ni tashlaydi.
2. SVG ichidagi kod. SVG — matn, uning ichiga script tegi bilan dastur kodi ham yozish mumkin. Agar sayt foydalanuvchi yuklagan SVG'ni tekshirmasdan ko'rsatsa, bu kod boshqa odamlarning brauzerida ishlab ketishi mumkin. Himoya: foydalanuvchidan SVG qabul qilmaslik yoki uni maxsus tozalab, alohida manzildan berish.

Bu hujumlarni fayl yuklash va xavfsizlik darslarida chuqurroq ko'ramiz. Hozir bitta qoidani eslab qoling: begona odam yuklagan rasmga ishonmang.

12. Ko'p uchraydigan xatolar

12.1 Katta rasmni faqat sahifada kichik ko'rsatish

4000 × 3000 pikselli 5 MB rasmni sahifaga qo'yib, uni 300 piksel enida ko'rsatish — keng tarqalgan xato. Buni odatda CSS (sahifa ko'rinishini boshqaradigan til, uni alohida qismda o'rganamiz) bilan qilishadi. Ko'rinishda rasm kichik, lekin brauzer baribir 5 MB ni to'liq yuklaydi.

Chrome'dagi sayt tekshiruvchi Lighthouse (uni DevTools darsida ko'ramiz) bunday holatda shunday ogohlantiradi:

Improve image delivery

Tarjimasi: "rasm yetkazishni yaxshilang". Bu ogohlantirish ortiqcha katta o'lchamni, eski formatni, kuchsiz siqishni va og'ir GIF'larni birga tekshiradi. Yechim: rasmni kerakli o'lchamga kichraytiring va WebP yoki AVIF'ga o'tkazing.

12.2 Kengaytmani o'zgartirib, "formatni almashtirish"

Jasur logo.png fayli nomini logo.webp qilib o'zgartirdi va "endi WebP bo'ldi" deb o'yladi. Matnli va binar fayllar darsidan eslang: kengaytma — faqat nom. file buyrug'i haqiqatni ko'rsatadi:

logo.webp: PNG image data, 800 x 600, 8-bit/color RGBA

Ichida hamon PNG. Hajm ham o'zgarmadi. Yechim: formatni faqat Squoosh kabi vosita bilan o'zgartiring — u rasmni qaytadan saqlaydi.

12.3 Kichik PNG ikonkani telefonda xira ko'rish

24 × 24 pikselli PNG ikonka kompyuterda yaxshi ko'rinadi. DPR = 3 bo'lgan telefonda esa brauzer uni 72 × 72 ga cho'zadi va ikonka xiralashadi. Yechim: ikonka va logotip uchun SVG ishlating — u har ekranda qaytadan tiniq chiziladi.

12.4 Animatsiya uchun GIF

5 soniyalik ekran yozuvini GIF qilsangiz, u bir necha megabayt bo'lishi mumkin. Yechim: qisqa ovozsiz MP4 yoki WebM video qo'ying. U bir necha barobar kichik va ranglari ham to'liq.

12.5 iPhone'dan kelgan HEIC rasm ko'rinmaydi

Foydalanuvchi iPhone'dan .heic rasm yukladi. Safari'da u ko'rinadi, Chrome'da esa rasm o'rnida buzilgan belgi chiqadi. Yechim: HEIC'ni saytga qo'yishdan oldin JPEG, WebP yoki AVIF'ga o'tkazing.

12.6 EXIF o'chirilgach, rasm yonboshlab qoldi

Telefon rasmni ba'zan "yotiq" saqlaydi va EXIF'ga "90 gradus burib ko'rsat" deb yozib qo'yadi. Ba'zi eski vositalar EXIF'ni o'chirganda shu belgini ham o'chiradi — rasm yonboshlab qoladi. Yechim: avval rasmni to'g'ri holatga burib saqlang, keyin EXIF'ni o'chiring. Zamonaviy brauzer vositalari (masalan, Squoosh) odatda rasmni to'g'ri holatda saqlaydi.

13. Mashqlar

1-mashq (oson): Formatni tanlang

Har vaziyat uchun eng mos formatni yozing. Ishora: 3-bo'limdagi uchta savolni bering.

1. Kompaniya logotipi — oq fonda ham, qora fonda ham tiniq turishi kerak.
2. Sotuvdagi divanning fotosurati.
3. Xato xabari ko'ringan dastur oynasining skrinshoti.
4. Tugma bosilganda aylanadigan 3 soniyalik animatsiya.
5. Brauzer tabidagi sayt ikonkasi.

2-mashq (o'rta): SVG — bu matn

1. Blocknot (Notepad) yoki VS Code'da belgi.svg faylini yarating va quyidagi kodni yozing:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="green" />
</svg>

2. Faylni brauzerda oching. Ctrl va + bilan 500% gacha kattalashtiring. Qirralar qanday?
3. Endi faylda fill="green" ni fill="red" ga o'zgartirib saqlang va sahifani yangilang (F5).

Ishora: rect — to'rtburchak, x va y — chap yuqori burchagi qayerda, width va height — eni va bo'yi.

3-mashq (qiyin): Malikaning saytini tezlashtiring

Malikaning saytida 20 ta fotosurat bor. Har biri: JPEG, 4000 × 3000 piksel, 4 MB. Saytda har rasm 600 piksel enida ko'rinadi, telefonlarda DPR = 2.

1. Hozir sahifadagi rasmlar jami necha MB?
2. Rasm enini necha pikselga kichraytirish kerak? Ishora: 600 × DPR.
3. Kichraytirib, WebP'ga o'tkazilganda har rasm taxminan 100 KB bo'ldi. Jami necha MB?
4. 10 Mbit/s mobil internetda ikkala holat necha soniyada yuklanadi? Ishora: O'lchov birliklari darsidan — 1 bayt = 8 bit.
5. Yana nima qilish kerak? (Kamida bitta maxfiylik ishi.)

14. Real ishda

• Frontend dasturchi har bir loyihada rasmlarni tayyorlaydi: o'lchamini to'g'rilaydi, WebP yoki AVIF'ga o'tkazadi, ikonkalarni SVG qiladi. Katta loyihalarda buni maxsus dasturlar avtomatik bajaradi — ularni keyingi qismlarda ko'ramiz.
• Dizayner bilan ishlash: Figma'dan ikonka SVG qilib olinadi va SVGO'dan o'tkaziladi.
• Backend dasturchi foydalanuvchi yuklagan rasmlarni kichraytiradi, formatini o'zgartiradi va EXIF'ni o'chiradi.
• Sayt tezligi: Google sahifa tezligini qidiruv natijalarida hisobga oladi. Rasmlar ko'pincha sahifaning eng og'ir qismi, shuning uchun ularni to'g'ri tayyorlash eng oson tezlashtirish usuli.
• Intervyu savoli: "Logotip uchun qaysi formatni tanlaysiz va nega?" yoki "WebP va AVIF'ning JPEG'dan afzalligi nimada?"

Xulosa

• Raster — piksellar jadvali (foto uchun), vektor — chizish ko'rsatmasi (logo va ikonka uchun).
• Foto: AVIF yoki WebP, zaxira JPEG. Skrinshot va shaffof rasm: WebP yoki PNG. Logo va ikonka: SVG.
• Animatsiya uchun GIF emas, qisqa video. Favicon: SVG va zaxira favicon.ico.
• Hajmni ikki narsa kamaytiradi: to'g'ri format va to'g'ri o'lcham. Sifat 75–85 odatda yetarli.
• Squoosh — rasm siqish uchun, SVGO — SVG tozalash uchun.
• Fotosuratdagi EXIF uyingiz manzilini oshkor qilishi mumkin — rasmni ommaga chiqarishdan oldin o'chiring.

Keyingi dars: Audio va video formatlari — animatsiya uchun GIF o'rniga qo'yiladigan MP4 va WebM ichida nima borligini, kodek va bitrate nima ekanini o'rganamiz.

Manbalar

• web.dev: Choose the right image format
• Google: WebP haqida
• web.dev: Replace animated GIFs with video
• Can I use: AVIF, JPEG XL, HEIF
• Squoosh va SVGO