Şəkillərin veb üçün optimallaşdırılması vizual keyfiyyəti yükləmə sürəti ilə balanslaşdırmaq məqsədilə faylların ölçüsünün kiçildilməsini, müvafiq formatların seçilməsini və təsviri adlandırma qaydalarının tətbiqini əhatə edir. Yüksək özünəməxsusluqlu şəkillər tez-tez sayt ziyarətçiləri üçün lazımsız gecikmələrə səbəb olur ki, bu da istifadəçi təcrübəsinə və axtarış performansı göstəricilərinə mənfi təsir göstərə bilər. Ölçüləri tənzimləməklə və sıxılma texnikaları tətbiq etməklə məzmununuzun müxtəlif cihazlarda və şəbəkə şərtlərində tez yüklənməsini təmin edir, rəqəmsal aktivlərinizin vizual bütövlüyünü qoruyarkən auditoriyanız üçün daha rahat təcrübə yaradırsınız.
Niyə şəkil optimallaşdırılması sayt sürəti üçün vacibdir?
Böyük, optimallaşdırılmamış şəkil faylları vebsaytların yavaş yüklənmə vaxtlarının yaşanmasının Ən çox yayılmış səbəblərindən biridir. Brauzer tək bir məhsul şəklini və ya bannerini göstərmək üçün bir neçə meqabayt məlumatı yükləməli olduqda, ümumi səhifə çəkisi əhəmiyyətli dərəcədə artır. Bu gecikmə tez-tez Google tərəfindən sayt performansının əsas göstəricisi kimi izlənilən zəif Ən Böyük Məzmunlu Boyama (LCP) balı ilə nəticələnir. Yaxşı performans üçün etalon LCP-ni 2.5 saniyə və ya daha az saxlamaqdır və böyük ölçülü media tez-tez bu məqsədə çatmaqda əsas maneədir. Səmərəli şəkil çatdırılmasını prioritetləşdirdiyiniz zaman, daha yavaş mobil məlumat bağlantılarında və ya köhnə avadanlıqlarda saytınıza daxil olan istifadəçilər üçün daha sürətli mühit yaradırsınız.
Geyim məhsulları qalereyalarını nümayiş etdirən elektron ticarət platformasını əhatə edən ssenari nəzərdən keçirin. Hər bir şəkil 10 meqabayt ölçüdə yüklənərsə, səhifə ilkin render zamanı dayanacaq və məzmun görünməzdən əvvəl potensial müştərilərin saytdan çıxmasına səbəb olacaq. Bu faylları 200 kilobayt və ya daha az kimi uyğun ölçüyə endirməklə, səhifə dərhal demək olar ki, render ola bilər. Bu təcrübə yalnız texniki balları yaxşılaşdırmır; ziyarətçinin saytınızda nə qədər qaldığı ilə birbaşa əlaqəlidir. Alien Road media kitabxananızı nümayiş sahəsi üçün tipik ölçü tələblərini aşan faylları müəyyən etmək üçün vaxtaşırı yoxlamağı tövsiyə edir.
Doğru fayl formatını necə seçirsiniz?
Düzgün formatın seçilməsi məzmununuzun xüsusi vizual tələblərindən asılıdır. JPEG itkili sıxılma vasitəsilə fayl ölçüsü və şəkil aydınlığı arasında balans təmin etdiyindən fotoşəkillər və mürəkkəb rəng qradientləri olan şəkillər üçün standart seçim olaraq qalır. PNG şəffaflığa ehtiyac duyduğunuzda və ya loqolar və ya mətnlə zəngin qrafiklər kimi kəskin kənarları qorumaq lazım gəldikdə üstünlük verilir, lakin o, çox vaxt JPEG-dən daha böyük fayl ölçüləri ilə nəticələnir. WebP kimi müasir formatlar üstün sıxılma və keyfiyyət təmin edərək, köhnə formatlarla müqayisədə əhəmiyyətli detalları itirmədən daha kiçik fayl ölçülərinə imkan verir.
Format seçərkən həmişə qrafikin nəzərdə tutulan istifadə halını qiymətləndirin. Əgər fon qəhrəman şəkli göst хоrsinizsə, WebP çox vaxt ən səmərəli seçimdir, çünki o, faylı yüngül saxlayaraq geniş spektrli rəngləri yaxşı idarə edir. İkonlar və sadə vektor əsaslı illüstrasiyalar üçün SVG üstün seçimdir. SVG-lər həll olunmadan asılı deyildir, yəni onlar pikselasiya olmadan və ya fayl çəkisini artırmadan istənilən ekran ölçüsünə mükəmməl uyğunlaşır. Səhv formatdan istifadə müasir performans standartlarına cavab verməyən şişirdilmiş səhifələrə səbəb ola bilər, buna görə də şəkillərinizi məzmun idarəetmə sisteminizə yükləməzdən əvvəl onları bir neçə formatda sınamağa vaxt ayırın.
Şəkil emal iş axınınızı sadələşdirmək üçün addımlar
- Böyük faylları miqyaslandırmaq üçün CSS-ə güvənmək əvəzinə şəkilləri vebsaytınızın tərtibatı üçün tələb olunan dəqiq ölçülərə uyğunlaşdırın.
- Görünən keyfiyyət itkisi olmadan lazım olmayan metadataları silmək və fayl çəkisini azaltmaq üçün ixrac prosesi zamanı sıxılma alətlərini tətbiq edin.
- Tənbəl yükləmə strategiyası tətbiq edin ki, ekranın aşağı hissəsindəki şəkillər yalnız istifadəçi aşağı sürüşdürdükdə yüklənsin.
- Şəkillərinizin yüksək vizual uyğunluğu qoruyarkən mümkün qədər kiçik olmasını təmin etmək üçün WebP və ya AVIF kimi müasir formatlardan istifadə edin.
- Serverin dolmasına töhfə verən dublikat və ya istifadə olunmayan şəkilləri silmək üçün media kitabxananızı hər ay yoxlayın.
SEO üçün şəkilləri necə adlandırmalı və təsvir etməli?
Axtarış sistemləri bir insanın etdiyi kimi vizual məlumatları ‘görə’ bilmədikləri üçün şəklin məzmununu başa düşmək üçün mətn əsaslı ipuçlarına güvənirlər. Google axtarış sistemlərinə şəkil kontekstini başa düşməyə kömək etmək üçün təsviri alt mətnlərdən və fayl adlarından istifadə etməyi tövsiyə edir. Faylı ‘IMG_5542.jpg’ adlandırmaq əvəzinə, ‘organic-cotton-t-shirt-blue.jpg’ kimi təsviri addan istifadə edin. Bu kiçik dəyişiklik axtarış skanerlərinə şəklin nəyi təsvir etdiyinə dair aydın siqnal verir ki, bu da şəkildə xüsusi axtarış nəticələrində görünürlüğünüzü artırına bilər.
Alt mətn ikiqat məqsədə xidmət edir: ekran oxuyucularına güvənən istifadəçilər üçün əlçatanlığı yaxşılaşdırır və axtarış sistemləri üçün əlavə kontekst təmin edir. Alt mətn yazarkən təsviri və qısa olmağa diqqət yetirin. Təsvirə açar sözlər doldurmaqdan çəkinin; əvəzində, şəkli onu görə bilməyən birinə təsvir edirmiş kimi izah edən bir cümlə yazın. Məsələn, ‘Parkda dayanarkən mavi üzvi pambıq köynək geyinən bir şəxs’ ‘mavi köynək, üzvi, pambıq, t-shirt, köynək’ ifadəsindən qat-qat təsirlidir. Bu yanaşma məzmununuzun həm axtarışa uyğun olmasını, həm də bütün ziyarətçilər üçün əhatəli olmasını təmin edir.
Bu həftə haradan başlamalı
Hansı şəkillərin ən uzun gecikmələrə səbəb olduğunu müəyyən etmək üçün PageSpeed Insights kimi alətdən istifadə edərək ana səhifənizdə performans auditi aparmaqla başlayın. Ən ağır on şəklin siyahısını yaradın və əl ilə optimallaşdırma üçün onlara üstünlük verin. Bu faylları optimallaşdırdıqdan sonra onları yenidən yükləyin və LCP balınızdakı yaxşılaşmanı ölçün. Bu diqqət mərkəzində olan səy bütün komandanızı yormadan dəyişikliklərinizin saytın performansına necə təsir etdiyini dərhal əks əlaqə təmin edəcək.
Sonra, saytınızda ardıcıl olmasını təmin etmək üçün cari fayl adlandırma və alt mətn standartlarınızı nəzərdən keçirin. Yüzlərlə şəkiliniz varsa, alt mətnin yaradılmasını avtomatlaşdıra bilən və ya yükləmə zamanı fayl ölçülərini optimallaşdıra bilən plagindən və ya skriptdən istifadə etməyi düşünün. Bununla belə, hər hansı bir avtomatlaşdırma alətinin xüsusi şəkil tələblərinizi düzgün idarə etdiyini yoxlayın. Açılış səhifəsi başlığı və ya məhsul fotoşəkilləri kimi ən vacib şəkillər üzərində əllə yoxlamalar yüksək keyfiyyət standartlarını qorumaq üçün çox vaxt zəruridir.
Şəkil optimallaşdırmasında ümumi səhvlər
- Hər biri bir neçə meqabayt ola bilən orijinal xam faylları birbaşa kameradan yükləmək.
- Ölçülərin həqiqətən ekran qabı üçün uyğun olub-olmadığını nəzərə almadan yalnız şəkil sıxılmasına güvənmək.
- Sadə CSS, qradientlər və ya SVG formaları kifayət edəcək və səhifə çəkisini azaldacağı halda mürəkkəb qrafiklərdən istifadə etmək.
- Mobil istifadəçilərin masaüstü ölçülü aktivləri yükləməsinə səbəb olan mobil üçün xüsusi şəkil optimallaşdırmasına məhəl qoymamaq.
- Şəkil axtarışı vasitəsilə orqanik trafik üçün buraxılmış imkanlarla nəticələnən təsviri fayl adlarından istifadə etməmək.
Sıxılma zamanı şəkil keyfiyyətini necə qorumaq olar?
Fayl ölçüsü və vizual keyfiyyət arasında balansın qorunması davamlı bir çətinlikdir. Bir çox sıxılma alətləri adətən 60%-dən 85%-ə qədər dəyişən keyfiyyət faizini tənzimləməyə imkan verir. Əksər veb tətbiqləri üçün 75% parametr fayl çəkisini əhəmiyyətli dərəcədə azaldarkən orijinala demək olar ki, eyni vizual təcrübə təmin edir. Pikselasiya və ya rəng bantlanması kimi sıxılma artefaktlarının auditoriyanıza görünməməsini təmin etmək üçün həmişə yüksək özünəməxsusluqlu monitorda yan-yana müqayisə aparın.
Tipik hesabda siz görə bilərsiniz ki, ətraflı texniki diaqramlar kimi müəyyən şəkillər standart fotoşəkillərdən daha yüksək keyfiyyət ayarı tələb edir. Hər şəkilə eyni cür yanaşmayın; əvəzində medianızı məqsədinə görə kateqoriyalara ayırın. Məhsul kadrları, qəhrəman şəkilləri və dekorativ nişanlar hər biri həll və rəng dərinliyi üçün müxtəlif tələblərə malikdir. Bu kateqoriyaları müəyyən etməklə siz müxtəlif optimallaşdırma profilləri tətbiq edə və saytınızdakı hər bir şəklin effektiv olduğu qədər səmərəli olmasını təmin edə bilərsiniz.
Müasir dizaynda cavabdeh şəkillərin rolu
Responsive dizayn istifadə olunan cihazın ekran ölçüsünə uyğunlaşan şəkillər tələb edir. Eyni 2000 piksel enində olan şəkli masaüstü kompüterə etdiyiniz kimi smartfona təqdim etmək əvəzinə, HTML-də ‘srcset’ atributundan istifadə etməlisiniz. Bu, brauzerə istifadəçinin görünüş sahəsinin eninə əsasən ən uyğun şəkil ölçüsünü seçməyə imkan verir. Mobil cihazlara daha kiçik şəkillər təqdim etməklə, data istifadəsini azaldır və yükləmə vaxtlarını yaxşılaşdırırsınız ki, bu da mobil-birinci veb mühitlərdə performansı qorumaq üçün çox vacibdir.
Veb saytınız ümumi platformada qurulubsa, cavabdeh şəkil generasiyasının defolt olaraq aktiv olub-olmadığını görmək üçün media parametrlərinizi yoxlayın. Əksər müasir sistemlər avtomatik olaraq müxtəlif ekran ölçülərini əhatə etmək üçün yüklənmiş şəklin bir neçə versiyasını yaradır. Bu xüsusiyyət söndürülsə, siz mobil istifadəçiləri lazımsız dərəcədə böyük faylları yükləməyə məcbur edə bilərsiniz. Veb saytınızın cihazından asılı olmayaraq bütün istifadəçilər üçün sürətli və əlçatan qalmasını təmin etmək üçün mövzunuzun və ya şablonunuzun bu cavabdeh atributlardan düzgün istifadə etdiyini mütəmadi olaraq yoxlamaq praktik bir üsuldur.
Oxumağa davam et: SEO (Axtarış Sisteminin Optimallaşdırılması) · Məzmun Marketinqi