Veb üçün Şəkilləri optimallaşdırmaq üçün Bloggerin təlimatı

Şəkilləri sevmirsiniz?

Oxuduğunuzda bir mətni cəlbedici bir təcrübəyə çevirə bilərlər. Şəkillər blog yazılarını artırır, daha paylaşımlı edir və bütün saytınız üçün ton və marka təyin edir.

Bilirsən nədir? Görüntülərə cavab vermək üçün proqramlaşdırılmışdır. Buna görə şəkillərin içinizə daxil edilməsi blogunuzu marketinq edərkən istifadə etmək üçün güclü bir vasitədir.

Diqqətli deyilsinizsə, şəkillər veb saytınızın ümumi ölçüsünün yarısından çoxunu və ya daha çoxunu təmsil edə bilər. Bir neçə il əvvəl bir veb səhifənin orta ölçüsü 600-700K idi. İndi orta 2 MB və hər il artır.

Bu böyükdür!

Bunun baş verməsinin əsas səbəbi, çoxsaylı şəkillərin veb səhifələrdə daha çox istifadə edildiyi və bu görüntülərin düzgün ölçülmədiyi və optimallaşdırılmamasıdır. Bu o deməkdir ki, onlar veb-dostluq şəklində saxlanılmır və tərtib edilmir və bunun əvəzinə səhifələrinizi şişirir.

Ancaq bir çoxumuz optimallaşdırma şəkillərini bir sonrakı vəziyyət olaraq buraxırıq və nişinizdəki digər bloggerlərlə birlikdə epik yazı və ya şəbəkə yaratmaq kimi əyləncəli işlərlə məşğul olurduq.

Səhifənin şişmiş olması səhifənizin yükləmə sürətinin təsir etdiyini göstərir. Yüksək sürətli bir əlaqədə olsanız, bu böyük bir şey olduğunu düşünə bilməzsiniz, ancaq ziyarətçilərinizin çoxu bunu etmir. Ayrıca, Google yavaş yükləmə səhifələrini sevmir və SEO-ya mənfi təsir göstərə bilər.

Şəkilləri niyə optimallaşdırmaq lazımdır?

Məşhur məzmun yaratmaq üçün çox çalışırsınız və digər bloggerlərlə bloqunuzu və şəbəkələrinizi təbliğ etmək üçün saysız-hesabsız vaxt sərf edirsiniz, buna görə istəyəcəyiniz son şey, potensial ziyarətçilərin veb saytlarınızı yükləmədən əvvəl tərk etmələri üçündir!

Tədqiqatlar göstərir ki, saytın yüklənməsi üç saniyədən çox çəkirsə, ziyarətçilərin 40% -ə qədəri Geri düyməsini basın.

Bilirəm, üç saniyə həqiqətən də uzun deyil, amma mobil bir əlaqə qurduğunuzda və saytın yüklənməsini gözlədiyiniz zaman bir saniyə əbədi görünə bilər.

Ziyarətçilərinizin yarısı daha yavaş mobil əlaqədə olduqları üçün aydındır: səhifənizin ölçüsünü azaltmalısınız. Səhifənin ölçüsünə görə ən böyük cinayətkarın kim olduğunu bilirik – bu onların görünüşləridir.

Lazımsız böyük şəkillər də hosting hesabınızda yer tutur. Bəzilərinizdə "limitsiz" saxlama sahəsi olan bir yer ola bilərsə, bir çox mükafat alan provayder onu 10 ilə məhdudlaşdırır GB aşağı səviyyəli planlarda saxlama. Xüsusilə eyni hesabda bir çox görüntü olan bir çox sayta sahib olsanız, bu, tez bir şəkildə doldurula bilər.

Beləliklə, şəkillərinizin saytınızı yavaşlatdığını necə deyə bilərsiniz? Google PageSpeed ​​Insights ilə saytınızın sürətini sınayın.

Google Səhifələr

Google, optimallaşdırılmamış şəkillərin bir problem olduğunu bildirsə, onu düzəltmək üçün bilmək lazım olanı budur.

Şəkil optimallaşdırma əsasları

Bloqunuzdakı şəkilləri optimallaşdırmağa gəldikdə, yadda saxlamağınız lazım olan bir neçə fərqli şey var: fayl növü, görüntü ölçüsü və ölçüləri, şəkillərinizə necə qulluq etdiyiniz və görüntünün sıxılması.

Bu sahələrin hər birini daha yaxından nəzərdən keçirək.

Faylın növü

İnternetdəki şəkillər ümumiyyətlə PNG və ya JPEG fayl formatında və ya animasiya üçün GIF-də saxlanılır. İnternetdə üzən o məzəli cizgi GIF-lərini kim sevmir!

İndi texniki cəhətdən yaxşı Şəkillərinizi istənilən formatda saxlasanız, ziyarətçinizin brauzerində veb səhifənizi göstərməyinizdə heç bir problem olmayacaq, lakin ən yaxşı keyfiyyət və optimallaşdırma əldə etmək üçün aşağıdakı qaydalara əməl edin.

  • JPEG – İnsanları, yerləri və ya əşyaları göstərən fotoşəkillər və planlar üçün istifadə olunur
  • PNG: Qrafika, loqotiplər, çox sayda mətn, ekran görüntüləri və şəffaf arxa şəkillərə ehtiyacınız olduqda idealdır
  • GIF: animasiyaya ehtiyacınız varsa, əks halda PNG istifadə edin

Bəs niyə fərqli formatlar var?

Yaxşı PNG, loqotipləri və qrafikləri qorumaq üçün ənənəvi olaraq istifadə olunur, çünki orijinal görüntü keyfiyyətini qoruyur – heç kim bulanıq mətn və piksel şəklini istəmir. Ancaq bir fotoşəkli PNG olaraq saxlamağa çalışsanız, heyrətamiz görünəcək, ancaq ortaya çıxan fayl ölçüsü təəccüblüdən daha az olacaq.

JPEG, fotoşəkilləri saxlamaq üçün ənənəvi olaraq istifadə olunur. Bəzi görüntü məlumatları kəskin şəkildə daha kiçik bir fayl ölçüsü yaratmaq üçün cızılır, lakin fotolarda müxtəlif rənglər və təbii dəyişikliklər olduğu üçün keyfiyyət itkisi ümumiyyətlə insan gözü üçün nəzərə çarpmır.

Daha sonra sıxılma haqqında daha çox məlumat əldə edəcəyik, ancaq indi yalnız iki şeyi xatırlayırsınızsa, unutmayın: fotoşəkillər üçün JPEG və mətn / qrafika üçün PNG.

Şəkil ölçüləri

Heç bir veb səhifəni yükləmisiniz və kiçik bir görüntünün (bəlkə də bir başlıq şəklini) yükləmək üçün f-o-r-e-v-e-r aldığını görmüsünüz? O qədər yavaş ki, gələn hər sətir görə bilirsən? Öz-özünə düşünürsən ki, bu qədər kiçik bir görüntüyü yükləmək üçün bu qədər uzun çəkə bilərmi?

Headshot yan çubuğu

Böyük bir başlıq görüntüsü ilə qarşılaşdıqda, daha da pisdir, çünki bütün səhifəni yükləməyi dayandıra bilər.

Bunun baş verməsinin səbəbi, bloggerin imicini düzgün ölçüdə dəyişdirmədiyi və optimallaşdırmamasıdır və başımızın nümunəsi vəziyyətində, tam qətnamə JPEG-ni birbaşa DSLR kamerasından yükləyə bilər.

Və bu böyük bir fayldır!

Bir veb brauzer (adətən) bir veb səhifəsinə yaxşı yerləşdirmək üçün bir görüntünü orijinal ölçülərinə qədər ölçəcəkdir. Kiçik bir ekran görüntüsü əslində brauzer tərəfindən real vaxtda azaldılmış böyük 10 meqapikselli bir şəkil ola bilər.

İndi bəzi veb nəşr platformaları, tam ölçülü görüntülərinizi müxtəlif ölçülərdə avtomatik olaraq çoxsaylı dəyişikliyə çevirəcəkdir, əgər belə deyilsə, əvvəlcədən Photoshop, Lightroom, Pixlr və ya hətta MS Paint kimi bir şəkil redaktorunda şəkillərinizin ölçüsünü dəyişdirməlisiniz. . 50K faylı və 5MB faylı arasındakı fərqi ifadə edə bilər.

Pixlr ölçüsünü dəyişdirin

Məsələn, WordPress, görüntünü hər zaman tam ölçüdə istifadə etmək əvəzinə, blog yazılarında istifadə edə biləcəyiniz fərqli ölçüləri olan yüklədiyiniz şəklin avtomatik olaraq üç (və ya daha çoxu, mövzuya görə) nüsxəsini yaradacaqdır.

Şəkil ölçüsü parametrləri

Böyük bir şəkil fotoşəkillərini yükləmək vərdişiniz varsa və ev sahibi hesabınızda yer saxlamaq istəyirsinizsə, WordPress İmsanity plagini sizi dəstəkləyir.

Ölçüsünü dəyişdirin və daha idarə edilə bilən bir şeylə əvəz edin, belə ki, yazıya tam ölçülü şəkil daxil etsəniz belə pis olmaz.

Aktivləşdirildikdən sonra İmsanity mövcud şəkillərinizi də axtara bilər və müvafiq olaraq ölçüsünü dəyişə bilər.

İmsanity Plugin

Şəkillərinizə xidmət edir

Görüntülərinizi ziyarətçilərinizə necə çatdırmağınız, sadəcə olaraq onları optimallaşdırmaq barədə deyil, səhifənizin yüklənmə vaxtına kəskin təsir göstərə bilər.

Bloqerlərin əksəriyyəti şəkillərini birbaşa hosting hesablarından göndərirlər və bu, ümumiyyətlə yaxşıdır, ancaq həqiqətən hər saytın performansını sıxmaq istəsəniz, görüntülərinizi məzmun çatdırılması şəbəkəsində (CDN) yerləşdirə bilərsiniz. böyük fərq.

Bir CDN, dünyada məlumat mərkəzlərində yerləşən strateji olaraq yerləşən veb serverlərdən ibarətdir. Bu serverlər şəkillərinin dublikat nüsxələrini qəbul edir və bir ziyarətçi brauzeri veb saytından bir şəkil istədikdə CDN avtomatik olaraq brauzerini coğrafi baxımdan daha yaxın bir serverə göstərir.

Bu, Avropaya gələnlərin, məsələn, ABŞ və ya başqa bir yerdən deyil, yerli bir Avropa serverindən görüntü alacağını ifadə edir. Cavab müddəti və şəbəkənin gecikməsi azaldıqca şəkillər daha sürətli yüklənir və səhifə yükləmə müddətini azaldır.

Blog Sihirbazı Sucuri'dən istifadə edir (təhlükəsizlik üçün bir Firewall və CDN daxildir), lakin digər keyfiyyət təminatçıları var Amazon Cloudfront və ya KeyCDN. Hətta ciddi bir CDN olmayan məşhur CloudFlare də pulsuz bir CDN təqdim edir və çox paylaşılan hosting paketlərində konfiqurasiya etmək asandır.

Bulud alovu

Şəkərin sıxılması

Şəkillərinizi optimallaşdırmağa gəldikdə, fayl ölçüsünüzü qabaqcıl itirilmiş görüntü sıxılmasından daha az azaldır.

Canva və ya Photoshop kimi bir çox görüntü tənzimləmə vasitəsi, ən yaxşı fayl ölçüsü azalmasına sahib olduğu üçün itkin JPEG sıxılma fayllarını xilas edəcəkdir. Təsvirin keyfiyyəti bir qədər azalsa da, zərərli görüntü sıxılmasının istifadəsi nəhəng şəkilləri veb uyğun ölçülərə endirir.

Əminəm ki, Photoshop istifadə edənlərin çoxu bunları görə bilər İnternet üçün saxla görünüş optimallaşdırmasının bütövlüyü və sonu kimi xüsusiyyət. Və hətta PicMonkey və ya Canva kimi onlayn şəkil tənzimləmə vasitələri də şəkillərinizi optimallaşdırır.

Canva optimallaşdırır

Ancaq "optimallaşdırılmış" şəklinizi Photoshop-dan və ya digər tənzimləmə vasitələrindən götürə bilən, başqa 40% (və ya daha çox) tərəfindən sıxaraq sıxışdıra bilən vasitələrin olduğunu bilirdinizmi? yenə də Demək olar ki, insan gözü ilə eynidir?

Optimallaşdırma prosesi

Şəkillərinizi veb uyğun bir vəziyyətə salmağınıza kömək edən bəzi pulsuz və pullu vasitələr.

Masaüstü alətlər

ImageAlpha / ImageOptim

Mac istifadəçisi üçün ImageAlpha və ImageOptim, yükləmədən əvvəl PNG şəkillərini, əsasən ekran görüntülərini optimallaşdırmaq üçün hər gün istifadə etdiyim iki pulsuz masaüstü vasitədir. Bu vasitələrdən istifadə etmək asandır, sənədlərinizi sürükləyin və atın, ancaq bir anda bir görüntü etməlisiniz.

Peşəkar məsləhət: Texnologiya mütəxəssisləri üçün bir anda bütün görüntü qovluğunu optimallaşdıra biləcəyiniz ImageOptim – CLI var.

ImageAlpha itkisiz bir PNG kompressorudur və PNG sənədlərini azaltmaqla möcüzələr edə bilər, ImageOptim isə qabaqcıl itkisiz sıxılma (zərər seçimi ilə) həyata keçirir və PNG, JPEG və GIF sənədlərindən lazımsız metadataları silir.

PNG şəkillərim üçün əvvəlcə ImageAlpha vasitəsi ilə onları idarə edirəm:

Alfa görüntüsündən istifadə

Budur, ekran görüntüsümü 103K-dan 28K-a endirdim.

Sonra ImageOptim vasitəsilə qaçdım və əlavə 10% qənaət etdim.

Şəkil optimi

JPEGmini

JPEG sənədlərim üçün onları Mac üçün mövcud olan JPEGmini masaüstü tətbiqi ilə optimallaşdırıram Windows.

Lite versiyası gündə 20 görüntüyü pulsuz olaraq optimallaşdırmağa imkan verir və həddi çıxarmaq üçün 19.99 dollara başa gəlir.

jpeg Mini

Peşəkar məsləhət: JPEGmini bir plugin vasitəsilə Photoshop və ya Lightroom-a birləşdirmək istəyən qabaqcıl istifadəçilər Pro versiyasını 99.99 dollara satın ala bilərlər.

Onlayn / Bulud / SaaS alətləri

TinyPNG

tinypng

Yüksək keyfiyyətli bir onlayn görüntü sıxılma vasitəsi axtarırsınızsa, TinyPNG (adına baxmayaraq JPEG fayllarını optimallaşdırır), 20-dən çox şəkil çəkməyə imkan verən bir veb tətbiqidir. 5 MB və ya brauzerinizdə daha kiçik və onları optimallaşdırın. birdən.

Ayrıca bir geliştirici API var və yüklədikdə şəkillərinizi avtomatik optimallaşdıra biləcək bir WordPress plaginini hazırlayır.

TinyPNG sizə ayda 500 pulsuz görüntü optimallaşdırması təklif edir, sonra isə dollardan tutulur 0.002-0Həcmdən asılı olaraq bir görüntü üçün .009.

İndi ayda 500 şəkil çox görünə bilər, ancaq WordPress-in tez-tez müxtəlif ölçülərdə hər görüntünün üç-beş dəyişikliyini yaratdığını nəzərə alsaq, 500 görüntü görünmür bu qədər çox prolific blogger üçün. Xoşbəxtlikdən, bir görüntünün qiyməti ucuz deyil.

Kraken.io

Kraken

Digər populyar bir onlayn vasitə Kraken-dir. Hər şeydən əvvəl ödənişli bir vasitə olsa da, şəkilləri öz veb saytlarına məhdudiyyətlərlə pulsuz yükləmək seçimi var. Yalnız şəkilləri yükləyə bilərsiniz 1 MB ölçüsü; əks təqdirdə xidmət üçün ödəməlisiniz.

Abunəçilər üçün mövcud olan bir WordPress plagini var və plugin, media kitabxananıza yüklədiyiniz zaman avtomatik olaraq şəkillərinizi optimallaşdıracaqdır.

Daha çox şəkilləri sıxışdırmaq lazımdırsa 1 MB, və ya sadəcə şeyləri avtomatlaşdırmaq istəsəniz, Micro planından $ a qədər gedən bir abunə üçün seçim edə bilərsiniz 5 / ay 500 üçün MB Görünüşlər, $ 70 / a qədər $ 60-a qədər müəssisə planı GB ayda optimallaşdırılmış şəkillərdən.

EWWW Şəkil Optimizer

Ewww

Pul xərcləməyə hazır deyilsinizsə və şəkillərinizi əl ilə optimallaşdırmaqdan narahat olmaq istəmirsinizsə, WordPress üçün pulsuz EWWW Image Optimizer plugin yüklənmiş şəkillərinizi avtomatik optimallaşdıra bilər.

Zərərli bir sıxılma həyata keçirən bir mükafat abunəliyinə üstünlük verə bilərsiniz, ancaq pulsuz versiya yalnız itkisiz sıxılma həyata keçirir, buna görə qənaət o qədər də böyük deyil. Ancaq vaxtınıza qənaət edəcək və heç bir şeydən yaxşı deyil.

Qucaqlamaq

Bəzi insanlar orta veb ölçüsünün bunlara yaxınlaşacağını proqnozlaşdırırlar 3 MB 2017-ci ildə, indi şəkillərinizi optimallaşdırmağa başlamağın vaxtıdır.

Unutmayın ki, ziyarətçilərinizin hamısı yüksək sürətli qoşulmalarda olmayacaqlar və səhifə tükənməsi və yavaş səhifə yükləmə vaxtları Google sıralamasına təsir göstərə bilər. Yükü yüngülləşdirməyə kömək etmək üçün, yəni bu gün şəkillərinizi optimallaşdırmaq vərdişinə qapılın.

Təsvirinizin ölçülərinə diqqət yetirin və rəqəmsal kameradan fotoşəkilləri və ya böyük şəkilləri uyğun bir ölçüyə keçirin.

Sonrakı, JPEGmini və ya TinyPNG və ya Kraken kimi bulud alətləri kimi müasir görüntü sıxılma imkanlarından faydalanın, mümkünsə bir plagin ilə WordPress-ə birləşdirin.

Nəhayət, yayım platformanız avtomatik olaraq orijinal görüntüsünüzün ölçüsünü dəyişirsə, bütövlükdə orijinaldan daha çox blog yazıınız üçün bunlardan birini seçin.

Açıqlama: Bu yazıda filial əlaqələri var. Bu o deməkdir ki, alış-veriş etsəniz kiçik bir komissiya edə bilərik.

Bloggerlər veb üçün şəkilləri optimallaşdırmaq üçün təlimat verirlər