Veb sahifada rasm yuklashni qanday optimallashtirish mumkin?

1. Siqishtirish: Rasm hajmini sifatni yo'qotmasdan optimallashtirish uchun vositalardan foydalaning (masalan, TinyPNG, Compressor.io).
2. Formatlar: JPEG va PNG bilan solishtirganda yaxshiroq siqishni ta'minlaydigan WebP yoki AVIF kabi zamonaviy formatlarni tanlang. Eski brauzerlar uchun <picture> yoki srcset atributidan fallback sifatida foydalaning.
3. Lazy Loading: Ko'rinish maydonidan tashqaridagi rasmlarni kerak bo'lganda yuklashni kechiktiring. loading="lazy" ni tabiiy yoki JavaScript kutubxonalar bilan foydalaning.
4. Moslashuvchan rasmlar: Turli ekran o'lchamlari va rezolyutsiyalar uchun turli versiyalarini taqdim eting, <picture> elementidan yoki srcset/sizes atributlaridan foydalaning.
5. CDN (Content Delivery Network): Rasmlarni CDN da joylashtiring, shunda kontent eng yaqin joydan tezroq yetkaziladi.
6. Kesh: Serverda to'g'ri kesh sarlavhalarini sozlang, shunda brauzer rasmlarni saqlab qoladi va keyingi tashriflarda lokal keshdan yuklaydi.
7. Placeholder/Blurhash: To'liq o'lchamli rasm yuklanayotgan paytda past sifatli "placeholder" yoki Blurhash ni ko'rsating.

loading="lazy" ni ishlatish misoli:

<img src="image.jpg" alt="Rasm tavsifi" loading="lazy">

<picture> yordamida turli formatlar uchun misol:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Rasm tavsifi">
</picture>