Image optimizatsiya — chuqurroq, sizes, priority

~15 daq · Next.js · Performance va Optimizatsiya

Muammodan boshlaylik

7-darsda next/image ni o'rgandik. Lekin katalog sahifasida Lighthouse ogohlantiradi:

Properly size images — Potential savings of 2,140 KiB

Telefonda mahsulot kartochkasi 180 px kenglikda, lekin yuklangan rasm — 1920 px. Har bir kartochka uchun 10 barobar ortiqcha ma'lumot. Sabab — sizes ko'rsatilmagan.

Hayotiy o'xshatma

Fotoga buyurtma: pasportga 3×4, devorga 50×70. Agar har doim 50×70 chop etib, keyin qaychi bilan kesib 3×4 qilsangiz — qog'oz va pul isrof. sizes — fotostudiyaga "menga aynan qaysi o'lcham kerak" deb aytish.

next/image nima qiladi

<Image src="/mahsulot.jpg" width={800} height={800} alt="Choynak" />

Brauzerga:

<img
  srcset="/_next/image?url=%2Fmahsulot.jpg&w=640&q=75 640w,
          /_next/image?url=%2Fmahsulot.jpg&w=750&q=75 750w,
          /_next/image?url=%2Fmahsulot.jpg&w=828&q=75 828w, ..."
  loading="lazy"
  decoding="async"
  width="800" height="800"
/>

• Bir nechta o'lcham (srcset) — brauzer moslarini tanlaydi
• WebP/AVIF — brauzer qo'llab-quvvatlasa
• Lazy loading — ekranga yaqinlashganda
• width/height — CLS ga qarshi joy ajratiladi

sizes — eng muhim sozlama

sizes brauzerga rasm ekranda qancha joy egallashini aytadi — u shunga qarab srcset dan to'g'ri faylni tanlaydi.

// Katalog: mobil — 2 ustun, planshet — 3, desktop — 4
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
  {mahsulotlar.map((m) => (
    <div key={m.id} className="relative aspect-square">
      <Image
        src={m.rasm}
        alt={m.nomi}
        fill
        sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
        className="object-cover"
      />
    </div>
  ))}
</div>

sizes siz fill rasmlar uchun brauzer 100vw deb hisoblaydi — telefonda ham to'liq ekran kengligidagi rasm.

[!WARNING] fill ishlatilganda sizes deyarli har doim kerak. Aks holda kichik kartochkalar ham eng katta rasmni yuklaydi. Ota element position: relative (yoki absolute/fixed) va aniq o'lchamga ega bo'lishi kerak.

priority — LCP rasm

<Image src="/hero.webp" alt="Kuzgi kolleksiya" width={1600} height={700} priority sizes="100vw" />

• loading="lazy" o'chiriladi
• <link rel="preload"> qo'shiladi — rasm HTML bilan deyarli bir vaqtda yuklana boshlaydi
• Faqat birinchi ekrandagi asosiy rasm(lar) uchun — odatda sahifada bitta

[!INFO] Next.js 16 da priority xususiyati eskirgan deb belgilanib, uning o'rniga aniqroq preload yoki standart loading="eager" va fetchPriority="high" tavsiya etiladi. Next.js 15 da priority — to'g'ri tanlov.

placeholder

import heroRasm from '@/public/hero.jpg'     // statik import

<Image src={heroRasm} alt="..." placeholder="blur" priority />

Statik import da Next.js width, height va kichik xira variantni (blurDataURL) avtomatik yaratadi. Rasm yuklanguncha xira nusxa ko'rinadi.

Masofaviy rasmlar uchun blurDataURL ni o'zingiz berasiz (masalan, CMS yoki plaiceholder kutubxonasi orqali).

Masofaviy rasmlar

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cdn.dokon.uz', pathname: '/mahsulotlar/**' },
      { protocol: 'https', hostname: '**.amazonaws.com' },
    ],
    formats: ['image/avif', 'image/webp'],
    minimumCacheTTL: 60 * 60 * 24 * 30,
  },
}

[!WARNING] remotePatterns ni juda keng (hostname: '**') qilmang — har kim sizning serveringizni istalgan rasm uchun bepul "optimizator" sifatida ishlatishi mumkin, bu esa CPU va xarajatlarni oshiradi.

quality va o'lchamlar

<Image src={...} quality={60} ... />     // standart 75

images: {
  deviceSizes: [640, 750, 828, 1080, 1200, 1920],
  imageSizes: [64, 96, 128, 256, 384],
  qualities: [60, 75],                   // Next.js 15+ — ruxsat etilgan qiymatlar
}

Optimizatsiya qachon kerak emas

<Image src="/logo.svg" alt="Do'kon" width={120} height={32} unoptimized />

• SVG — vektor, optimizatsiya kerak emas
• Rasmlar allaqachon CDN da optimallashtirilgan (Cloudinary, imgix) — loader orqali ularning URL lari bilan ishlash

// next.config.ts
images: { loader: 'custom', loaderFile: './lib/cloudinary-loader.ts' }

[!TIP] O'z serveringizda (self-hosted) rasm optimizatsiyasi CPU ni ko'p ishlatadi. sharp paketi o'rnatilganini tekshiring (Next.js yangi versiyalarida avtomatik) va katta trafikda rasmlarni CDN orqali bering (68-dars).

Tez-tez uchraydigan xatolar

1. fill + sizes yo'q

Kichik kartochkalarda ulkan rasmlar.

2. Hamma rasmda priority

Hamma rasmlar preload — asosiy rasm ular orasida yo'qoladi, LCP yomonlashadi.

3. alt ni bo'sh qoldirish yoki "rasm" deb yozish

Mazmunli rasm — tavsiflovchi alt ("Qizil chinni choynak, 1 litr"); bezak rasm — alt="".

Xulosa

next/image: srcset, WebP/AVIF, lazy, joy ajratish
sizes — ekranda egallaydigan joy; fill bilan deyarli shart
priority — faqat LCP rasm (Next.js 16 da — preload)
placeholder="blur" — statik import da avtomatik
remotePatterns — aniq domenlar; formats: avif, webp
quality, deviceSizes, qualities — nozik sozlash
SVG va tashqi CDN — unoptimized yoki custom loader

Keyingi dars

58-dars: Script optimizatsiya — next/script, strategy

Analitika, chat va reklama skriptlarini sahifani sekinlashtirmasdan ulash.