Veb Şəkillərinin Müasir Formatlara (AVIF və WebP) Çevrilməsi

Bir çox veb səhifənin ümumi çəkisinin 60-80%-ni məhz şəkillər təşkil edir. Müasir rəqəmsal kameralar və dizayn proqramları bir neçə meqabaytlıq şəkillər ixrac edir. Əgər siz 4MB-lıq bir PNG faylını olduğu kimi bloqa yükləsəniz, zəif 4G bağlantısında olan istifadəçi səhifənin açılmasını 10 saniyə gözləməli olacaq. 📌 1. Formatların Müqayisəsi: JPEG vs WebP vs AVIF - JPEG: 1992-ci ilin texnologiyasıdır. Keyfiyyət/həcm nisbəti müasir standartlara cavab vermir. - WebP: Google tərəfindən hazırlanıb. Eyni keyfiyyətdə JPEG-dən təxminən 30-35% daha az yer tutur və şəffaflığı (transparency) dəstəkləyir. - AVIF: Ən son sənaye standartı. AV1 video kodeki üzərində qurulub. WebP-dən daha 20-30% kiçikdir və xüsusilə gradientlərdə, parlaq rənglərdə inanılmaz dəqiqlik nümayiş etdirir. 📌 2. Next.js 'next/image' Komponentinin Möcüzəsi Next.js arxa planda C++ əsaslı 'sharp' qrafik kitabxanasından istifadə edir. Siz sadəcə yazırsınız: <Image src="/hero.jpg" width={800} height={500} alt="Hero" /> Next.js nə edir? 1. On-Demand Optimization: Şəkli yalnız istifadəçi tələb etdikdə arxa planda sıxır və serverdə keşləyir. 2. Format Content Negotiation: Əgər istifadəçinin brauzeri AVIF dəstəkləyirsə AVIF, dəstəkləmirsə WebP göndərir. 3. Lazy Loading: Ekrandan aşağıda qalan şəkillər yalnız istifadəçi ora çatanda endirilir. Nəticədə saytınızın açılış sürəti dramatik şəkildə yüksəlir və mobil istifadəçilərin internet trafikinə böyük qənaət olunur.