Mobil trafik uchun tasvirlarni optimallashtirish: WebP, AVIF va lazy load
Tasvirlar odatda sahifa vaznining uchdan ikki qismi. Beqaror mobil internetda bu sahifani ko'rish va natijalarga qaytish o'rtasidagi farq.
Formatlar: 2026 yilda nima tanlash kerak
WebP barcha dolzarb brauzerlar tomonidan qo'llab-quvvatlanadi va JPEG bilan taqqoslaganda taxminan chorak-uchdan bir kam vazn beradi. Bu fotolar uchun xavfsiz sukut format.
AVIF yanada kuchliroq siqadi, lekin kodlash sezilarli sekinroq, eski brauzerlarda qo'llab-quvvatlash esa yomonroq. Optimal sxema — brauzer qo'llab-quvvatlagan joyda AVIF berish, WebP va JPEG'ga qaytish bilan.
Bu bir necha source'li picture elementi orqali amalga oshiriladi: avval AVIF, so'ng WebP, oxirida JPEG'li oddiy img. Brauzer o'zi birinchi qo'llab-quvvatlanadigan variantni tanlaydi.
O'lchamlar va moslashuvchan berish
Eng tez-tez xato — barcha qurilmalarga 2000 piksel kenglikdagi bitta tasvirni berish. Mobil ekran uni 360 CSS pikselda ko'rsatadi, foydalanuvchi esa to'liq trafikni to'laydi.
Yechim — kenglik bo'yicha bir necha versiyali srcset atributi va tasvir maketda qanday kenglikni egallashini tavsiflovchi sizes. Uch-to'rtta variant deyarli barcha holatlarni qoplaydi.
Tasvirlarda width va height atributlarini doim ko'rsating. Ularsiz brauzer yuklashdan oldin nisbatni bilmaydi va joy ajratmaydi, natijada kontent sakraydi.
Lazy load: qayerda qo'llash va qayerda mumkin emas
img'dagi loading="lazy" atributi ko'rinadigan hududdan tashqaridagi tasvirlar yuklanishini kechiktiradi. Bu brauzerning o'rnatilgan imkoniyati, alohida kutubxona kerak emas.
Muhim istisno: birinchi ekranning asosiy tasviriga lazy qo'ymang. U deyarli doim LCP elementi bo'ladi va kechiktirilgan yuklash bu metrikani to'g'ridan-to'g'ri yomonlashtiradi. Aksincha, unga fetchpriority="high" foydali.
Kataloglar uchun qoida oddiy: birinchi ko'rinadigan kartochkalar odatdagidek yuklanadi, pastdagilari — dangasa.
Formatdan tashqari nimani optimallashtirish
Fotolardan EXIF metama'lumotlarini olib tashlang: geolokatsiya, kamera modeli va prevyu har bir faylda o'nlab kilobayt egallaydi.
Siqish sifatini tasvir turiga qarab tanlang. Tovar fotolari uchun 75–85 odatda originaldan farq qilmaydi, interfeys skrinshotlari uchun kamroq siqish yaxshiroq.
Ikonkalar va oddiy grafikani SVG'ga o'tkazing. Vektor format rastr analogidan kam vazn qiladi va yo'qotishsiz masshtablanadi.
Tasvirlar va qidiruv trafigi
alt atributi tasvir mazmunini ko'zi ojiz foydalanuvchilar va rasm qidiruvi uchun tavsiflaydi. Tavsifiy va joriy sahifa versiyasi tilida yozing, kalitlar to'plami emas.
Fayl nomlarini defisli lotin yozuvida mazmunli qiling: palto-junli-kulrang.webp. IMG_20260814_112233.jpg ko'rinishidagi fayllar hech qanday ma'lumot bermaydi.
Tovar tasvirlari uchun schema.org/Product belgilashida image maydonlarini ulang — bu kengaytirilgan snippet imkoniyatini oshiradi.
Real sharoitda tekshirish
DevTools'ni oching, Network yorlig'i, sekin ulanish profilini yoqing va umumiy vazn hamda asosiy tasvir yuklanish vaqtiga qarang. Bu ofis Wi-Fi'dan O'zbekiston mobil tarmoqlariga yaqinroq.
PageSpeed Insights'da zamonaviy formatlar, o'lchamlar va ekrandan tashqari tasvirlar haqidagi bandlarga qarang — u yerda har bir fayl bo'yicha potensial yutuq ko'rsatilgan.
Optimallashtirishdan keyin ikki-to'rt haftadan so'ng Search Console'dagi Core Web Vitals hisobotidagi dala ma'lumotlari bilan solishtiring.