Attēlu optimizācija Next.js uzņēmumu projektos

Attēli veido 50–70% no mājaslapas svara. To optimizācija ir viena no ātrākajām un iedarbīgākajām veiktspējas uzlabošanas metodēm — bieži vien tā ir atšķirība starp "labs" un "izcils" Lighthouse score.

Next.js Image komponents padziļināti

Automātiska formātu konvertēšana

Next.js `` komponents automātiski ģenerē modernos formātus:

• WebP — 25–35% mazāks par JPEG pie vienādas kvalitātes. Atbalsta 97%+ pārlūkprogrammu
• AVIF — 40–50% mazāks par JPEG. Jaunāks formāts ar pieaugošu atbalstu (Chrome, Firefox, Safari 16+)
• Automatiska izvēle — Next.js nosūta AVIF, ja pārlūks to atbalsta, citādi WebP, citādi JPEG. Accept header bāzēta
• Kvalitātes iestatījums — `quality={75}` ir labs default. Hero attēliem 85, fona attēliem 60

Responsīvo attēlu sistēma

```tsx ```

• sizes atribūts ir kritisks — bez tā pārlūks ielādē pilna izmēra attēlu pat mobilajās ierīcēs
• srcset automātiski ģenerēts — Next.js izveido vairākus izmērus (640, 750, 828, 1080, 1200, 1920, 2048, 3840px)
• deviceSizes un imageSizes konfigurēšana next.config.ts — pielāgojiet breakpoints jūsu dizainam

fill vs fixed izmēri

• Fixed (width + height) — kad zināt precīzus izmērus. Layout nav mainīgs. CLS = 0
• fill — kad attēlam jāaizņem vecāka konteiners. Lietojams ar `object-fit: cover` vai `contain`. Ideāls card thumbnail un hero image gadījumiem

Veiktspējas tehnikas

Lazy loading un priority

• Lazy loading (default) — attēli ārpus skata laukuma tiek ielādēti tikai tuvojoties. Next.js to dara automātiski ar Intersection Observer
• priority atribūts — IZSLĒDZ lazy loading un pievieno preload hint. Lietojiet TIKAI hero attēliem un above-the-fold attēliem (1–2 attēli per lapa max)
• Placeholder blur — `placeholder="blur"` rāda izplūdušu attēla priekšskatījumu, kamēr ielādējas pilns attēls. Inline base64 formātā — bez HTTP pieprasījuma

LCP optimizācija

Largest Contentful Paint bieži IR hero attēls. Optimizācijas soļi:

1. priority atribūts hero attēlam
2. preconnect CDN domēnam: ``
3. Pareizs formāts un izmērs — nepārsniedziet nepieciešamo (1200px hero, nevis 4000px)
4. Minimizēt redirect chain — tiešs URL uz gala attēlu bez pārvirzīšanām
5. Samazināt server response time — attēlu serverim jāatbild <200ms

CLS (Cumulative Layout Shift) novēršana

• Vienmēr norādiet width un height vai lietojiet `fill` ar fiksētu konteineru. Bez izmēriem pārlūks nezina, cik vietas atvēlēt — saturs "lēkā" ielādes laikā
• aspect-ratio CSS — modernāka pieeja fiksētam garuma/platuma attiecībai bez JavaScript
• Skeleton placeholders — pelēki bloki attēlu vietā, kamēr tie ielādējas

CDN un kešošana

Vercel Image Optimization

• Automātisks CDN — optimizēti attēli tiek servēti no globāla CDN edge tīkla. TTFB <50ms globāli
• On-demand optimizācija — attēli tiek optimizēti pirmajā pieprasījumā un kešoti. Nav build-time saspiešanas
• Cache-Control — `s-maxage=31536000, stale-while-revalidate`. Gads CDN kešā ar fona atjaunināšanu
• Izcelsmes politika — konfigurējiet atļautos attēlu avotus next.config.ts, lai novērstu ārējo attēlu ļaunprātīgu izmantošanu

Pašu CDN integrācija

Ja neizmantojat Vercel:

• Cloudflare Images — $5/mēn par 100K attēliem. WebP/AVIF konvertēšana, responsive variants
• imgix — specializēts attēlu CDN ar URL bāzētu transformāciju. Populārs enterprise vidē
• Custom loader — Next.js ļauj definēt savu Image loader: `loader: ({ src, width, quality }) => `...``

Automatizēta optimizācija CI/CD

Build-time saspiešana

• sharp — ātrākā Node.js attēlu apstrādes bibliotēka. Resize, crop, convert formatot
• squoosh — Google CLI rīks attēlu optimizācijai ar AVIF, WebP, MozJPEG, OxiPNG
• next-optimized-images (vai līdzīgs) — automātiska build-time optimizācija visiem statiskajiem attēliem

CI pipeline integrācija

```yaml # GitHub Actions — attēlu audits

• name: Image audit

run: | find public -name "*.jpg" -o -name "*.png" | while read f; do size=$(stat -f%z "$f" 2>/dev/null || stat -c%s "$f") if [ $size -gt 500000 ]; then echo "WARNING: $f is $(($size/1024))KB — optimize!" fi done ```

• Automatizēts brīdinājums — CI bloķē PR, ja attēli pārsniedz definēto izmēru limitu (piemēram, 500KB)
• Pre-commit hooks — husky + lint-staged var automātiski optimizēt attēlus pirms commit

Attēlu budžets

Definējiet lapas attēlu budžetu:

• Hero lapa — max 200KB kopējais attēlu svars
• Blog posts — max 100KB per attēlu, max 500KB kopā
• E-komercija — max 150KB per produkta attēlu

Attēlu optimizācija nav vienreizējs uzdevums — tā ir nepārtraukts process, kam vajadzīga automatizācija un monitorings.