Şəkilləri sevmirsiniz?

Siz oxuyarkən onlar mətn parçasını cəlbedici təcrübəyə çevirə bilər. Şəkillər bloq yazısını təkmilləşdirir, onu daha paylaşıla bilir və bütün saytınızın tonunu və brendini təyin edir.

Bilirsinizmi? Biz şəkillərə cavab verməyə hazırıq. Buna görə də məzmununuza təsvirlərin daxil edilməsi bloqunuzun marketinqi zamanı istifadə etmək üçün güclü vasitədir.

Ancaq diqqətli olmasanız, şəkillər veb səhifənizin ümumi ölçüsünün yarısından çoxunu (və ya daha çoxunu) təşkil edə bilər. Bir neçə il əvvəl veb səhifənin orta ölçüsü 600-700K idi. İndi orta hesabla 2MB-dır və hər il artır.

Bu, çox böyükdür!

Bunun baş verməsinin əsas səbəbi veb səhifələrdə birdən çox təsvirin daha tez-tez istifadə olunmasıdır və bu şəkillərin düzgün ölçülməmiş və optimallaşdırılmışdır. Bu o deməkdir ki, onlar yadda saxlanmayıb və ya veb üçün uyğun şəkildə tərtib edilməyib, əksinə, səhifələrinizi şişirdirlər.

Bununla belə, bir çoxumuz şəkillərin optimallaşdırılmasını ikinci plana qoyur və əyləncəli işlər görməkdən həzz alırıq. epik post hazırlamaq və ya öz nişinizdəki digər bloggerlərlə şəbəkə qurmaq kimi.

Lakin səhifənin şişməsi səhifənizin yüklənmə sürətinə təsir edir. Yüksək sürətli bağlantıdasınızsa, bunun böyük bir şey olduğunu düşünməyə bilərsiniz, lakin ziyarətçilərinizin çoxu belə deyil. Həmçinin, Google yavaş yüklənən səhifələri sevmir və bu, SEO-ya mənfi təsir göstərə bilər.

Niyə şəkilləri optimallaşdırmalısınız

Siz çox çalışırsınızmükəmməl məzmun yaratmaq və siz bloqunuzu tanıtmaq və digər bloqçularla şəbəkə qurmaq üçün saysız-hesabsız saatlar sərf edirsiniz, ona görə də istədiyiniz son şey potensial ziyarətçilərin veb saytınız yüklənməmişdən əvvəl onu tərk etməsidir!

Tədqiqatlar göstərir ki, saytın 40%-ə qədəri saytın yüklənməsi üç saniyədən çox çəkirsə, ziyarətçilər geri düyməsinə klikləyirlər.

Bilirəm, üç saniyə həqiqətən o qədər də uzun deyil, ancaq mobil bağlantıda olduğunuz zaman saytın yüklənməsi üçün bir saniyə həmişəlik kimi görünə bilər.

Və ziyarətçilərinizin çoxu daha yavaş mobil bağlantılarda ola biləcəyi üçün aydın olur – səhifənizin ölçüsünü azaltmalısınız. Və biz artıq səhifə ölçüsünün şişməsinin ən böyük günahkarının nə olduğunu bilirik – bu sizin şəkillərinizdir.

Lazımsız böyük şəkillər də hosting hesabınızda yer tutur. Bəziləriniz “məhdudiyyətsiz” yaddaş sahəsinə sahib olsa da, bir çox premium hostinq təminatçıları sizi aşağı səviyyəli planlarda təxminən 10 GB yaddaşla məhdudlaşdırır. Xüsusilə eyni hesabda çoxlu, təsviri ağır olan saytlar yerləşdirirsinizsə, bu, tez bir zamanda doldurula bilər.

Beləliklə, şəkillərinizin saytınızı yavaşladığını necə müəyyən etmək olar? Saytınızın sürətini Google PageSpeed ​​Insights ilə yoxlayın.

Əgər Google optimallaşdırılmamış şəkilləri problem kimi bildirirsə, onu həll etmək üçün bunları bilməlisiniz.

Şəkil optimallaşdırmasının əsasları

Bloqunuzdakı şəkillərin optimallaşdırılmasına gəldikdə, bir neçə fərqli şey olmalıdırxəbərdar olun: fayl növü, təsvir ölçüsü və ölçüləri, şəkillərinizə necə xidmət etdiyiniz və təsvirin sıxılması.

Gəlin bu sahələrin hər birinə daha yaxından nəzər salaq.

Fayl növü

İnternetdəki şəkillər adətən PNG və ya JPEG fayl formatında və ya animasiya üçün GIF formatında saxlanılır. İnternetdə gəzən bu gülməli animasiyalı GIF-ləri kim sevməz!

Şəkllərinizi hər iki formatda yadda saxlasanız, texniki baxımdan yaxşıdır – ziyarətçinizin brauzeri veb səhifənizi göstərməkdə çətinlik çəkməyəcək. – lakin ən yaxşı keyfiyyət və optimallaşdırma üçün aşağıdakı qaydalara əməl edin:

• JPEG – insanların, yerlərin və ya əşyaların nümayiş olunduğu fotoşəkillər və dizaynlar üçün istifadə edin
• PNG – qrafika üçün ən yaxşısı , loqotiplər, mətnli dizaynlar, ekran görüntüləri və şəffaf fonlu şəkillərə ehtiyacınız olduqda
• GIF – animasiyaya ehtiyacınız varsa, əks halda PNG istifadə edin

Beləliklə, niyə müxtəlif formatlar var ?

Yaxşı, PNG ənənəvi olaraq loqo və qrafikləri saxlamaq üçün istifadə olunur, çünki o, orijinal təsvirin keyfiyyətini qoruyur – heç kim bulanıq mətn və pikselli formalar istəmir. Ancaq fotoşəkili PNG olaraq saxlamağa çalışsanız, o, heyrətamiz görünəcək, lakin nəticədə əldə edilən fayl ölçüsü heyrətamizdən də az olacaq.

JPEG ənənəvi olaraq fotoşəkilləri saxlamaq üçün istifadə olunur. Şəkil məlumatlarının bir hissəsi kəskin şəkildə daha kiçik bir fayl ölçüsü yaratmaq üçün atılır, lakin fotoşəkillər müxtəlif rənglər və təbii variasiyaları ehtiva etdiyi üçün keyfiyyət itkisiadətən insan gözü üçün hiss olunmur.

Sıxılma haqqında daha sonra ətraflı danışacağıq, lakin hələlik yalnız iki şeyi xatırlayırsınızsa, yadda saxlayın: fotolar üçün JPEG və mətn/qrafika üçün PNG.

Şəkil ölçüləri

Heç veb səhifəni yükləmisiniz və kiçik bir şəklin (məsələn, başdan çəkilmiş şəkil) endirmək üçün f-o-r-e-v-e-r tələb etdiyini görmüsünüzmü? Necə ki, o qədər yavaş ki, hər bir xəttin daxil olduğunu görə bilərsiniz? Özünüzə fikirləşirsiniz ki, belə kiçik bir şəklin endirilməsi necə bu qədər uzun çəkə bilər?

Və böyük başlıq şəkli ilə baş verəndə daha da pis olur, çünki o, bütün səhifənin yüklənməsini dayandıra bilər.

Bunun baş verməsinin səbəbi bloqqerin şəklinin ölçüsünü lazımi şəkildə dəyişməməsi və optimallaşdırmamasıdır və başdan çəkiliş nümunəmizdə, birbaşa öz DSLR kamerasından tam rezolyusiyada JPEG yükləmiş ola bilər.

Və bu nəhəng bir fayldır!

Görürsən ki, veb-brauzer (adətən) şəkli orijinal ölçülərindən miqyaslandıracaq ki, o, veb-səhifədəki yerinə gözəl uyğunlaşsın. Ekranda kiçik bir şəkil kimi görünən şey, həqiqətən də brauzer tərəfindən real vaxtda kiçildilmiş nəhəng 10 meqapiksellik foto ola bilər.

İndi bəzi veb nəşr platformaları avtomatik olaraq müxtəlif təsvirlərdə tam ayırdetmə təsvirinizin çoxsaylı variantlarını yaradacaq. Ölçülər, lakin belə deyilsə, əvvəlcədən Photoshop, Lightroom, Pixlr və ya hətta MS Paint kimi şəkil redaktorunda şəkillərinizin ölçüsünü dəyişdirməlisiniz. Bu fərqi ifadə edə bilər50K fayl ilə 5MB fayl arasında.

Məsələn, WordPress avtomatik olaraq yüklədiyiniz şəklin üç (və ya mövzunuzdan asılı olaraq daha çox) nüsxəsini yaradacaq – hamısı müxtəlif ölçülərə malikdir – onlardan istifadə edə bilərsiniz həmişə tam ölçülü təsvirdən istifadə etmək əvəzinə bloq yazılarında.

Əgər siz nəhəng stok foto şəkilləri yükləmək vərdişiniz varsa və hosting hesabınızda yerə qənaət etmək istəyirsinizsə, WordPress plagini Imsanity sizin arxanızdadır.

O, orijinal şəklin ölçüsünü dəyişir və daha idarə edilə bilən bir şeylə əvəz edir, beləliklə, tam ölçülü şəkli postunuza daxil etsəniz belə, o qədər də pis olmayacaq.

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

Şəkillərinizin xidmət göstərilməsi

Şəkillərinizi ziyarətçilərə necə təqdim etdiyiniz onların tək başına optimallaşdırılması ilə bağlı deyil. , lakin bu, səhifənizin yüklənmə müddətinə dramatik təsir göstərə bilər.

Əksər bloqçular şəkillərini birbaşa hosting hesablarından təqdim edirlər və bu, adətən yaxşıdır, amma əgər siz həqiqətən də performansın hər bir hissəsini sıxışdırmaq istəyirsinizsə saytınız, sonra şəkillərinizin Məzmun Çatdırılma Şəbəkəsində (CDN) yerləşdirilməsi böyük fərq yarada bilər.

CDN bütün dünyada məlumat mərkəzlərində yerləşən strateji olaraq yerləşdirilmiş veb serverlərdən ibarətdir. Bu serverlər şəkillərinizin dublikat nüsxələrini saxlayır və ziyarətçinin brauzeri veb saytınızdan şəkil tələb etdikdə CDN avtomatik olaraq brauzericoğrafi baxımdan onlara ən yaxın olan server.

Bu o deməkdir ki, Avropadan olan ziyarətçilər, məsələn, ABŞ-dan və ya başqa yerlərdən deyil, yerli Avropa serverindən təqdim olunan şəkilləri alacaqlar. Cavab vaxtı və şəbəkə gecikməsi azaldığından, şəkillər daha sürətli endirilir, səhifə yükləmə müddəti azalır.

Blog Sehrbazı Sucuri-dən istifadə edir (buraya təhlükəsizlik üçün Firewall və CDN daxildir), lakin digər keyfiyyət təminatçıları da var. Amazon Cloudfront və ya KeyCDN kimi. Hətta ciddi bir CDN olmayan məşhur CloudFlare belə pulsuz bir CDN təklif edir və əksər paylaşılan hosting paketlərində quraşdırmaq asandır.

Şəkil sıxılması

Söhbət öz fayllarınızı optimallaşdırmaqdan gedirsə. şəkillər, heç bir şey faylınızın ölçüsünü təkmil itkili təsvir sıxışdırmasından daha çox azalda bilməz.

Visme və ya Photoshop kimi əksər şəkil redaktə alətləri faylları itkili JPEG sıxılmadan istifadə edərək saxlayacaq, çünki o, ən yaxşı fayl ölçüsü kiçilməsinə malikdir. Beləliklə, təsvirin keyfiyyəti bir qədər azalsa da, itkili təsvir sıxılması böyük şəkilləri veb üçün uyğun ölçülərə endirir.

Əminəm ki, Photoshop-dan istifadə edənlərin çoxu onun Veb üçün Saxla funksiyasını görə bilər. görüntü optimallaşdırmasının hamısı və sonu kimi. Hətta PicMonkey və ya Visme kimi onlayn şəkil redaktə alətləri də şəkillərinizi optimallaşdırır.

Ancaq bilirdinizmi ki, "optimallaşdırılmış" şəklinizi Photoshop və ya digər redaktə alətlərindən götürə, onu sındıra və sıxışdıra bilən alətlər var. başqa 40% (və ya daha çox),və hələ də o, insan gözü ilə demək olar ki, eynidirmi?

Budur, şəkillərinizi veb-dostu statusa endirməyə kömək edəcək bəzi pulsuz və pullu alətlər.

Masaüstü alətlər

ImageAlpha / ImageOptim

Mac istifadəçisi üçün ImageOptim hər gün PNG şəkillərini – əsasən skrinşotları – yükləməzdən əvvəl optimallaşdırmaq üçün istifadə etdiyim pulsuz masaüstü alətdir. Bu alətlərdən istifadə etmək asandır, siz sadəcə olaraq fayllarınızı sürükləyib buraxırsınız, lakin siz hər dəfə bir şəkil çəkməlisiniz.

Pro tip : Texnologiyanı bilənlər üçün ImageOptim– var. CLI, burada bir anda bütün şəkillər qovluğunu optimallaşdıra bilərsiniz.

ImageAlpha itkili PNG kompressorudur və PNG fayllarını kiçildə möcüzələr yarada bilər, ImageOptim isə təkmil itkisiz (itkili seçim ilə) sıxışdırır – və bu PNG, JPEG və GIF fayllarından lazımsız metadataları silir.

PNG şəkillərim üçün onları ilk olaraq ImageAlpha vasitəsilə işlədirəm:

Burada mənim skrinşot şəklimi 103K-dan 28K-a endirdi.

Sonra onu ImageOptim vasitəsilə işə saldım və əlavə 10% qənaət etdim.

JPEGmini

JPEG fayllarım üçün mən onları masaüstü JPEGmini proqramı ilə optimallaşdırıram. həm Mac, həm də Windows üçün.

Lite versiyası pulsuz olaraq gündə 20-yə qədər şəkli optimallaşdırmağa imkan verir və limiti aradan qaldırmaq 19,99 dollara başa gəlir.

Pro üçün məsləhət : JPEGmini-ni bir plagin vasitəsilə Photoshop və ya Lightroom-a inteqrasiya etmək istəyən qabaqcıl istifadəçilər Pro versiyasını satın ala bilərlər.$99.99.

Onlayn / Bulud / SaaS alətləri

TinyPNG

Yüksək keyfiyyətli onlayn şəkil sıxma aləti axtarırsınızsa, TinyPNG (JPEG formatını optimallaşdırır) adına baxmayaraq faylları da) brauzerinizə 20 5MB və ya daha kiçik şəkilləri sürükləməyə və onları bir anda optimallaşdırmağa imkan verən veb proqramdır.

Onların həmçinin developer API-si var və WordPress yaradır. Yüklədiyiniz zaman şəkillərinizi avtomatik optimallaşdıra bilən plagin mövcuddur.

TinyPNG sizə ayda 500 pulsuz şəkil optimallaşdırması verir və bundan sonra həcmdən asılı olaraq hər şəkil üçün 0,002–0,009 ABŞ dolları tələb olunur.

İndi 500 ayda şəkillər çox səslənə bilər, lakin WordPress-in tez-tez müxtəlif ölçülərdə hər təsvirin üç-beş variantını yaratdığını nəzərə alsaq, məhsuldar blogger üçün 500 şəkil o qədər də görünmür. Xoşbəxtlikdən, hər bir şəkilin qiyməti büdcəyə uyğundur.

EWWW Image Optimizer

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

Siz itkili sıxılma həyata keçirən premium abunəni seçə bilərsiniz, lakin pulsuz versiya yalnız itkisiz sıxılma həyata keçirir, buna görə də qənaət daha çox olur. t demək olar ki, əhəmiyyətlidir. Bu, vaxtınıza qənaət edəcək və heç nədən yaxşıdır.

Qeyd: Tam xülasə üçün yoxlayın.Şəkil sıxma alətləri haqqında yazımız.

Bunu yekunlaşdırmaq

Bəzi insanlar 2017-ci ilə qədər veb səhifənin orta ölçüsünün 3MB-a yaxınlaşacağını proqnozlaşdırdıqları halda, 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 bağlantılarda olmayacaq və səhifənin şişməsi və səhifənin yavaş yüklənməsi Google ilə reytinqinizə potensial təsir göstərə bilər. Yükü yüngülləşdirməyə kömək etmək üçün, belə desək, bu gün şəkillərinizi optimallaşdırmağa vərdiş edin.

Şəkil ölçülərinizə diqqət yetirin və rəqəmsal kameradan istənilən həddən artıq böyük stok şəkillərinin və ya şəkillərin ölçüsünü uyğun ölçüyə qədər dəyişdirin. ölçüsü.

Sonra, JPEGmini kimi masa üstü proqramları və ya TinyPNG və ya Kraken kimi bulud alətləri ilə müasir təsvirin sıxılmasından yararlanın – onları mümkünsə plaginlə WordPress-ə inteqrasiya edin.

Nəhayət, əgər nəşr platforması avtomatik olaraq orijinal şəklinizin ölçüsünü dəyişdirən variasiyaları yaradır, orijinal, tam ölçülü deyil, blog yazınız üçün bunlardan birini seçin.

Əlaqədar oxu: Şəklin ölçüsünü azaltmağın 7 yolu PDF Faylların Ölçüsü.