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 jamlanmasida uchta ko‘rsatkich bor; rasmlar ulardan ikkitasiga bevosita ta’sir qiladi:
- LCP — eng katta element chizilguncha o‘tgan vaqt. 2.5 soniyagacha 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 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 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.
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
srcsetda sanab chiqing.Belgilashda o‘lchamlarni ko‘rsating
widthvaheightatributlari yoki uslublardagiaspect-ratiobrauzerga yuklanishdan oldin joy ajratish imkonini beradi.Ustuvorliklarni belgilang
Asosiy rasmga
fetchpriority="high", birinchi ekrandan pastdagilarga esaloading="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.
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.
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.
Asosiy kadr dastlabki soniyani belgilaydigan lendinglar uchun biznes syujetlar.
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.
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, format tanlash va bosmaga tayyorlash — ularda ayni piksellar boshqa qoidalar bilan ishlaydi. Tayyor ishlar katalogda.
