# Sayt sekinlashmasligi uchun rasmlarni qanday tayyorlash kerak

Источник / Source: https://picwin.co/uz/blog/sayt-uchun-tez-rasmlar
Язык / Language: uz
Рубрика / Topic: Texnologiyalar
Автор / Author: Picwin tahririyati
Опубликовано / Published: 2026-03-24T00:00:00.000Z
Обновлено / Updated: 2026-09-03T11:17:26.468Z
Слов / Words: 1316 · Чтение / Reading: 7 min
Обложка / Cover: https://picwin.co/api/picwin/blog-images/aa8374bf7dbc8d83a6d69ef8a59b6a681e1c13c66039fa8e98a8ed33a109e1fc.webp
Переводы / Translations: en: https://picwin.co/en/blog/fast-images-for-websites, kk: https://picwin.co/kk/blog/sait-ushin-jyldam-suretter, pt: https://picwin.co/pt/blog/imagens-rapidas-para-sites, ru: https://picwin.co/blog/bystrye-kartinki-dlya-sayta

Rasmlar aksariyat sahifalarning eng og‘ir qismi bo‘lib, sayt Core Web Vitals mezonlariga sig‘ishini aynan ular belgilaydi. Rasm vazni va kerakli o‘lchamni hisoblashni, eng katta samara beradigan beshta belgilash qatorini tushuntiramiz.

---

**Qisqacha**

Rasm ko‘rsatiladigan o‘lchamda, zamonaviy formatda va belgilashda o‘lchamlari
ko‘rsatilgan holda kelishi kerak. Mo‘ljal: birinchi ekrandagi asosiy rasm
200 KB gacha, qolganlari 100 KB gacha. Yaxshi yuklanish chegarasi — sahifadagi
eng katta element paydo bo‘lishigacha 2.5 soniya.

Og‘ir rasm mavhum «tezlik»ka emas, muayyan soniyaga zarar qiladi: aynan o‘sha
paytda tashrifchi sahifaning asosiy rasmini ko‘radi. Odatda u eng katta element
bo‘ladi, shu sababli sahifa belgilangan chegaraga sig‘ish-sig‘masligini ham u
hal qiladi.

## Nega sahifa tezligini rasmlar belgilaydi?

Chunki ular deyarli doim sahifadagi eng og‘ir va eng ko‘zga tashlanadigan
elementlardir. [Core Web Vitals](https://web.dev/articles/vitals) jamlanmasida
uchta ko‘rsatkich bor; rasmlar ulardan ikkitasiga bevosita ta’sir qiladi:

- **LCP** — eng katta element chizilguncha o‘tgan vaqt. **2.5 soniya**gacha
bo‘lgan natija yaxshi hisoblanadi;

- **CLS** — maketning yig‘ma siljishi. **0.1** va undan kam qiymat yaxshi.

Ikkala chegara ham yuklanishlarning **75-persentili** bo‘yicha o‘lchanadi, ya’ni
tashriflarning to‘rtdan uch qismi me’yorga sig‘ishi kerak — faqat noutbukingizda
emas, sekin telefonda ham.

## Rasmning vazni qancha bo‘lishi mumkin?

Hisni emas, kanal tezligini asos qiling. 5 Mbit/s tezlik — 5 000 000 ÷ 8 =
soniyasiga 625 000 bayt, taxminan 610 KB/s. Demak, 1 MB rasm o‘quvchiga qariyb
1.7 soniyada yetib boradi; bunda ulanishni o‘rnatish va sahifadagi boshqa fayllar
bilan raqobat hisobga olinmagan.

Shundan oddiy arifmetika bilan tekshiriladigan budjet kelib chiqadi.

Sahifadagi vazifasi
Vazn mo‘ljali

Birinchi ekrandagi asosiy rasm
200 KB gacha

Matndagi illyustratsiya
100 KB gacha

Katalog to‘ridagi prevyu
40 KB gacha

Ikonka, avatar
10 KB gacha

Megabaytlar qayerdan kelishini esda tutish foydali. Har pikselga uch baytdan
to‘g‘ri keladigan siqilmagan 1920 × 1080 kadr — 1920 × 1080 × 3 = 6.2 MB.
Bundan kichik qiymatning barchasi siqish natijasi, 6 MB bilan 150 KB orasidagi
farq esa fayl qanday saqlanganiga bog‘liq. Format tanlash
[JPEG, PNG, WebP va AVIF haqidagi maqolada](/uz/blog/tasvir-formatlari-jpeg-png-webp-avif)
batafsil yoritilgan.

## Faylni qanday o‘lchamda berish kerak?

Rasm ko‘rsatiladigan o‘lchamni ekran zichligiga ko‘paytirgan qiymatda — undan
katta emas. Eni 400 CSS-piksel bo‘lgan joydagi 4000 pikselli fayl yaxshiroq
ko‘rinmaydi: brauzer uni baribir kichraytirib, trafik va xotirani sarflaydi.

Amaliy chegara — ikki karra zichlik. 2× bilan 3× orasidagi farq deyarli
ko‘rinmaydi, maydon va u bilan birga vazn esa 2.25 marta oshadi. Slot eni va
zichlikni hisoblash [tasvir o‘lchami va DPI haqidagi maqolada](/uz/blog/tasvir-olchami-va-dpi)
batafsil tushuntirilgan.

Bitta slot uchun odatda bir nechta fayl kerak: telefon va katta monitor bir
rasmni juda turli enlarda ko‘rsatadi. Belgilashdagi `srcset` va `sizes` shuning
uchun kerak — brauzer slot eni va ekran zichligini bilib, mos faylni o‘zi tanlaydi.

![Ikki panelda og‘ir, belgilanmagan rasm va tayyorlangan yengil variant taqqoslangan](/api/picwin/blog-images/051aa477f533f245bc9359679e07c7d49a710bf355cd62153067cf32f995de6d.webp)

Tayyorlash bitta emas, to‘rtta qarordir: o‘lcham, format, belgilash va kesh.

## Sayt uchun rasmni qanday tayyorlash kerak?

-

### Kerakli nisbat bo‘yicha qirqing

Sahifadagi kadrga tushmaydigan piksellar faylda ham bo‘lmasligi kerak.

-

### Slot enini 2 ga ko‘paytirib, shu o‘lchamgacha kichraytiring

Oraliq o‘lchamlar zanjiri orqali emas, asl nusxadan bir marta kichraytiring.

-

### Zamonaviy formatda saqlang

JPEG zaxirasi bilan WebP yoki AVIF ishlating. Shaffoflik faqat kerak joyda bo‘lsin.

-

### Ikkinchi va uchinchi o‘lchamni yarating

Masalan, eni 400, 800 va 1600 piksel bo‘lgan fayllarni `srcset`da sanab chiqing.

-

### Belgilashda o‘lchamlarni ko‘rsating

`width` va `height` atributlari yoki uslublardagi `aspect-ratio` brauzerga
yuklanishdan oldin joy ajratish imkonini beradi.

-

### Ustuvorliklarni belgilang

Asosiy rasmga `fetchpriority="high"`, birinchi ekrandan pastdagilarga esa
`loading="lazy"` bering.

-

### Sekin ulanishda tekshiring

Dasturchi vositalarida tezlik cheklovini yoqing va tashrifchi dastlabki ikki
soniyada nimani ko‘rishini kuzating.

## srcset uchun nechta o‘lcham saqlash kerak?

Odatda uch-to‘rtta pog‘ona yetadi. Qo‘shni o‘lchamlar orasini taxminan bir yarim
baravar qilish ma’qul: 400, 600, 900, 1400 piksel. Zichroq pog‘onalar trafikni
deyarli tejamasdan — vazn maydon kabi o‘sadi, 800 va 900 piksel orasidagi farq
baytlarning qariyb 25% ini tashkil qiladi — fayllarni tayyorlash va saqlash
ishlarini ko‘paytiradi.

Pog‘onalarni dumaloq sonlardan emas, maketdan tanlang. Telefon, planshet va keng
monitordagi slot enini ko‘ring va zich ekranlar uchun har birini ikki baravar
qilib, shu uch qiymatni oling. `sizes` atributi shart: usiz brauzer rasm oyna
enini to‘liq egallaydi deb hisoblaydi va telefonda zaruridan katta faylni yuklaydi.

## Aynan nima sekinlashtirayotganini qanday aniqlash mumkin?

Taxmin bilan emas, o‘lchash bilan. Dasturchi vositalarida tarmoq bo‘limini
oching, so‘rovlarni hajmi bo‘yicha saralang va dastlabki beshta qatorni ko‘ring
— aksariyat hollarda ular rasmlar bo‘ladi. Keyin tezlikni cheklab, sahifani
qayta yuklang: qaysi fayl asosiy ekran ko‘rinishini kechiktirayotgani bilinadi.

Kelgan fayl o‘lchami bilan u ko‘rsatilayotgan o‘lcham orasidagi farqni ham
tekshiring. Brauzer element yordamchi oynasida ikkala sonni ko‘rsatadi. Fayl
slotdan ikki martadan ham keng bo‘lsa, ortiqcha vazn topildi.

## Maketning sakrashini qanday to‘xtatish mumkin?

O‘lchamlarni ko‘rsatish kerak. Brauzer rasm nisbatini bilmaguncha unga nol
balandlik ajratadi, yuklangandan keyin esa sahifani kengaytiradi — matn aynan
o‘qish boshlangan paytda pastga siljiydi. Bu maket siljishi bo‘lib, CLSda
hisoblanadi.

Buni bir qator tuzatadi: `img` tegidagi faylning haqiqiy nisbatlariga mos
`width` va `height` atributlari. Zamonaviy brauzerlar ulardan tomonlar nisbatini
chiqaradi va uslubda en foiz bilan berilgan bo‘lsa ham joyni saqlab turadi.

Kechiktirib yuklash hamma narsa uchun emas

Birinchi ekrandagi asosiy rasmga `loading="lazy"` berish sahifani sekinlashtiradi:
brauzer darhol kerak bo‘lgan narsani yuklashni kechiktiradi. Faqat pastga
aylantirib boriladigan qism kech yuklanishi kerak.

## Kesh va CDN nima qiladi?

Kesh ikkinchi va keyingi barcha yuklanishlarni hal qiladi: faylni saqlashga
ruxsat berilgan bo‘lsa, brauzer uni qayta so‘ramaydi. Manzil kontent bilan birga
o‘zgarsa, masalan, fayl nomida kontent izi bo‘lsa, bu rasmlar uchun xavfsiz.
Shunda eski versiyani ko‘rsatish xavfisiz uzoq saqlash muddatini belgilash mumkin.

CDN masofani qisqartiradi: fayl o‘quvchiga yaqinroq serverdan beriladi. Bir
nechta mamlakatdagi auditoriya uchun bu ko‘pincha yana yigirma kilobaytni
tejashdan ko‘proq samara beradi.

## Ortiqcha siqilganda nima yuz beradi?

Yo‘qotishli siqish bloklar bilan ishlaydi. Sifat juda pasaytirilsa, uchta tanish
nuqson paydo bo‘ladi: tekis joylarda 8 × 8 pikselli kvadratlar, keskin
konturlar bo‘ylab halqalar va silliq gradient o‘rniga tasmalar. Avvalo osmon va
studiya foni zarar ko‘radi.

Nuqsonlar qaytarilmaydi va yig‘ilib boradi. Siqilgan faylni har qayta saqlash
eski artefaktlar ustiga yangilarini qo‘shadi, shuning uchun tahrir doim asl
nusxadan qilinadi.

Chegarani qanday topish mumkin

Bir kadrni uch xil sifatda saqlang, 100% masshtabda oching va silliq gradientli
joyni taqqoslang. Osmonda tasmalar paydo bo‘ladigan nuqta maqbul sifat chegarasidir.

## Bu fotostok rasmlari uchun nimani anglatadi?

Stokdagi ish katta o‘lchamda keladi — bu asl fayl uchun to‘g‘ri, sahifa uchun
noto‘g‘ri. Uni nashrga tayyorlashda odatiy yo‘ldan boring: qirqish,
kichraytirish, zamonaviy format, belgilashdagi o‘lchamlar. Picwin vitrinasi
prevyusi tomoni 1024 piksel bo‘lgan kvadrat, katalog to‘rida esa u yanada
kichraytirib ko‘rsatiladi.

[TexnikaInterfeys, qurilma va ma’lumotlar tasvirlangan kadrlar yengil sahifalarda ko‘p uchraydi.
Ishlarni ko‘rish](/uz/category/technology)[BiznesAsosiy kadr dastlabki soniyani belgilaydigan lendinglar uchun biznes syujetlar.
Ishlarni ko‘rish](/uz/category/business)

**Asosiysi**

- Yaxshi yuklanish chegarasi — 75-persentil bo‘yicha eng katta elementgacha 2.5 soniya.

- Vazn kanaldan hisoblanadi: 5 Mbit/s tezlikda 1 MB taxminan 1.7 soniya oladi.

- Fayl eni slot enini 2 ga ko‘paytirgan qiymatga teng, bir piksel ham ortiq emas.

- Belgilashdagi o‘lchamlar maket sakrashini bepul yo‘qotadi.

- Kechiktirib yuklash asosiy rasmdan boshqa hamma narsa uchun.

Vazifaga mos yengil kadr kerakmi?

Picwin mini-ilovasida rasm topshiriq bo‘yicha — ma’lum nisbatda va sahifaga
ortiqcha megabaytlarsiz yaratiladi.

[Mini-ilovani ochish](/uz/partners)

### Sayt uchun yaxshi rasm vazni qancha?

Birinchi ekrandagi asosiy rasm 200 KB, matndagi illyustratsiya 100 KB, to‘rdagi
prevyu 40 KB gacha bo‘lsin. Bular qat’iy qoidalar emas, kanal tezligidan
chiqarilgan mo‘ljallardir.

### Sahifadagi barcha rasmlar jami qancha bo‘lishi kerak?

Asosiy rasm 2.5 soniyada ko‘rinadigan darajada. Qolgan hamma narsani kechiktirib
yuklash mumkin va kerak.

### Rasm allaqachon kichik bo‘lsa, WebP yordam beradimi?

Ha, ammo yutuq soniyalarda emas, kilobaytlarda bo‘ladi. O‘lchamdan boshlang:
slotdan ikki marta keng fayl noo‘rin formatdan ancha ko‘p ortiqcha sarf keltiradi.

### PNG ikonlarni siqish kerakmi?

Ikonkalarni deyarli doim vektor ko‘rinishida berish yaxshi. Rastr kerak bo‘lsa,
palitrani kamaytiring: 64 rangli PNG to‘liq ranglisidan bir necha marta yengil.

### Qaysi biri muhimroq: fayl hajmi yoki fayllar soni?

Bugun — hajm. Zamonaviy ulanishlar o‘nlab parallel so‘rovlarni ko‘taradi, ammo
ortiqcha megabaytlarni hech narsa tezlashtirmaydi.

### Nega sahifa menda tez, tashrifchilarda esa sekin?

Sizda hammasi keshda va kanal yaxshi. 75-persentilga qarang va dasturchi
vositalarida tezlik cheklovini yoqing.

### Yaxshilanganini qanday tekshirish mumkin?

Bir xil tezlik cheklovida tuzatishdan oldin va keyin eng katta elementgacha
vaqtni o‘lchang. O‘lchovsiz taassurot deyarli doim aldaydi.

Mavzuning davomi: [o‘lcham va aniqlik](/uz/blog/tasvir-olchami-va-dpi),
[format tanlash](/uz/blog/tasvir-formatlari-jpeg-png-webp-avif) va
[bosmaga tayyorlash](/uz/blog/tasvirni-bosmaga-tayyorlash) — ularda ayni
piksellar boshqa qoidalar bilan ishlaydi. Tayyor ishlar [katalogda](/uz/catalog).