Rasm va assetlarni optimallashtirish

Rasmlar va assetlar

Rasmlar odatda veb-sahifadagi eng og'ir narsadir. Ularni to'g'ri qiling — saytingiz tez his qilinadi; ularga e'tibor bermang — hatto oddiy sahifa ham sudralib qoladi. Yaxshi xabar shuki, bir necha odat ko'pchilik muammolarni hal qiladi.

Rasmlaringizni to'g'ri o'lchamda qiling

Eng katta yutuq — ko'rsatilishidan kattaroq rasmlarni jo'natmaslik. Agar rasm 400-piksel keng joyda ko'rinsa, 4000-piksellik originalni berishning hech qanday sababi yo'q — brauzer o'sha barcha ortiqcha piksellarni yuklab oladi, so'ng ularning ko'pini tashlab yuboradi.

Yuklashdan oldin rasmni u aslida ko'rsatiladigan o'lchamga taxminan o'zgartiring (yuqori zichlikdagi ekranlarni hisobga olib, ehtimol uning 2x). O'lchami o'zgartirilgan rasm fayl hajmida o'n baravar kichikroq bo'lishi mumkin, hech qanday ko'rinadigan farqsiz.

Zamonaviy formatlardan foydalaning

Format — bu rasmning fayl turi. JPEG va PNG kabi eski formatlar hamma joyda ishlaydi, lekin yangilari ancha yaxshi siqadi:

• WebP — keng qo'llab-quvvatlanadi va odatda bir xil sifatdagi ekvivalent JPEG dan 25–35% kichikroq. Bugungi kunda ajoyib standart.
• AVIF — yanada kichikroq, garchi biroz kamroq universal.

JPEG ni WebP ga o'tkazish ko'pincha bepul tezlik oshirishidir. Ko'pchilik rasm vositalari va hosting platformalari siz uchun konvertatsiya qila oladi.

Layout shiftdan qochish uchun width va height ni belgilang

Brauzer rasmning o'lchamini oldindan bilmasa, u uchun joy qoldirmaydi. So'ng rasm yuklanganda paydo bo'ladi va uning ostidagi hamma narsani pastga suradi. Ushbu bezovta qiluvchi sakrash layout shift deb ataladi — siz, ehtimol, tugmani bosishga urinib ko'rgansiz, lekin u sakrab ketib qolgan.

Buni brauzerga rasmning o'lchamlarini oldindan width va height atributlari bilan aytish orqali tuzating:

<img src="photo.webp" alt="A cat on a sofa" width="400" height="300" />

Brauzer darhol to'g'ri o'lchamdagi joyni zaxiralaydi, shuning uchun rasm kelganda hech narsa sakramaydi. E'tibor bering, atributlar rasmning nisbatini (aspect ratio) tavsiflaydi; CSS uni hali ham responsive tarzda o'zgartirishi mumkin.

Ekrandan tashqaridagi rasmlarni lazy-load qiling

Sahifaning pastida joylashgan rasmlar foydalanuvchi ularga yaqin aylantirgunga qadar yuklanishi shart emas. Lazy loading ularni paydo bo'lishga yaqin bo'lgunga qadar yuklashni kechiktiradi, shuning uchun dastlabki sahifa yuklanishi yengilroq va tezroq bo'ladi.

Brauzerda bu ichki qurilgan — shunchaki loading="lazy" qo'shing:

<img src="gallery-12.webp" alt="Sunset over the hills" width="600" height="400" loading="lazy" />

Bir maslahat: sahifaning eng yuqorisidagi katta rasmni (darhol ko'rinadigan) lazy-load qilmang, chunki o'shani darhol yuklanishini xohlaysiz.

Suhbat maslahatlari

• To'g'ri o'lchamlash bilan boshlang — rasmlarni ular ko'rsatiladigan o'lchamda berish eng katta ta'sirga ega tuzatish.
• WebP kabi zamonaviy formatlarni tavsiya qiling va foydasini tushuntiring: bir xil sifatda ancha kichikroq fayllar.
• width/height atributlarini layout shiftni oldini olish bilan, loading="lazy" ni esa tezroq dastlabki yuklanish bilan bog'lang.