Veb saytınız üçün şəkilləri necə optimallaşdırmaq və onları bütün qurğular üzərində işləmək (mobil, masaüstü, planşet üçün cavab verən şəkillər)

Şəkilləri optimallaşdırmaq niyə narahatdır? İcazə verin bunu soruşum; heç bir görüntüsü olmayan bir veb saytı son dəfə gördüyünüz zaman? "Heç vaxt" düzgün cavab olardı. ��‍♂️ Şəkillər sadəcə çox vacibdir. Bu, hətta sizinlə birlikdə getmək üçün yaramaz stok fotoşəkili haqqında da deyil "10 onlayn marketinq məsləhətləri" post. Şəkillər çox məqsəd üçün faydalıdır. Layihələri, dizayn elementini, loqotipləri, profil şəkillərini və bəli, blog şəkillərini də düşünün.


Açığı, 2020-də heç olmasa bir ovuc görüntü istifadə etmədən veb sayt əldə edə bilməzsiniz. Görünüşlər bir veb sayt sahibi üçün anlamaq üçün sadə deyil. Hansı şəkillərin istifadə ediləcəyi və harada olacağını müəyyənləşdirməklə yanaşı, bu görüntüləri sırf texniki baxımdan göstərmək problemləri var:

  • Cavablı şəkilləri bir çox cihazda necə çatdırmaq olar?
  • Bütün bu cihazlarda necə gözəl görünmələri üçün?
  • Və ən başlıcası, layiqli vaxtda yüklədiklərini necə təmin etməkdir?

Bu gün cavab verdiyimiz suallar. Budur son bələdçiniz veb saytınız üçün şəkilləri necə optimallaşdırmaq və bütün cihazlarda gözəl görünmək üçün necə:

Veb saytınız üçün şəkilləri necə optimallaşdırmaq və onları bütün cihazlarda işləmək üçün necə

�� Niyə bizi dinləyin?

Görüntülər son vaxtlar bizim üçün çox vacib bir mövzu olmuşdur və buna görə ailəmizdə daha yeni vasitələrdən biri – Optimol.

Optimole, set-it-un-unu görüntü optimallaşdırma xidmətidir & vasitə. İnternetdəki ən yaxşı belə bir həll hesab edirik və sübut edə bilərik! Ancaq bu başqa bir dəfə danışmaqdır. Hər iki halda, illər keçdikcə şəkillərin düzgün optimallaşdırılması barədə çox şey öyrəndik. Bu biliklərin bir hissəsini bu gün sizinlə bölüşmək istəyirik.

�� Saytınızdakı şəkilləri niyə optimallaşdırmalısınız

Şəkillər, böyük görünməkdən əlavə, disk sahəsini və bant genişliyini də istehlak edir. Daha dəqiq desək, şəkillər standart bir veb səhifənin ölçüsünün 30% -85% -nə qədər bir şey təşkil edir.

sürət sınağı

Bu nəhəngdir – və görüntüləri silmək bir seçim deyil – buna görə edə biləcəyimiz ən yaxşı şey, görüntüləri sadəcə diskdən daha az yer tutan bir şəkildə necə optimallaşdırmağı öyrənməkdir..

Qazanclar böyük ola bilər və xüsusilə təkrarlanan şəkillərlə – hər fərdi veb səhifəyə yüklənməli şəkillər. Bunlar arxa plan, dizayn elementləri, loqotiplər, nişanlar və s. Bəzən yalnız bir arxa görüntünün optimallaşdırılması səhifənizin ölçüsünün 70% azaldılmasına səbəb ola bilər.+.

Bu misala baxın:

Şəkilləri optimallaşdırmadan əvvəl və sonra səhifə ölçüsü müqayisəsi

Ancaq tutun, daha da pisləşir! Ümumi görüntü performansı üçün mübarizə kifayət deyilsə, mobil aləm də var və bu, tamamilə yeni bir problem gətirir:

Əvvəlcə, masaüstünüzə gələn qonaqlara və mobil qonaqlara eyni görünüş dəsti göstərməməlisiniz. Kontekstlər tamamilə fərqlidir – buraya ekran ölçüləri, oriyentasiya (ümumiyyətlə portretdə) və oxuyan şəxsin düşüncə tərzi də daxildir..

Üstəlik, məlumatlar təklif edir daha az görüntüyə sahib mobil dizaynların dönüşüm baxımından daha yaxşı olmağa meyllidir.

Hamısı bir yerə yığıldıqda, bir neçə cihaz arasında cavab verən şəkilləri çatdırarkən diqqət etməli olduğumuz bir neçə şey var:

  • əvvəlcə xüsusi cihaz üçün şəkilləri optimallaşdırın
  • şəkillərin ən sürətli yükləmə müddətinə zəmanət vermək üçün maksimum məqbul səviyyəyə sıxılmış olduğundan əmin olun
  • cihazı və ekranı nəzərə alaraq optimal görüntü sayını göstərin

��‍♂️ Şəkilləri necə optimallaşdırmaq və bütün cihaz növləri üzrə çatdırmaq olar

Şəkillərinizin optimal şəkildə işlənməsini və daha sonra ziyarətçiyə mümkün qədər tez çatdırılmasının bir neçə komponenti var. Bu təlimatda, hamısını keçəcəyik:

The Düzgün formatı seçin

Yaşlı sualdan başlayaq: PNG və ya JPG?

Çoxu deyir "Həmişə JPG!" Ancaq bu doğru deyil:

PNG vs JPG

Bəli, çox vaxt, ya da heç olmasa görüntülərə ehtiyacımız ola biləcək ən çox görülən ssenarilərdə JPG-lər daha az disk sahəsi alır və buna görə də daha az bant genişliyi əldə edir.

Ancaq burada əsas söz "ən ümumi ssenarilər." Əslində, nə varsa rənglər və rəng keçidləri çox olan mürəkkəb bir görüntüdür (məsələn, çox.) "rəng məlumatları"), sonra JPGs daha yaxşı olacaq. Standart fotoşəkilləri düşünün. Olar JPG kimi daha yaxşı işləyirlər.

Ancaq bir az daha sadə bir görüntüyə sahibsinizsə, PNG hər zaman qazanacaq.

Aşağıdakı nümunəyə baxaq. Budur dörd görüntü:

şəkil-1-aşəkil 1-a: JPG

şəkil-1-bşəkil 1-b: PNG

şəkil-2-aşəkil 2-a: JPG

şəkil-2-bşəkil 2-b: PNG

  • şəkil 1-a 312 KB-dir
  • şəkil 2-a 196 KB

Digər iki görüntünün ölçüsünü təxmin etməyə çalışın …

Sizin cavabınız:

Səhv!

  • şəkil 1-b 1,3 MB-dır (bunu yəqin ki, təxmin etdiniz)
  • şəkil 2-b 106 KB (gözləyin, nə!)

Gördüyünüz kimi, PNG sadə, aşağı rəngli məlumat şəkilləri qazanır.

İnternet ekranı, sadə təsvirlər və s. Kimi şeyləri düşünün.

�� Dərs # 1:

Həmişə JPG üçün getməyin. Şəklin məzmununa görə nə qədər böyük olacağını əvvəlcədən təxmin edin və sonra düzgün şəkil növündən istifadə edin.

İndi bir az daha vaxtlı sual üçün: SVG? VebP?

SVG və WebP

SVG və WebP, İnternetdə bir az daha az yayılmış görüntü tipləridir, lakin bunların hamısı istifadə edilməyiniz qədər istifadə olunur. İcazə verin:

  • SVG bir XML əsaslı vektor görüntü formatıdır. Təsvirin məzmunu sadə bir XML sənədində müəyyən edilə bilər – digər əsas məlumatların işlənməsi məqsədləri üçün istifadə edəcəyiniz eyni XML faylı. SVG-ni sadə bir vektor görüntüsü ilə məşğul olduğunuz müddətcə yaxşı bir format halına gətirir.
  • WebP Google tərəfindən yeni bir formatdır. Onlar WebP-nin müqayisə olunan JPEG-lərə nisbətən 25-34%, müqayisə olunan PNG-lərdən 26% kiçik olduqları ilə fəxr edirlər.

Bəs görəsən nədir? Şəkilləri hamısını SVGs və WebP-lərə çevirərək optimallaşdıra bilərsinizmi??

Birincisi, SVG. Əsasən, SVG istifadə edin yalnız (a) şəkil səmərəli SVG kimi qeyd edilə bilər və (b) insanların bu SVG-ni götürüb dəyişdirməsinə fikir verməsən.

Dediyim kimi, SVG XML əsaslıdır, yəni SVG qrafikasını dəyişdirmək həqiqətən asandır. Bu həmişə istədiyiniz bir şey deyil – xüsusən markanın loqotipi və ya digər vacib qrafika ilə əlaqəli işlərdə.

Əksər ssenarilərdə SVG-lər çox istifadə edəcəyiniz bir format deyil.

İndi, üzərinə VebP. Format böyükdür və əksər hallarda, söz verildiyi kimi həqiqətən çox disk boşluğuna qənaət edir. Bu iki nümunə görüntüyə baxın:

jpg şəkil nümunəsi

webp şəkil nümunəsi

  • orijinal JPG versiyası 204 KB
  • WebP 58 KB-dir

Hiylə, bütün brauzerlərin WebP-ni dəstəkləməməsidir. Əslində yuxarıda istifadə etdiyim WebP görüntüsünü belə görə bilməzsiniz. Yazı zamanı WebP Google Chrome, Firefox, Edge və Opera’da işləyir. Əlbəttə ki, köhnə versiyalar formatı dəstəkləmir.

Təcrübədə bunun nə mənası var, bir WebP görüntüsünün əlavə edilməsi JPG və ya PNG əlavə etmək qədər sadə deyil.

Yəni texniki olaraq bu kimi bir parça istifadə edə bilərsiniz:

… lakin istifadəçi brauzeri formatı dəstəkləmirsə, əvəzində tanış pozulmuş görüntü simgesini görəcəklər.

Səmərəli WebP-dən istifadə etmək üçün geri zərbəli şəkillər təqdim etməlisiniz. Misal üçün:

Bu daha çox iş deməkdir. Bir blog yazıına və ya səhifəsinə bir WebP görüntüsü əlavə etmək istədiyiniz zaman hər dəfə belə bir etiket yaratmağı düşünün. İcazə verin, səni orada dayandırım, yox, WordPress doğrudan da WebP-i dəstəkləmir, buna görə də əl ilə bunu etməlisən.

Yenə də saytınızdakı çox səhifələrdə görünən şəkillərlə və ya böyük ölçülü şəkillərlə qarşılaşdığınız zaman bu mürəkkəb əl WebP marşrutu ilə getməyi məsləhət görürəm ki, bu ölçüsü bir qədər azaltmaq üçün hər vasitə lazımdır..

Şəkilləri Photoshop-da WebP olaraq saxlaya bilərsiniz və ya kimi bir vasitədən istifadə edə bilərsiniz XnConvert (pulsuz).

�� Dərs # 2:

Şəkilləri tez bir zamanda optimallaşdırmaq istəyirsinizsə SVG-lərdən istifadə etməkdən heç narahat olmayın. Onları yaratmağa sərf edəcək vaxtınız heç bir şey ödəməz (razı olmasa da, burada yaxşıdır) alternativ almaq). PNG-lər istifadə etmək üçün daha sürətli olacaq və disk boşluğu istehlakı baxımından daha pis deyil.

Birdən çox səhifədə görünən və ya kifayət qədər böyük olan görüntülərlə işləyərkən WebP istifadə edin. WebP emalını avtomatik olaraq idarə edə bilməyəcəyiniz halda, bəzi əlavə vasitələrlə edilə bilər. Bu vəziyyətdə hər yerdə WebP istifadə edin. Bu barədə bir saniyə sonra danışacağıq.

��️ Şəkilləri sıxışdırın

Şəklin sıxılması sehr kimidir. İcazə verin:

Bu eyni JPG görünüşüdür, yalnız fərqli bir sıxılma səviyyəsində (tez-tez keyfiyyət səviyyəsi adlanır) saxlanılır:

coon-100%100% keyfiyyətlidir

coon-95%95% keyfiyyətlidir

coon-85%85% keyfiyyətlidir

coon-50%50% keyfiyyətlidir

Bir çox insan kimi olsanız, ilk üçlük sizə bənzəyir. Dördüncüsü baxmağa başlayır "biraz pis." (Sağ vurun və "Şəkli Yeni tabda açın")

Bu görüntülərin hər birində disk sahəsi nə qədər alır:

  • 100% keyfiyyət: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Nəhəng, sağ ?! Sıxılmanı 100% -dən 95% -ə dəyişməklə keyfiyyətdə heç bir nəzərəçarpacaq dərəcədə itirilmədən ~ 1 MB-dan ~ 500 KB-a qədər gedə bilərsiniz..

Bu JPG sıxılma müxtəlif vasitələrlə kifayət qədər avtomatik idarə edilə bilər, bu da böyük xəbərdir. Bununla birlikdə, bütün şəkillər eyni şəkildə yaradılmır, buna görə bəzən eyni sıxılma prosesinə məruz qalmış olsalar da, pis görünüşlü görüntülərin yanında tamamən görünüşlü şəkillər əldə edə bilərsiniz..

Ümumiyyətlə, burada sıçrayış edə və JPG-lərinizin keyfiyyətini olduqca ağırlaşdıra bilərsiniz. Məsələnin həqiqəti budur ki, saytınızdakı qonaqlar xırtıldayan şəkillərə hər yerdə əhəmiyyət vermirlər.

Tamam, aydınlaşdırmalıyam; bəli, onlara bir şey göstərmək istəyəndə – məzmunun açarı olan bir şəkil kimi, məsələn, məhsul şəkilləri, otel otağı fotoşəkilləri – onda əmin olun ki, bunlar xırtıldayan olmalıdır.

Ancaq digər sahələrdə bir az daha rahat ola bilərsiniz. Məsələn, arxa plana 100% xırtıldayan olmaq lazım deyil. Ümumiyyətlə, ziyarətçinin birbaşa işləmədiyi bütün şəkillər keyfiyyət baxımından daha aşağı ola bilər.

Burada sizə kömək edə biləcək ən çox sevdiyim iki vasitə bunlardır:

ImageOptim masaüstündəki sıxılma üçün. Yalnız bir masaüstünden bir şəkil çəkə, ImageOptim üzərinə sürükleyin və sonra alət sehrini düzəldir və qaynaq görüntüsünün üzərinə yazır.

Sonra, bu görüntünü əldə edə və normal olaraq saytınıza yükləyə bilərsiniz.

ImageOptim - masaüstünüzde şəkilləri optimallaşdırmaq üçün əla vasitədir

İkinci vasitə Optimol. Bu vasitə, görüntülərin veb saytlarda necə aparıldığını olduqca yenidən təyin edir. Bu müzakirə üçün, media kitabxananızdakı şəkilləri optimallaşdırmaq istədikdə həqiqətən təsirli olduğunu söyləyin.

optimole - buluddakı şəkilləri optimallaşdırmaq üçün əla vasitədir

İndi PNGs üzərində. Yalnız JPGs kimi PNG-lər də sıxıla bilər. Ancaq bu dəfə keyfiyyət itkisi baxımından heç bir mənfi tərəf yoxdur. PNGs itkisiz alqoritmlərdən istifadə edərək effektiv şəkildə sıxıla bilər.

Başqa sözlə, həmişə PNG-lərinizi sıxın!

Bu üç görüntüyə baxın:

kwf-1
kwf-2

kwf-3

Eyni görünsələr də, əslində tuturlar:

  • 346 KB
  • 215 KB
  • 100 KB

Hansının olduğunu təxmin etməyə çalışın.

Şəkillərinizi sıxmaq və onları daha kiçik etmək üçün üç vasitə:

  • ImageOptim yenidən. Ancaq bu PNG-lərlə çox vaxt aparır, buna görə də işləmək üçün çoxunuz varsa, alət işləyərkən özünüzə bir fincan qəhvə etmək istəyə bilərsiniz..
  • ImageAlpha. ImageOptim’dən daha sürətli. PNG-lər üçün masaüstün həll yolu.
  • Optimol. Təəccüblü deyil ki, Optimole də PNG sıxılmasını idarə edir. Hər şey avtopilotda olur.

�� Dərs # 3:

Disk sahəsi ilə məqbul bir keyfiyyət səviyyəsinə çatmaq üçün JPG’lərinizi sıxın.

Həmişə PNG-lərinizi sıxın.

The Düzgün ölçülü şəkillərə xidmət edin

Bu, bəlkə də bütövlükdə ən vacib məqamdır "cavab verən şəkillər" tapmaca. Bildiyimiz kimi, yüzlərlə fərqli ekran ölçüləri olmasa on minlərlə var və biz nəyəsə şəkillərimizin hamısında əla görünəcəyinə əmin olmalıyıq..

Asan həll? Böyük bir görüntüyə xidmət edin … onu həmişə kiçiltmək olar, elə deyilmi? Bəli, texniki cəhətdən bu düzgündür, amma praktikada bu çox bant genişliyini itirəcək və saytınızdakı yükü çox cihazlarda həqiqətən yavaş-yavaş edəcək..

Daha yaxşı bir həll, bütün görüntüləri ən çox yayılmış qurğuların üstünlük verdiyi ölçülərə uyğunlaşdırmaq və sonra onlara uyğun olaraq xidmət etməkdir.

Gözlədiyiniz kimi, buna nail olmaq üçün eyni görüntünün fərqli versiyalarına ehtiyacınız var.

Bunun yollarından biri, dizaynınızın əsas genişliyi və istifadə edilə bilən ən böyük görüntü ölçüsü ilə başlamağınız və sonra bəzi ümumi qurğular və açılış nöqtələri üçün oradan aşağıya endirilməsidir..

Məsələn, əksər saytlar məzmun blokunun eni üçün 1100 px işarəsindən yuxarı qalmır, buna görə də bu vəziyyətdə göstərilə bilən maksimum görüntünün eni 1100 px olacağını güman edə bilərsiniz..

Sonra, planşet və mobil ssenariləri əhatə etmək üçün 800 px və 550 px (ümumi dəyərlər) üçün nöqtələr yarada bilərsiniz. Bu, bütün cihazlarda 100% mükəmməl nəticə verməyinizə baxmayaraq, ən azı məqbul dərəcədə optimallaşdırırsınız və şəkillərinizi nəzarət altında saxlayırsınız.

Bunun arxasında, indi saytınızda istifadə etmək istədiyiniz hər görüntünün bir ovuc fərqli versiyasını yaratmalısınız.

Həqiqi ekran kodunu idarə etmək üçün bir nümunə:

Srcset atributunun sehri budur ki, brauzer içindəki şeylərə baxır və istifadə olunan cihaz əsasında ən yaxşı görüntü seçir.

Yuxarıda görə biləcəyiniz daha bir özelleştirme ölçülər atributudur. Bu, brauzerə görüntünün müəyyən ekranlarda necə davranacağını izah edir. Bu ssenaridə görüntü 1100 px-dan böyük olan görüntülərdə göründüyü zaman 1100 px olacaq, kiçik cihazlarda isə bütün görüntü yerini alacaq..

Bu cür həll, görüntünün 3840px genişlikdə 4K ekranı tutmadığına əmin olur. Bununla birlikdə, mobil görüntülədikdə yenə də bütün ekranı tutacaqdır.

Ölçülər atributunun bu effektiv istifadəsi, şəkillərinizi həqiqətən həssas etdiyinizdir.

⭐ Pro hiyləsi: Lazım olduğundan 10% daha kiçik olan şəkillər üçün gedin və sonra brauzerin onları böyütməsinə icazə verin. Bu, əlavə bir yer və bant genişliyinə qənaət edəcəkdir. Məsələn, 500 × 500 px ölçüsündə bir şəkil tələb etsəniz, şəklinizi 450 × 450 px ölçüsünə çatdıra bilərsiniz və sonra brauzerin 500-ə qədər ölçüsünə icazə verə bilərsiniz. Bu görünüşdən asılıdır, lakin əksər hallarda istifadəçi fərq etməz.

�� Dərs # 4:

Dizaynınız üçün düzgün şəkil ölçülərindən istifadə edin.

Keçid nöqtələri yaradın.

Keçid nöqtələrini əhatə etmək üçün eyni görüntünün çox versiyasını yaradın.

Şəkilləri göstərərkən srcset və ölçülər atributlarından istifadə edin.

İmages Retina və HiDPI ekranları üçün şəkilləri optimallaşdırın

Şəkil ölçüsü spektrinin digər ucu HiDPI-yə uyğun şəkillər haqqında.

Hekayə, masaüstü ekranların böyüdükcə artması və piksellərinin getdikcə daha sıx şəkildə yığılmalarıdır. Bu günlərdə nadir hallarda deyil 4K ekran 15 düymlük noutbuka yığılmışdır. 4K qətnaməsi 3840 × 2160 pxdır, buna görə də bu piksellərin hər biri həqiqətən kiçik olmalıdır.

Bu saytlarda problem yaradır. Əsasən, əgər saytınız eni 1100 px olaraq təyin olunarsa, normal şəraitdə, yalnız 4K ekranı mövcud ekran əmlakının təxminən 25% -ni alacaq. Bu optimal deyil. Xoşbəxtlikdən, işlər belə işləmir.

Məsələnin qarşısını almaq üçün o yüksək ekranlı ekranlar sanki yarısının ölçüsündə olduqları kimi hərəkət edirlər (mən çox artırıram, amma məni eşidirəm). Beləliklə, bir HiDPI ekranın kiçik bir hissəsini tutan 1100 px genişlikli veb saytınızın əvəzinə, 2200 px-ı götürərək ekranı daha yaxşı dolduraraq ikiqat artırılır.

Bu proses, ekranlarda hər şeyi kiçik görünmədən daha kəskin və kəskin olmağa imkan verir.

Ancaq bu təcrübə öz qüsurları olmadan deyil. Əsasən, görüntüləriniz böyük bir vuruş alır. Mətn keyfiyyətini itirmədən böyütmək asandır. Şriftlər miqyaslanmağa qarşı immunitetlidir. Şəkillər belə deyil. Birbaşa nəticə olaraq, HiDPI ekranlarına hazır olmayan hər bir görüntü bulanıq, ağır görünür!

Bunu düzəltmək üçün, böyüdücü nisbətlərin hər biri üçün ölçülü şəkillər təqdim etməlisiniz. Budur bir neçə sadə kod:

(Brauzer srcset-i dəstəkləmirsə, standart src istifadə olunur.)

İndi deyəndə "ölçülü şəkillər," Əslində demək istəyirəm ki, digər tərəfdən başlamalısınız. Böyük bir görüntü ilə başlayın (3x etiketləyin), sonra kiçiltin və daha kiçik (2x) edin və nəhayət 1x edin və standart görüntü kimi istifadə edin.

�� Dərs # 5:

Loqotipləriniz, marka şəkilləriniz və yazılarınızda və səhifələrinizdə istifadə olunan bütün şəkillərin HiDPI ekranlarına hazır olduğundan əmin olun.

İmage Şəkil yüklənməsini təxirə salın

Bu prinsipcə sadədir; qatdan yuxarı olan bütün şəkillər dərhal yüklənməlidir (səhifə yüklədikdə). Qalan hər şeyi sonradan və hətta təxirə salmaq olar "tənbəl yüklü."

Tənbəl yükləmə – tələb olunan görüntü yüklənməsi. İ.ə., şəkillər istifadəçinin ehtiyac duyduğu yerdən yalnız bir aralığa yüklənir – gec olmayaraq. Və bu "gec deyil, gec deyil" hissəsi burada əsasdır.

İdeal bir ssenaridə, görüntü görüntüsünə sürüşmədən əvvəl yüklənməlidir. Yəni şəkil görünməzdən əvvəl istifadəçi bir yerdəyişən görməməlidir. Bu baş verərsə, görüntünü vaxtında yükləməyi bacarmadan keçə bilər – şəkilləri optimallaşdırmaq üçün əla bir yol deyil.

Dedi ki, tənbəl yükləmə WordPress saytlarında etmək asan bir işdir. Siz JavaScript / jQuery ilə tənbəl yükləyə bilərsiniz və istədiyiniz təqdirdə özünüz üçün kodu da yaza bilərsiniz. Alternativ olaraq, kimi bir plagin əldə edə bilərsiniz a3 tənbəl yük, və ya istifadə edə bilərsiniz Optimol, daxil olan tənbəl bir yükləmə modulu var.

�� Dərs # 6:

Yatağın altındakı şəkilləri yükləyin.

İmages Şəkilləri bir CDN vasitəsilə çatdırın

Məzmun Çatdırılma Şəbəkəsi sayt sürətinə görə fırıldaqçı kod kimidir. Aldatırsınız, çünki saytınızı daha sürətli düzəltmirsiniz, başqasına yükü götürməyinizi və saytın məlumatlarını ziyarətçinizə çatdırmağı tapşırdığınıza görə.

CD CDN-ləri burada daha dərindən danışdıq, yoxlayın.

TL; DR, CDN-lərin hamınız saytınızın bir nüsxəsini saxlayan və sonra ən yaxın yerdən ziyarətçiyə çatdıran bir server şəbəkəsindən faydalanmasıdır. Bu həmişə əsas serverinizdən çatdırmaqdan daha sürətli olacaq.

Image CDN-lər eyni dərəcədə eyni işləyir, ancaq diqqəti yalnız şəkillərə yönəldin.

Əksər vaxt əməliyyat nöqteyi-nəzərdən mürəkkəbdir. Saytınızdakı bütün şəkillər CDN-in əsas versiyaları ilə əvəz olunur (şəkil URL-lərinin dəyişməsi deməkdir).

  • Jetpack içərisində məşhur bir CDN təsviri var. Siz pulsuz olaraq istifadə edə bilərsiniz. Əsas məhdudiyyət yalnız mesajlarınızdakı, səhifələrinizdəki və görüntülərinizdəki şəkillərlə işləməsidir. Dizaynınızı tərtib edən hər hansı bir şəkil üçün işləmir (mövzunun hissələri, sxem və s.). Bunlar, həqiqətən, bəzi CDN-ing istifadə edə biləcək şəkillərdir.
  • Optimol əsas görüntü optimallaşdırma xüsusiyyətinin bir hissəsi olaraq quraşdırılmış CDN-ə malikdir. Bu yalnız yazılarınız və səhifələrinizlə məhdudlaşmır.

�� Dərs # 7:

Saytınızı bir CDN (Jetpack və ya Optimole) və ya ümumi bir CDN-ə bağlayınMaxCDN / StackPath).

Slow yavaş bağlantılarda istifadəçilərə kiçik şəkillərə xidmət edin

Istifadəçinin hansı görüntünün görülməsinə qərar verərkən nəinki ekran ölçüsü. Yəqin ki, daha da önəmlisi, yavaş bir internet bağlantısı varsa, həqiqətən bir görüntünün yüklənməsi üçün 10 saniyə gözləmək istəmirlər.

Bu ssenarilərdə yükləmə vaxtı əvəzinə şəkillərinizin keyfiyyətini aşağı salmaq daha yaxşı bir fikirdir. Yavaş əlaqələrdə olan istifadəçilər şəkilləri ümumiyyətlə görə bildiklərini qiymətləndirəcəklər.

Şəbəkə Məlumatı API istifadə edərək bunu edə bilərsiniz. Budur gözəl bir dərs əl ilə həyata keçirmək istəyirsinizsə, bunun hamısının necə işlədiyinə dair.

Yenidən avtopilotda idarə olunmasını istəsəniz, Optimol!

�� Dərs # 8:

Daha yavaş internet bağlantılarında istifadəçilərə daha kiçik və daha sıxılmış şəkillərə xidmət edin.

�� Alətlər alətləri!

Yolda, saytınızın görüntülərini daha təsirli etmək üçün istifadə edə biləcəyiniz bir sıra vasitələrdən bəhs etdim. Bunların xülasəsi:

  • Optimol – şəkilləri avtomatik olaraq optimallaşdırmağa, onları sıxışdırmağa, ziyarətçinin baxış məkanı üçün düzgün şəkil ölçüsünü seçməyə imkan verir, CDN vasitəsilə görüntüyə xidmət göstərir, tənbəl şəkillər yükləyir, daha yavaş əlaqə sürəti ilə işləyir.
  • ImageOptimImageAlpha – Mac-da masaüstündəki görüntü sıxılmasını idarə edin. İstifadə edə bilərsən TinyPNG Win üzərində. Şəkilləri saytınıza yükləməzdən əvvəl bunu edin.
  • XnConvert – şəkilləri WebP-yə çevirməyə imkan verir.
  • a3 tənbəl yük plugin – tənbəl bütün şəkilləri yükləyin.
  • Jetpack plugin – pulsuz bir şəkil CDN ilə gəlir.
  • MaxCDN / StackPath – yalnız görünüşlərə deyil, bütün saytınıza qayğı göstərəcək ümumi bir CDN.

şəkilləri optimallaşdırmaq üçün vasitələr

�� Əlavə oxu:

  • WP Smush vs ShortPixel vs Optimole vs Təsəvvür edin: WordPress şəkillərini optimallaşdırmaq üçün ən yaxşısı nədir? Baş-baş müqayisə
  • Bloglar üçün pulsuz şəkillər – onları necə əldə etmək olar & onlardan səmərəli istifadə edin (xəbərdarlıq! bəlli olmayan məsləhətlər, məlumatlar dəstəklidir)
  • WordPress performansını sürətləndirməyin 11 yolu
  • Veb sayt sürətinin optimallaşdırılması: 2019-cu ildə necə ediləcək
  • Sürətli WordPress hosting – birini tapmaq üçün yeni təlimatçı

��‍♂️ TL; DR:

Yuxarıda paylaşılan bütün fərdi dərslərin xülasəsi:

Dərs # 1:

Həmişə JPG üçün getməyin. Şəklin məzmununa görə nə qədər böyük olacağını əvvəlcədən təxmin edin və sonra düzgün şəkil növündən istifadə edin.

Dərs # 2:

Şəkilləri tez bir zamanda optimallaşdırmaq istəyirsinizsə SVG-lərdən istifadə etməkdən heç narahat olmayın. Onları yaratmağa sərf edəcəyiniz vaxt pul vermir (razı qalmağınıza baxmayaraq). PNG-lər istifadə etmək üçün daha sürətli olacaq və disk boşluğu istehlakı baxımından daha pis deyil.

Birdən çox səhifədə görünən və ya kifayət qədər böyük olan görüntülərlə işləyərkən WebP istifadə edin. WebP emalını avtomatik olaraq idarə edə bilməyəcəyiniz halda, bəzi əlavə vasitələrlə edilə bilər. Bu vəziyyətdə hər yerdə WebP istifadə edin. Bu barədə bir saniyə sonra danışacağıq.

Dərs # 3:

Disk sahəsi ilə məqbul bir keyfiyyət səviyyəsinə çatmaq üçün JPG’lərinizi sıxın.

Həmişə PNG-lərinizi sıxın.

Dərs # 4:

Dizaynınız üçün düzgün şəkil ölçülərindən istifadə edin.

Keçid nöqtələri yaradın.

Keçid nöqtələrini əhatə etmək üçün eyni görüntünün çox versiyasını yaradın.

Şəkilləri göstərərkən srcset və ölçülər atributlarından istifadə edin.

Dərs # 5:

Loqotipləriniz, marka şəkilləriniz və yazılarınızda və səhifələrinizdə istifadə olunan bütün şəkillərin HiDPI ekranlarına hazır olduğundan əmin olun.

Dərs # 6:

Yatağın altındakı şəkilləri yükləyin.

Dərs # 7:

Saytınızı bir CDN (Jetpack və ya Optimole) və ya ümumi bir CDN-ə bağlayınMaxCDN / StackPath).

Dərs # 8:

Daha yavaş internet bağlantılarında istifadəçilərə daha kiçik və daha sıxılmış şəkillərə xidmət edin.

Mümkün qədər veb üçün şəkilləri optimallaşdırmaq üçün bütün problem barədə düşündüyünüzü bildirin. Ayrıca, şəkillərinizi daha sürətli yükləmək üçün nə edirsiniz? Şərhlərdə paylaşın.

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

Layihə, təqdimat və Karol K tərəfindən redaktə.

* Bu yazıda filial əlaqələri var, yəni məhsul əlaqələrindən birini vurub məhsulu satın alsanız, kiçik bir ödəniş alacağımızı bildirir. Narahat olmayın, yenə də standart məbləği ödəyəcəksiniz, buna görə sizin tərəfinizdə heç bir xərc yoxdur.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map