Şəkil Kompressiyası: Veb üçün Tam Bələdçi

Şəkillər veb səhifələrin ən ağır elementi olaraq qalır və 2026-cı ildə səhifə sürəti həm istifadəçi təcrübəsi, həm də Google sıralamaları üçün hər zamankından daha vacibdir. Bu bələdçidə şəkil kompressiyasının necə işlədiyini, hansı formatları nə vaxt istifadə edəcəyinizi və şəkillərinizi keyfiyyətdən minimum güzəşt edərək necə optimallaşdıracağınızı ətraflı öyrənəcəksiniz.

Şəkil Kompressiyası Nədir?

Şəkil kompressiyası fayl ölçüsünü azaltmaq prosesidir. İki əsas növü var:

İtkili (Lossy) Kompressiya

İtkili kompressiya insan gözünün fərq etməyəcəyi detalları silərək fayl ölçüsünü əhəmiyyətli dərəcədə azaldır. JPEG və WebP bu metodu istifadə edir. Keyfiyyət parametri (adətən 0-100 şkalasında) nə qədər məlumat silinəcəyini müəyyən edir:

• Keyfiyyət 85-95: Minimum görünən fərq, 20-40% ölçü azalması
• Keyfiyyət 75-85: Əla balans -- fərq demək olar ki, görünmür, 50-70% azalma
• Keyfiyyət 60-75: Kiçik artefaktlar görünə bilər, 70-85% azalma
• Keyfiyyət 60-dan az: Görünən keyfiyyət itkisi, yalnız kiçik thumbnail-lər üçün

Əksər veb istifadə halları üçün keyfiyyət 80-85 optimal seçimdir.

İtkisiz (Lossless) Kompressiya

İtkisiz kompressiya heç bir vizual məlumat silmədən fayl ölçüsünü azaldır. PNG bu metodu istifadə edir. Azalma daha azdır (adətən 10-30%), amma orijinal keyfiyyət tam qorunur. Transparanlıq, mətn və ya kəskin kənarlar olan şəkillər üçün idealdır.

Şəkil Formatları Müqayisəsi

JPEG

• Fotoqrafik şəkillər üçün ən yaxşı
• İtkili kompressiya, yaxşı ölçü/keyfiyyət balansı
• Transparanlıq dəstəkləmir
• Hər yerdə dəstəklənir

PNG

• Transparanlıq lazım olanda
• İtkisiz kompressiya
• Mətn, loqolar, ekran görüntüləri üçün ideal
• JPEG-dən böyük fayl ölçüsü

WebP

• Google tərəfindən hazırlanıb
• Həm itkili, həm itkisiz kompressiya
• JPEG-dən 25-35% daha kiçik
• Transparanlıq dəstəkləyir
• Müasir brauzerlərin hamısında dəstəklənir

SVG

• Vektor formatı -- istənilən ölçüyə miqyaslanır
• İkonlar, loqolar, illüstrasiyalar üçün ideal
• Çox kiçik fayl ölçüsü
• CSS ilə stilizasiya edilə bilər
• Fotoqrafik şəkillər üçün uyğun deyil

AVIF

• Ən yeni format, ən yaxşı kompressiya nisbəti
• WebP-dən 20% daha kiçik
• Brauzer dəstəyi artır, amma hələ universal deyil

Veb üçün Şəkil Optimizasiyası Addımları

1. Düzgün Format Seçimi

Fotoqraflar üçün WebP (JPEG fallback ilə), transparanlıq üçün PNG və ya WebP, ikonlar üçün SVG istifadə edin.

2. Ölçü Düzəltmə

Şəkilləri göstəriləcək ölçüyə uyğunlaşdırın. 3000px genişliyində kamera şəklini 800px genişliyində konteynerə yerləşdirmək israfçılıqdır. Şəkil ölçü dəyişdirici ilə dəqiq piksel ölçülərinə miqyaslayın.

3. Kompressiya

Şəkil sıxışdırıcı istifadə edərək fayl ölçüsünü azaldın. Keyfiyyəti 80-85 olaraq təyin edin -- bu, gözlə görünən fərq olmadan maksimum azalma verir.

4. Responsiv Şəkillər

Müxtəlif cihaz ölçüləri üçün bir neçə versiya hazırlayın:

• 320px mobil telefonlar üçün
• 640px böyük telefonlar üçün
• 1024px tabletlər üçün
• 1440px masaüstü ekranlar üçün

5. Tənbəl Yükləmə

Ekranın altındakı şəkillərə loading="lazy" əlavə edin. Bu, ilkin səhifə yükləmə vaxtını əhəmiyyətli dərəcədə azaldır. LCP şəklinizi (adətən hero şəkil) tənbəl yükləməyin.

6. Alt Mətn

Hər şəklə təsviri alt mətn əlavə edin. Bu həm əlçatanlıq, həm də SEO üçün vacibdir. Alt mətn şəklin məzmununu dəqiq təsvir etməlidir.

Şəkil Optimizasiya Yoxlama Siyahısı

Hər hansı səhifəni dərc etməzdən əvvəl yoxlayın:

1. Fotoqrafik şəkillər WebP formatındadır?
2. İtkili formatlar üçün keyfiyyət 80-85 olaraq təyin edilib?
3. Şəkillər göstərilmə ölçülərinə uyğundur?
4. Əsas şəkillər üçün srcset ilə responsiv ölçülər var?
5. Ekranın altındakı şəkillər tənbəl yüklənir?
6. Hər şəklin təsviri alt mətni var?
7. Width və height atributları layout sürüşməsinin qarşısını almaq üçün təyin edilib?

Alətlər

Bütün bu optimallaşdırma addımlarını Vaxtım Yoxdu-da pulsuz brauzer alətləri ilə edə bilərsiniz: şəkil sıxışdırma, format çevirmə, ölçü dəyişdirmə, kəsmə və daha çoxu. Fayllarınız cihazınızda qalır, serverə yüklənmir.