SEO dost olmaq üçün Şəkillərinizi necə optimallaşdırmaq olar (Tam Bələdçi)

Veb saytınızın performansı, seçdiyiniz xüsusi veb hostundan veb saytın istifadəsi qaydalarına əsasən istifadə etdiyiniz şəkil faylı ölçülərinə qədər bir neçə amildən asılıdır..


Düzgün ölçüdə onları formatlaşdırmaq, etdiyiniz dəyişikliklər sayəsində keyfiyyəti azalda bilər. Yaxşı bir xəbər, optimal görüntü keyfiyyətini qorumaq və bir neçə texnika və fəndlərlə düzgün ölçü əldə edə bilməyinizdir.

Image Optimization nədir?

görüntü optimallaşdırma ölçüləriBöyük səhifələr olduqda veb səhifələrdə əhəmiyyətli bir yavaşlama yaşana bilər. Bu, yükləmə müddətini azalda bilər və saytınıza gələnlər üçün ümumi təcrübə alt kitabçası ola bilər.

Fayl ölçüsünün azaldılması görüntü optimallaşdırılmasıdır. Bunun üçün bir skript və ya bir plagin istifadə edə bilərsiniz.

Bundan sonra səhifələrinizin daha sürətli yüklənməsi ilə nəticələnir. Zərərsiz və itkisiz sıxılma ən çox yayılmış optimallaşdırma üsullarıdır.

Şəkil biçimlendirme faydaları

İnternetdəki orta görüntü ölçüləriBir veb səhifənin ümumi çəkisinin təxminən 54 faizi görünüşlərə görə olduğu təxmin edilir.

Veb saytın optimallaşdırılması üzərində işləyərkən şəkilləriniz bunun üçün ilk vəzifəniz olmalıdır. Şəkil formatlamasının üstünlüklərinə aşağıdakılar daxildir:

  • Təkmilləşdirilmiş səhifə yükləmə sürəti
  • Yedeklemeler yaratmaq daha sürətli
  • Daha az server saxlama sahəsi tələb olunur
  • Doğru SEO plugin ilə təkmilləşdirilmiş SEO
  • Daha az bant genişliyi istifadə olunur

Şəkil optimallaşdırması ilə performansı necə artırmaq olar

Məqsəd qəbuledilən keyfiyyəti və mümkün olan ən aşağı sənəd ölçüsünü bərabər şəkildə balanslaşdırmaqdır. Bunu etmək üçün birdən çox yol var. Yükləməzdən əvvəl şəkillərinizi sıxışdırmaq adi bir seçimdir. Bu məqsəd üçün bir vasitə və ya bir plagin istifadə edə bilərsiniz (burada bir neçə).

İstifadə etdiyiniz sıxılma növünü və fayl formatını nəzərə almaq vacibdir. Doğru birləşmə, görüntünün ölçüsünü beş dəfəyə qədər azaltmağa imkan verir.

Ehtiyaclarınız üçün ən yaxşı birləşməni təyin etmək üçün fərqli fayl formatları və sıxılma növləri ilə sınaq keçirin.

Ən yaxşı fayl formatını seçin

Ən yaxşı fayl növünü seçmək üçün, hansının mövcud olduğunu bilmək lazımdır. Bunlar ən çox yayılmışdır:

  • JPEG: Bu növ itkisiz və itkisiz optimallaşdırmadan istifadə edir. Sifət səviyyəsini tənzimləməklə fayl ölçüsü və keyfiyyətinin möhkəm bir tarazlığına zərbə vura bilərsiniz.
  • PNG: Bu tip daha böyük bir fayl ölçüsünə sahibdir, lakin şəkillər keyfiyyətcə daha yüksəkdir. Zərərsiz və ya itkisiz bir sıxılma istifadə edə bilərsiniz.
  • GIF: Bu cizgi şəkilləri üçün idealdır. Yalnız itkisiz sıxılma istifadə edə bilərsiniz. Yalnız 256 rəng istifadə edir.

şəkil faylı formatları

Digər seçimlər var, lakin bunlar ən çox yayılmış və işləmək asandır. Digər seçimlərə JPEG XR və WebP daxildir. Bütün brauzerlər bu ikisini dəstəkləmir, buna görə də xəbərdar olun.

Bununla birlikdə onlar əlverişli bir seçim ola bilər. Məsələn, müqayisə edilə bilən JPEG görüntüsü ilə müqayisədə orta hesabla WebP ilə 30 faiz fayl ölçüsü azalması var.

Bu iki seçim üçün universal dəstəyin olmaması səbəbindən tətbiqinizə müvafiq mənbəyi təmin etmək üçün serverlərinizdə və ya tətbiqlərinizdə əlavə məntiq tələb olunacaq:

  • Şəkil optimallaşdırması, bəzi CDN-lər, o cümlədən WebP və JPEG XR çatdırılma xidmətidir.
  • Müştərini aşkar etmək üçün ən yaxşı görüntü formatını təmin edin və dəstəklənən formatları yoxlayın, əlavə tətbiq məntiqi əlavə etmək mümkündür.
  • Müəyyən açıq mənbəli alətlər söhbəti, optimallaşdırmanı və müvafiq aktivlərə xidmət göstərməyi avtomatlaşdırır.

Ölçmə və Sıxılma keyfiyyəti

Aşağı sıxılma daha yüksək keyfiyyət verməyə meyllidir, lakin faylların ölçüləri adətən daha böyükdür. Əks yüksək sıxılma ilə doğrudur. Fayllar daha kiçikdir, lakin keyfiyyət azalmağa meyllidir.

görüntü keyfiyyəti vs sıxılma

İdeal olaraq, veb saytınızın ümumi çəkisi üçün cəmi bir-iki MB istəyərsiniz. Beləliklə, neçə şəkil istifadə etməli olduğunuzu və düşünün bu sayı təxminən 1,5-ə bölün. Bu, ən yaxşı yükləmə sürətini əldə etməyə imkan verən bir görüntü üçün ölçü verir.

Zərərsiz vs zərərsiz optimallaşdırma

Bunlar istifadə edəcəyiniz iki növ sıxışdırma növüdür. Onların nə etdiklərini başa düşmək vacibdir:

  • itkisiz vs itkisiz kompressiyaZərərsiz: Bu məlumatları sıxışdırır və filtrdir. Təsvir göstərmədən əvvəl, sıxılmamalıdır. Ancaq keyfiyyət azalmır. Zərərsiz sıxılma həyata keçirən bir neçə vasitə var.
  • Zərər: Bu bəzi məlumatları ortadan qaldırır və filtrdir. Görüntünü pisləşdirəcəyi üçün nə qədər azaldacağınıza diqqət yetirin. Təsvirin keyfiyyət parametrlərini tənzimləmək üçün müxtəlif şəkil redaktorları və vasitələrindən istifadə edə bilərsiniz.

Zərərsiz və ya itkisiz konfiqurasiyanın optimal konfiqurasiyası təqdim olunan əsərlər və fayl ölçüsü və görüntü məzmunu arasındakı ticarət kimi öz meyarlarınızdan asılıdır..

Bütün şəkillərə tətbiq olunan bir universal qəbulu yoxdur. Nəticədə, daha yaxşı işləməyini görmək üçün fərqli şəkillərlə ətrafında oynamaq istəyirsən.

Şəkillərin ölçüsünü dəyişmək

WordPress kimi saytlarda cavab verən səhifələr sayəsində media kitabxananızda bir neçə fayl ölçüsü əldə edəcəksiniz. Brauzeriniz ən uyğun olanı seçə və yükləyə bilər. Brauzerin seçdiyi ölçü cihazın qətnaməsinə əsaslanır.

wordpress-də resim ölçüsünü dəyişir

Orijinal sənəd toxunulmaz və saxlanılır. İsterseniz disk boşluğunu qorumaq üçün orijinalı qorumaq üçün plaginlərdən istifadə edə bilərsiniz.

Şəkillərin dəyişdirilməsi və aradan qaldırılması

Bir veb səhifədəki bütün görüntülərə ehtiyacınız varmı? Olmasa, lazımsız olanları çıxarın. Ancaq hamısı məzmuna uyğundursa, daha böyük və ya daha aşağı keyfiyyətli şəkilləri daha yaxşı seçimlərlə əvəz etməyi düşünün.

Bəzi hallarda veb şriftləri və CSS effektləri səhifədə gözəl bir vizual estetik təmin edərkən şəkillərin yerini tuta bilər. Veb şriftləri ilə gözəl yazı tipləri istifadəni yaxşılaşdırmağa və səhifələrinizə daha uyğun bir görünüş verməyə kömək edə bilər.

Ayrıca oxunuşunuzu və markanızı yaxşılaşdıra bilər. Sadəcə asanlıqla axtarış edə biləcəyinizə əmin olun, mətni oxunuş problemi olmadan dəyişə bilərsiniz.

CSS effektlərinə kölgələr və gradients kimi elementlər daxildir. Bunlar daha da brendləşə bilər. Animasiyalar veb səhifənizdə hər böyümə səviyyəsində və qətnamə ilə vizual müraciət təmin edə bilər. Şəkil faylları ilə müqayisədə bunlar baytların bir hissəsidir.

Raster vs Vector Şəkilləri

rastor vs vektor

Raster və vektor əsas görüntü faylı növlərindən biridir. Raster şəkillərini yaratmaq üçün piksel əsaslı proqramlar, skaner və ya bir kamera istifadə olunur.

Bunlar internetdə geniş yayılmışdır və daha çox istifadə olunur. Vektor proqramı vektor şəkilləri yaratmaq üçün istifadə olunur. Bunlar fiziki məhsullara, mühəndislik, CAD və 3D qrafikasına gedən şəkillər üçün çox yayılmışdır.

Vektor şəkilləri qətnamə və böyüdücüdür. Həndəsi formalar qarışdıqda vektor idealdır. Şəkillər mürəkkəb olduqda və zəngin bir detal və düzensiz formalara sahib olduqda, raster şəkillərə üstünlük verilir.

Raster qrafikləri bir görüntünü təmsil etmək üçün düzbucaqlı bir grid daxilində hər pikselin fərdi dəyərlərini kodlayır. Vektor qrafikası nöqtələr, xətlər və çoxbucaqlılardan istifadə edərək bir görüntü təqdim edir.

Yüksək qətnamə ekran təsirləri

Cihaz pikselləri və CSS pikselləri olan iki fərqli piksel növünü ayırmaq vacibdir. Çox cihaz pikselləri bir CSS pikseldə ola bilər. Ekrandakı detal daha çox cihaz pikseli ilə daha incə olur.

css piksel vs cihaz pikseliYüksək cihazın piksel sayımından tam yararlanmaq üçün görüntü aktivləri daha ətraflı olmalıdır.

Bu vəzifə vektor şəkilləri üçün idealdır, çünki kəskin nəticələr verə bilər istənilən qətnamədə göstərildiyi zaman.

Raster şəkillər görüntü məlumatlarını kodlaşdırmaq üçün hər piksel əsasdan istifadə etdiyindən, daha çətin olur. Piksel artdıqca raster sənəd ölçüləri artır.

Beləliklə, üstünlükləri əldə etmək üçün yüksək qətnamə ekranlarına yüksək qətnamə görüntülər lazımdır. Vektor görüntüləri var yüksək qətnamə ekranlar üçün ən yaxşısıdır qətiyyən müstəqil olduqları üçün həmişə kəskin nəticələr verirlər.

Sadəcə yadda saxla ki, qətnamədən asılı olmayaraq görüntü optimallaşdırma üsulları eynidır.

Vektor şəkillərini optimallaşdırmaq

Ölçülən Vektor Qrafikası (SVG) bütün müasir brauzerlər tərəfindən dəstəklənir.

Bu iki ölçülü qrafika üçün idealdır və format XML-görüntü əsaslıdır. SVG faylları üstünlük verdiyiniz mətn redaktoru və ya əksər vektor əsaslı proqram növləri ilə əl ilə yaradıla bilər.

SVG fayllarının ölçüsünü azaltmaq üçün onlar minifikasiya edilməlidir. SVG sənədlərini sıxarkən GZIP istifadə edilməlidir.

Raster Şəkilləri optimallaşdırmaq

Piksellər şəbəkəsi bir raster görüntüsünü təşkil edir. Fərdi piksellər iki ölçülü bir şəbəkədədir. Məsələn, 10.000 piksel ardıcıllıqla 100 ilə 100 piksel arasında bir şəkil meydana gəlir. Hər piksel şəffaflıq və rəng məlumatlarını kodlayır.

raster ağırRGBA dəyərləri hər piksel tərəfindən saxlanılır. Bunlara daxildir:

  • Qırmızı kanal
  • Mavi kanal
  • Yaşıl kanal
  • Alpha (şəffaflıq) kanalı

256 kölgə (dəyərlər) brauzer tərəfindən daxili olaraq ayrılmışdır. Hər kanalda bu səkkiz bitə çevrilir. Piksel başına, bu dörd baytdır. Bu, grid ölçülərindən istifadə edərək fayl ölçüsünü hesablamağı mümkün edir. Faylın ölçüsünün çox böyük olması üçün çox şey lazım deyil.

Beləliklə, görüntü faylının ölçüsünü azaltmaq üçün bir neçə strategiya mövcuddur:

  • Şəklin bit dərinliyini azaldın. Bunu daha kiçik bir rəng paletindən istifadə edərək edə bilərsiniz.
  • Fərdi piksellərin saxladığı məlumatları optimallaşdırın.

Alətlər və parametr parametrləri

Mükəmməl bir şəkil aləti, hər bir görüntü üçün işləyəcək optimallaşdırma parametrləri və ya formatı yoxdur. Şəkil məzmunu və texniki və vizual tələbləri, hansından istifadə etməyinizi müəyyən edəcəkdir.

Yaxşı bir parametr dəsti tapdıqdan sonra vaxta qənaət etmək üçün gələcəkdə oxşar şəkillər üçün istifadə edə bilərsiniz. Bununla birlikdə, bütün şəkilləri sıxmaq üçün eyni parametrlərin istifadə olunacağını heç vaxt düşünmədiyinizə əmin olun.

Bir neçə ümumi vasitə haqqında məlumat düzgün seçim etməkdə sizə kömək edə bilər. Bu dörd ən çox istifadə olunanlar arasındadır:

  • Gifsicle: Bu, müxtəlif GIF şəkillərini optimallaşdırmağa və yaratmağa imkan verir.
  • Optipng: Bu itkisiz PNG optimallaşdırılmasına imkan vermək üçün istifadə olunur.
  • Jpegtran: Bu JPEG şəkillərini optimallaşdırmağa imkan verir.
  • Pngquant: Bu itkin PNG optimallaşdırılmasına imkan vermək üçün istifadə olunur.

Ölçəkli Şəkil Varlıqlarına çatdırılma

Təsvir optimallaşdırması edərkən nəzərə alınması lazım olan iki əsas meyar var:

  • Şəklin ümumi piksel sayını optimallaşdırmaq.
  • Bir görüntüdə hər pikseli kodlaşdırmaq üçün neçə bayt lazım olduğunu optimallaşdırmaq.

şəkil formatı ağacıŞəkil faylınızın ölçüsü aşağıya enir fərdi piksel kodlanması üçün lazım olan ümumi baytlara vurulan ümumi piksellər. Bu odur. Veb saytınızdakı görüntü sənədləri üçün ən uyğun ölçüsü müəyyənləşdirmək üçün çalışarkən bunu unutmayın.

Buna görə, şəkilləri optimallaşdırmağın ən təsirli və asan yolu, aktivi brauzerdə nəzərdə tutulmuş ölçüdə göstərməyiniz üçün daha çox piksel göndərməməyinizə əmin olmaqdır..

Belə ki, şəkilləri yenidən satmaq üçün brauzerinizə etibar etməyin. Bu, onların daha aşağı qətnamədə göstərilməsinə səbəb ola bilər. Ayrıca bir çox əlavə CPU qaynağı istifadə edir.

Təqdim olunan hər bir aktivin tam ekran ölçüsünə zəmanət vermək ümumiyyətlə mümkün deyil. Bununla birlikdə, bütün lazımsız pikselləri minimuma endirdiyinizə əmin olmaq vacibdir.

Böyük aktivlərinizi göstərmə ölçüsünə mümkün qədər yaxınlaşdırmağınız da vacibdir.

Şəkil Optimallaşdırma siyahısı

Buradakı bütün məlumatlar, veb səhifələrinizin daha sürətli olması üçün şəkillərinizi optimallaşdırmağa imkan verir. Hələ də gözəl şəkillərdən istifadə edə biləcəksiniz, ancaq səhifənizin yükləmə vaxtı ilə əhəmiyyətli bir yavaşlamağa səbəb olmayacaqsınız.

Bu, ziyarətçilərinizi sevindirəcək və veb saytınızın ümumi işini yaxşılaşdıracaqdır. Şəkillərinizi optimallaşdırarkən aşağıdakı yoxlama siyahılarını nəzərdən keçirin:

  • Vektor formatlarını nəzərdən keçirin, çünki onlar yüksək qətnamə və çox sayda cihaz üçün işləyirlər, çünki miqyaslı və qətnamə müstəqildir.
  • Bütün SVG aktivləri sıxışdırılmalı və minifikasiya edilməlidir. Bu lazımsız metadata rədd edir.
  • Raster formatları üçün ən yaxşı keyfiyyət parametrləri ilə oynayın. Bu, xeyli bayt qazana bilər.
  • Hər bir aktiv üçün funksional tələblərinizi müəyyənləşdirin və raster şəkillər üçün ən yaxşı formatı seçin.
  • Ardıcıl görüntü optimallaşdırmasını təmin etmək üçün avtomatlaşdırın.
  • Təbii görüntü ölçüsü və görüntünün ölçüsü mümkün qədər oxşar olması üçün miqyaslı şəkillərə xidmət edin.

Bunu yekunlaşdırmaq üçün görüntü optimallaşdırmaq üçün bir elm və sənət də var. Yüksək inkişaf etmiş alqoritmlər və üsullar elmə xidmət edir.

Fərdi görüntünün sıxılmasına dair qəti cavabların olmaması sənətdir. Nəticədə, ətrafında oynamalı və təcrübə etməlisiniz. Bu, görüntü sənədləriniz üçün ən yaxşı seçim etməyə və veb səhifənizin sürətinə necə töhfə verməyə imkan verir.

Wix kimi üçüncü tərəf veb sayt qurucularının artan populyarlığı və incəliyi ilə, dizaynerlərə səliqəli olmaq asandır, lakin şablonu yıxmaq və ya bir sayt qurmaqdansa yaxşı görüntü optimallaşdırma proseslərini inkişaf etdirmək və davam etdirmək üzərində dayanmaq..

İstinad və görüntü kreditləri:

  • PicupMedia.com
  • Hesablama.HomeDNS.org
  • BilişselSEO.com
  • StackOverflow.com
  • Mühərrikin.com.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map