Şəkillərin veb üçün optimizasiyası

2.1 Şəklin düzgün formatını seçmək

Veb üçün şəkillərin optimizasiyası — keyfiyyətini xeyli dərəcədə itirmədən fayl ölçülərini azaltmağa yönəlmiş əsas bir prosesdir. Şəkillərin optimizasiyası veb səhifələrin yüklənməsini sürətləndirir, istifadəçi rahatlığını artırır və saytın axtarış sistemlərindəki reytinqini yaxşılaşdırır.

Bu proses xüsusən mobil internet dövründə çox vacibdir, çünki yükləmə sürəti kritik rol oynayır.

Şəklin düzgün formatını seçmək

Şəklin düzgün formatını seçmək effektiv optimizasiyanın ilk addımıdır. Hər bir formatın öz üstünlükləri və tətbiq sahəsi var:

JPEG

• Tətbiq: çoxlu rənglərə malik olan şəkillər və fotolar
• Üstünlüklər: itki ilə yüksək sıxılma dərəcəsi, bu da fayl ölçüsünü xeyli dərəcədə azaltmağa imkan verir
• Çatışmazlıqlar: təkrar saxlandıqda keyfiyyətin itirilməsi

PNG

• Tətbiq: şəffaflıqla şəkillər və kəskin xətləri olan qrafika, mətn
• Üstünlüklər: itkisiz sıxılma, şəkilin yüksək keyfiyyətini qoruyur
• Çatışmazlıqlar: JPEG ilə müqayisədə daha böyük fayl ölçüsü

GIF

• Tətbiq: animasiyalar və məhdud rəng palitrası olan şəkillər (256 rəngədək)
• Üstünlüklər: animasiya və şəffaflıq dəstəyi
• Çatışmazlıqlar: məhdud rəng palitrası

WebP

• Tətbiq: müxtəlif növ şəkillər üçün müasir format
• Üstünlüklər: həm itkilərlə, həm də itkisiz sıxılma, animasiya və şəffaflıq dəstəyi. Yüksək sıxılma dərəcəsi
• Çatışmazlıqlar: bütün brauzerlər tərəfindən dəstəklənmir (amma bu vəziyyət yaxşılaşır)

SVG

• Tətbiq: vektor şəkillər, loqolar və ikonlar
• Üstünlüklər: keyfiyyət itirmədən miqyaslana bilir, kiçik fayl ölçüsü
• Çatışmazlıqlar: yalnız vektor qrafikası üçün uyğundur

2.2 Şəkillərin sıxılması

Şəkillərin sıxılması optimizasiya prosesində vacib bir mərhələdir. Bu, fayl ölçüsünü azaltmağa və şəkilin qəbulu üçün uyğun keyfiyyəti qorumağa imkan verir.

İtkili sıxılma

Bu metod şəkil məlumatlarının bir hissəsini silir ki, bu da fayl ölçüsünü azaldır və keyfiyyətin az da olsa itirilməsinə səbəb olur. JPEG və WebP üçün istifadə olunur.

Alət nümunələri:

• TinyPNG/TinyJPG: PNG və JPEG şəkilləri sıxışdırmaq üçün online alətlər. Onlar fayl ölçüsünü azaldır, yüksək keyfiyyəti saxlayır
• ImageOptim: macOS üçün tətbiq, şəkilləri əhəmiyyətli keyfiyyət itkisi olmadan sıxışdırmağa imkan verir
• Squoosh: Google-un aləti, müxtəlif formatları və sıxılma metodlarını dəstəkləyir

İtkisiz sıxılma

Bu metod fayl ölçüsünü məlumatları silmədən azaldır və şəkilin ilkin keyfiyyətini qoruyur. PNG və WebP üçün istifadə olunur.

Alət nümunələri:

• PNGGauntlet: Windows üçün pulsuz bir alət, itkisiz PNG şəkilləri sıxmaq üçün bir neçə sıxılma metodundan istifadə edir
• OptiPNG: PNG fayllarını optimizasiya etmək üçün komanda sətri utiliti, artıq məlumatları silir

2.3 Şəkillərin ölçülərinin dəyişdirilməsi

Şəkillərin ölçüsünü veb-sayta yükləməzdən əvvəl uyğun ölçüyə gətirmək onların həcmindən azaldır və səhifənin yükləmə sürətini artırır. Bu, xüsusilə adaptiv veb dizayn üçün vacibdir.

Ölçülərin dəyişdirilməsi üçün alətlər:

• Adobe Photoshop: şəkillərin ölçülərini dəyişmək və veb üçün optimal parametrlərlə saxlamağa imkan verən güclü şəkil redaktoru
• GIMP: ölçü dəyişmə və geniş redaktə imkanlarına malik pulsuz şəkil redaktoru
• Online Image Resizer: əlavə proqram yükləmədən şəkillərin ölçüsünü dəyişdirmək üçün onlayn alətlər

HTML-də eni və hündürlük atributlarından istifadə

width və height atributlarını <img> teqlərində göstərmək, brauzerə şəkillər yüklənənə qədər onların yeri üçün yer ayırmağa imkan verir, bu da səhifənin yüklənməsi zamanı kontentin "atlamalarını" qarşısını alır. Bu, istifadəçi təcrübəsini yaxşılaşdırır və layout dəyişmələrinin qarşısını alır.

Nümunələr:

    
      <img src="images/photo.jpg" alt="Təbiət fotosu" width="800" height="600">
    
  

Bu kod brauzerin şəkil üçün yer ayırmasını təmin edir və kontentin dəyişməsinin qarşısını alır.

2.4 Praktik tövsiyələr

Lazy Loading

Lazy Loading (tənbəl yükləmə) şəkilləri yalnız ekranın görünən sahəsinə düşdüyü zaman yükləməyə imkan verir. Bu, səhifənin başlanğıc yükləmə vaxtını azaldır və trafikə qənaət edir.

Nümunə:

    
      <img src="example.jpg" alt="Şəklin təsviri" loading="lazy">
    
  

Bu atribut loading="lazy" brauzerə şəkli yalnız istifadəçi üçün görünən olduqda yükləməyi göstərir.

Şəkillərin keşlənməsi

Şəkillər üçün server tərəfindəki keşləmənin sazlanması, təkrar istifadə olunan şəkillərin brauzerin keşi vasitəsilə yüklənməsini təmin edir ki, bu da səhifələrin təkrar yüklənməsini sürətləndirir.

Keşləmə haqqında daha ətraflı ikinci modulda, HTTP-protokol və Web-server sazlamalarını daha dərindən öyrəndiyiniz zaman danışacağıq.

Veb üçün şəkillərin optimizasiyası — bu kompleks bir prosesdir, hansı ki, düzgün format seçimi, sıxılma, ölçülərin dəyişdirilməsi, HTML-də atributların istifadəsi və veb-saytın performansını artırmaq üçün ən yaxşı təcrübələrin tətbiqi daxildir. Bu metodların tətbiqi istifadəçi təcrübəsini yaxşılaşdırmağa, səhifələrin yüklənmə sürətini artırmağa və SEO-nu yüksəltməyə kömək edir.