Дали не ги сакате сликите?

Тие можат да трансформираат парче текст во привлечно искуство додека читате. Сликите го подобруваат постот на блогот, го прават поподделлив и го поставуваат тонот и брендот на целата ваша страница.

А знаете што? Ние сме подготвени да одговориме на сликите. Затоа, вградувањето слики во вашата содржина е моќна алатка за користење при маркетинг на вашиот блог.

Но, ако не сте внимателни, сликите може да сочинуваат повеќе од половина (или повеќе) од вкупната големина на вашата веб-страница. Само пред неколку години, просечната големина на веб-страница беше 600-700K. Сега, просекот е 2 MB и се зголемува секоја година.

Тоа е огромно!

Главната причина што се случува ова е затоа што повеќе слики се користат почесто на веб-страниците, а овие слики не се не е правилно димензиониран и оптимизиран. Ова значи дека тие не се зачувани или составени на веб-пријателски начин, и наместо тоа, ги надувуваат вашите страници.

Многу од нас, сепак, оставаат оптимизирање на сликите како последователна мисла и повеќе би сакале да уживаат во правењето забавни работи како создавање на епска објава или мрежно поврзување со други блогери во вашата ниша.

Но, ако имате надуеност на страницата значи дека вашата брзина на вчитување на страницата е засегната. Можеби не мислите дека ова е голема работа ако сте на врска со голема брзина, но многу од вашите посетители не се. Исто така, Google не сака бавно вчитување страници и може негативно да влијае на вашата оптимизација.

Зошто треба да ги оптимизирате сликите

Работите напорно насоздавајќи ѕвездени содржини и трошите безброј часови промовирајќи го вашиот блог и вмрежувајќи се со други блогери, така што последното нешто што сакате е потенцијалните посетители да ја напуштат вашата веб-страница уште пред да се вчита!

Студиите покажуваат дека до 40% од посетителите кликнуваат на копчето за назад ако на локацијата им треба подолго од три секунди за да се вчита.

Знам, три секунди навистина не се толку долги, но кога сте на мобилна врска и чекате страницата за да се вчита, секунда може да изгледа како засекогаш.

И бидејќи многу од вашите посетители можеби се на побавни мобилни врски, станува јасно - треба да ја намалите големината на вашата страница. И ние веќе знаеме кој е најголемиот престапник на надуеноста на големината на страницата - тоа се вашите слики.

Непотребно големите слики заземаат простор и на вашата сметка за хостирање. Додека некои од вас можеби имаат хостинг со „неограничен“ простор за складирање, многу даватели на премиум хостинг ве ограничуваат на околу 10 GB складирање на планови од пониско ниво. Ова може брзо да се пополни, особено ако хостирате повеќе сајтови со многу слики на иста сметка.

Па, како можете да препознаете дали вашите слики ја забавуваат вашата страница? Тестирајте ја брзината на вашиот сајт со Google PageSpeed ​​Insights.

Ако Google пријави неоптимизирани слики како проблем, еве што треба да знаете за да го поправите.

Основи за оптимизација на слики

Кога станува збор за оптимизирање на сликите на вашиот блог, треба да бидете неколку различни работисвесни за: типот на датотека, големината и димензиите на сликата, начинот на кој ги сервирате вашите слики и компресија на сликата.

Ајде внимателно да ја разгледаме секоја од овие области.

Тип на датотека

Сликите на веб обично се зачувуваат во формат на датотека PNG или JPEG – или GIF за анимација. Кој не ги сака тие смешни анимирани GIF-а кои лебдат низ мрежата!

Сега е технички во ред ако ги зачувате вашите слики во кој било формат - прелистувачот на вашите посетители нема да има проблеми со прикажувањето на вашата веб-страница – но за најдобар квалитет и оптимизација, држете се до следниве правила:

• JPEG – користете за фотографии и дизајни каде што се прикажани луѓе, места или работи
• PNG – најдобро за графика , логоа, текстуални дизајни, слики од екранот и кога ви требаат слики со проѕирна позадина
• GIF – ако ви треба анимација, инаку користете PNG

Па, зошто има различни формати ?

Па, PNG традиционално се користи за зачувување логоа и графика бидејќи го зачувува оригиналниот квалитет на сликата - никој не сака заматен текст и пикселирани форми. Но, ако се обидете да зачувате фотографија како PNG, таа ќе изгледа неверојатно, но големината на датотеката ќе биде помалку од неверојатна.

JPEG традиционално се користи за зачувување фотографии. Некои од податоците за сликата се фрлаат со цел да се создаде драстично помала големина на датотеката, но бидејќи фотографиите содржат широк спектар на бои и природни варијации, губењето на квалитетот еобично незабележливо за човечкото око.

Ќе навлеземе во повеќе детали за компресија подоцна, но засега ако се сеќавате само на две работи, запомнете: JPEG за фотографии и PNG за текст/графика.

Димензии на сликата

Дали некогаш сте вчитале веб-страница и сте забележале дека мала слика (на пример, можеби слика од глава) бара f-o-r-e-v-e-r за преземање? Како, толку бавно што можете да ја видите секоја линија што влегува? Самите си мислите, како може толку мала слика да потрае толку долго за преземање?

А кога ќе се случи со голема слика за заглавие, тоа е уште полошо бидејќи може да го запре целото вчитување на страницата.

Причината поради која се случува ова е затоа што блогерот не ја променил правилно големината и не ја оптимизирал својата слика, а во случајот со нашиот пример за снимка од глава, можеби поставил JPEG со целосна резолуција директно од неговата или нејзината DSLR камера.

И тоа е огромна датотека!

Гледате, веб-прелистувачот (обично) ќе ја скалира сликата од нејзините оригинални димензии, така што таа убаво се вклопува на нејзиното место на веб-страница. Она што изгледа како мала слика на екранот навистина може да биде огромна фотографија од 10 мегапиксели, намалена во реално време од прелистувачот.

Сега некои платформи за веб-објавување автоматски ќе создадат повеќе варијации на вашата слика со целосна резолуција во различни големини, но ако не, треба да ја промените големината на вашите слики претходно во уредувач на слики како Photoshop, Lightroom, Pixlr - или дури и MS Paint. Тоа може да значи разликапомеѓу датотека од 50K и 5MB.

WordPress, на пример, автоматски ќе создаде три (или повеќе, во зависност од вашата тема) копии од вашата поставена слика – сите со различни димензии – што можете да ги користите во објавите на блогот, наместо секогаш да ја користите сликата со целосна големина.

Ако имате навика да прикачувате огромни слики со фотографии и сакате да заштедите простор во вашата сметка за хостирање, приклучокот за WordPress Imsanity има ваш грб.

Ја менува големината и ја заменува оригиналната слика со нешто поуправливо, па дури и ако ја вметнете сликата со целосна големина во вашата објава, нема да биде толку лошо.

Откако ќе се активира, Imsanity може исто така да ги пребарува вашите постоечки слики и соодветно да ја промени големината.

Сервирањето на вашите слики

Како ќе ги сервирате вашите слики на вашите посетители не е стриктно за нивно оптимизирање само по себе , но тоа може да има драматично влијание врз времето на вчитување на вашата страница.

Повеќето блогери ги сервираат своите слики директно од нивната хостинг сметка и тоа е обично во ред, но ако навистина сакате да го исцедите секој дел од перформансите од вашиот сајт, а потоа хостирањето на вашите слики на мрежа за испорака на содржина (CDN) може да направи голема разлика.

ЦДН се состои од стратешки поставени веб-сервери лоцирани во центри за податоци низ целиот свет. Овие сервери се домаќини на дупликат копии од вашите слики и кога прелистувачот на посетител бара слика од вашата веб-локација, CDN автоматски го насочува прелистувачот насервер кој географски е најблиску до нив.

Ова значи дека посетителите од Европа, на пример, ќе добиваат слики сервирани од локален европски сервер, наместо од државите или на друго место. Бидејќи времето на одговор и мрежната латентност се намалени, сликите се преземаат многу побрзо, со што се намалува времето на вчитување на страницата.

Волшебникот за блогирање користи Sucuri (вклучува заштитен ѕид за безбедност, како и CDN), но има и други даватели на квалитет како Amazon's Cloudfront или KeyCDN. Дури и популарниот CloudFlare, кој не е строго CDN, нуди CDN бесплатно и лесно се поставува во повеќето заеднички хостинг пакети.

Компресија на слика

Кога станува збор за оптимизирање на слики, ништо не ја намалува големината на вашата датотека повеќе од напредната компресија на слики со загуби.

Повеќето алатки за уредување слики како Visme или Photoshop ќе зачувуваат датотеки користејќи компресија JPEG со загуби, бидејќи ги има најдоброто намалување на големината на датотеката. Така, додека квалитетот на сликата е малку намален, користењето на компресија на слики со загуби ги намалува огромните слики до големини што се погодни за веб.

Сигурен сум дека многумина кои користат Photoshop може да ја видат неговата функција Зачувај за веб како сè и крај на оптимизацијата на сликата. Па дури и онлајн алатките за уредување слики како PicMonkey или Visme исто така ги оптимизираат вашите слики.

Но, дали знаевте дека постојат алатки кои можат да ја земат вашата „оптимизирана“ слика од Photoshop или други алатки за уредување, да ја стиснат и компресираат за уште 40% (или повеќе),и сè уште дали изгледа речиси идентично со човечкото око?

Еве неколку бесплатни и платени алатки кои ќе ви помогнат да ги сведете вашите слики до статус на пријателски на интернет.

Алатки за работна површина

ImageAlpha / ImageOptim

За корисникот на Mac, ImageOptim е бесплатна алатка за работна површина што ја користам секој ден за да ги оптимизирам PNG сликите - главно слики од екранот - пред да ги подигнам. Овие алатки се лесни за употреба, само ги влечете и пуштате датотеките, но морате да правите една слика во исто време.

Професионален совет : За технолошките познавања постои ImageOptim– CLI, каде што можете да оптимизирате цела папка со слики одеднаш.

ImageAlpha е PNG компресор со загуби и може да направи чуда при смалувањето на PNG-датотеките додека ImageOptim врши напредна компресија без загуби (со опција за загуби) - и тоа ги отстранува непотребните метаподатоци од PNG, JPEG и GIF-датотеките.

За моите PNG слики, најпрво ги извршувам преку ImageAlpha:

Овде, ја намали мојата слика од екранот од 103K на 28K.

Потоа го истрчав преку ImageOptim и зачував дополнителни 10%.

JPEGmini

За моите JPEG-датотеки, ги оптимизирам со десктоп апликацијата JPEGmini, достапна и за Mac и за Windows.

Лајт верзијата ви овозможува да оптимизирате до 20 слики дневно бесплатно и чини 19,99 долари за отстранување на лимитот.

Професионален совет : Напредните корисници кои сакаат да интегрираат JPEGmini во Photoshop или Lightroom преку приклучок, можат да ја купат верзијата Pro за99,99 долари.

Онлајн / Облак / SaaS алатки

TinyPNG

Ако барате висококвалитетна онлајн алатка за компресија на слики, TinyPNG (го оптимизира JPEG и датотеките и покрај името) е веб-апликација која ви овозможува да повлечете до 20 слики од 5 MB или помали во вашиот прелистувач и да ги оптимизирате одеднаш.

Тие исто така имаат API за програмери и прават WordPress достапен е приклучок кој може автоматски да ги оптимизира вашите слики при поставувањето.

TinyPNG ви дава 500 бесплатни оптимизации на слики месечно, а потоа се наплаќа од 0,002 до 0,009 долари по слика, во зависност од волуменот.

Сега 500 сликите месечно можеби звучат како многу, но кога ќе го земете предвид фактот дека WordPress често создава три до пет варијации на секоја слика во различни големини, 500 слики не изгледаат како толку за плодниот блогер. За среќа, цената по слика е буџетска.

EWWW Image Optimizer

Ако не сте подготвени да потрошите пари и не сакате да ве мачи оптимизацијата вашите слики рачно, бесплатниот приклучок EWWW Image Optimizer за WordPress може автоматски да ги оптимизира вашите поставени слики.

Можете да изберете премиум претплата што врши компресија со загуби, но бесплатната верзија врши само компресија без загуби, така што заштедите не се т речиси толку суштински. Сепак, тоа ќе ви заштеди време и е подобро од ништо.

Забелешка: За целосен преглед, проверетенашата објава за алатките за компресија на слики.

Завршување

Со оглед на тоа што некои луѓе предвидуваат просечната големина на веб-страницата да се приближи до 3MB до 2017 година, сега е време да започнете со оптимизирање на вашите слики.

Запомнете, нема сите ваши посетители да бидат на брзи врски, а надуеноста на страницата и бавното време на вчитување на страницата може потенцијално да влијаат на вашето рангирање со Google. За да ви помогне да го олесните товарот, така да се каже, добијте навика да ги оптимизирате вашите слики денес.

Обратете внимание на димензиите на вашата слика и променете ја големината на сите преголеми фотографии или слики од дигитален фотоапарат на соодветна големина.

Следно, искористете ја модерната компресија на слики со десктоп апликации како JPEGmini или облак алатки како TinyPNG или Kraken - интегрирајќи ги во WordPress со додаток ако е можно.

На крајот, ако платформата за објавување автоматски создава варијации во големина на вашата оригинална слика, изберете една од нив за објавата на блогот, наместо оригиналната, целосна големина.

Поврзано читање: 7 начини да се намали Големина на PDF-датотеки.