Şəkil optimizasiyası - WebP, lazy load, sürətli sayt

?️

Şəkillər saytın yükünün 60%-i

Şəkil optimizasiyası - sayt sürətləndirməkdə ən böyük qənaət sahəsidir. Bu bələdçidə WebP, lazy load və sıxma vasitələrini görəcəksiniz.

1

WebP nədir?

WebP - Google-un modern şəkil formatıdır. PNG və JPEG-dən 25-50% kiçik, eyni keyfiyyətlə.

Format müqayisəsi

  • JPEG: foto üçün, lossy, geniş yayılmış
  • PNG: transparency üçün, lossless, böyük
  • WebP: foto + transparency, 25-50% kiçik, müasir
  • AVIF: ən yeni, WebP-dən kiçik, hələ tam dəstək yoxdur

Brauzer dəstəyi

  • Chrome, Firefox, Safari 14+, Edge - WebP
  • Köhnə brauzerlər: PNG/JPEG fallback lazımdır
2

WebP convert üsulları

1. Online (TinyPNG, Squoosh)

Az şəkil üçün:

  • TinyPNG.com - pulsuz batch (20 şəkil eyni anda), 5 MB limit
  • Squoosh.app - Google-un alət, slider ilə keyfiyyət/ölçü düzəlt

2. WordPress plugin

  • WebP Converter for Media - avtomatik convert + serve
  • ShortPixel - bulk optimization, 100 image/ay pulsuz
  • Smush - popular, basic WebP
  • LiteSpeed Cache - onsuz da bunu edir (QUIC.cloud)

3. Server-side (Hostinq.az)

Hostinq.az hostingində LSCache plugin avtomatik WebP qaytarır. .htaccess-də:

  • RewriteCond %{HTTP_ACCEPT} image/webp
  • RewriteCond %{REQUEST_URI} ^(.+)\.(jpe?g|png)$
  • RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  • RewriteRule ^(.+)\.(jpe?g|png)$ /$1.webp [L,T=image/webp]

Bu kod brauzer WebP dəstəkləyirsə avtomatik onu qaytarır.

3

Lazy load

Lazy load = şəkillər yalnız ekrana çıxanda yüklənir, hamısı bir dəfəyə yox.

HTML native (modern)

  • <img src="hero.jpg" loading="lazy" alt="...">

Chrome, Firefox, Safari 14+ dəstəkləyir.

WordPress

WP 5.5+ avtomatik lazy load əlavə edir. LSCache plugin də öz lazy load-u var.

Above-fold istisnası

İlk ekrana düşən (hero) şəkilləri lazy load ETMƏYİN - LCP metriki pisləşir. Onları preload edin:

  • <link rel="preload" as="image" href="hero.webp">
4

Ölçü optimizasiyası

Optimal ölçü

  • Hero/banner: 1920x1080 max, 200-500 KB hədəf
  • Blog post şəkil: 1200x800, 100-300 KB
  • Thumbnail: 400x300, 30-80 KB
  • Icon: 64x64, SVG ən yaxşı

Responsive images (srcset)

Mobil və desktop üçün müxtəlif ölçü:

  • <img srcset="small.webp 480w, medium.webp 800w, large.webp 1200w" sizes="(max-width: 600px) 480px, 1200px" src="medium.webp">
5

CDN istifadə etmək

Şəkillər CDN-də saxlanırsa daha sürətli yüklənir.

Pulsuz CDN-lər

  • Cloudflare - AZ üçün PoP yox (Tbilisi/İstanbul)
  • BunnyCDN - ucuz (0.01 USD/GB)
  • QUIC.cloud - LiteSpeed-in pulsuz versiyası (12 GB/ay)

AZ auditoriyası üçün CDN şərt deyil - Bakıda hosting onsuz da sürətlidir.

+

Mənfi nümunələr

  • ❌ 10 MB PNG hero şəkil
  • ❌ Şəkil ölçüsü brauzerdə CSS ilə kiçildilir (yalnız display, yüklənir tam ölçüdə)
  • ❌ JPEG sıxılma keyfiyyəti 100 (90 → eyni keyfiyyət, 30% kiçik)
  • ❌ Animated GIF - onu MP4/WebM video ilə əvəz edin

FAQ

WebP keyfiyyəti JPEG-dən pisdir?

Yox - quality 80-də WebP JPEG quality 85-ə bərabər keyfiyyət verir, 30% daha kiçik.

Hər şəkili WebP edim?

Bəli - bütün JPEG/PNG şəkillərini WebP-ə convert edin. Original saxlayın fallback üçün.

SVG vs PNG?

İkon və logo üçün SVG (vector, limitsiz scaling, kiçik fayl). Foto üçün WebP.

Plugin sayını artırmaq sürəti yavaşlatmır?

1 yaxşı plugin (LSCache) çoxlu az-effektivdən daha yaxşıdır.

Hostinq.az hostingində auto-WebP

LSCache plugin onsuz da daxildir. Bütün şəkillər avtomatik WebP qaytarılır.

Hosting paketləri