Не обичате ли изображения?

Те могат да превърнат един текст в завладяващо преживяване, докато четете. Изображенията подобряват публикацията в блога, правят я по-споделяема и задават тона и марката на целия ви сайт.

Ето защо включването на изображения в съдържанието е мощен инструмент, който можете да използвате при маркетинга на блога си.

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

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

Основната причина за това е, че в уеб страниците все по-често се използват множество изображения, които не са правилно оразмерени и оптимизирани. Това означава, че те не се запазват или компилират по удобен за уеб начин, а вместо това раздуват страниците ви.

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

Но раздуването на страниците означава, че скоростта на зареждане на страницата ви е засегната. Може да не мислите, че това е голям проблем, ако сте с високоскоростна връзка, но много от посетителите ви не са. Освен това Google не харесва бавно зареждащите се страници и това може да се отрази негативно на вашата SEO оптимизация.

Защо трябва да оптимизирате изображенията

Работите усилено за създаване на звездно съдържание и прекарвате безброй часове в популяризиране на блога си и работа в мрежа с други блогъри, така че последното нещо, което искате, е потенциалните посетители да напуснат уебсайта ви още преди да се е заредил!

Проучванията показват, че до 40 % от посетителите натискат бутона "Назад", ако зареждането на даден сайт отнема повече от три секунди.

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

И тъй като голяма част от посетителите ви може да използват по-бавни мобилни връзки, става ясно, че трябва да намалите размера на страницата си. Вече знаем кой е най-големият виновник за раздуването на размера на страницата - това са изображенията.

Ненужно големите изображения също така заемат място в хостинг акаунта ви. Въпреки че някои от вас може да имат хостинг с "неограничено" място за съхранение, много доставчици на хостинг услуги от висок клас ви ограничават до около 10 GB място за съхранение в плановете от по-ниско ниво. Това може да се запълни бързо, особено ако хоствате няколко сайта с много изображения в един и същи акаунт.

И така, как да разберете дали изображенията забавят сайта ви? Проверете скоростта на сайта си с Google PageSpeed Insights.

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

Основи на оптимизацията на изображения

Когато става въпрос за оптимизиране на изображенията в блога ви, трябва да имате предвид няколко различни неща: тип на файла, размер и размери на изображението, начин на поднасяне на изображенията и компресия на изображенията.

Нека разгледаме по-подробно всяка от тези области.

Тип на файла

Изображенията в уеб обикновено се записват във файлов формат PNG или JPEG - или GIF за анимация. Кой не обича тези забавни анимирани GIF файлове, които се разпространяват в уеб!

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

• JPEG - използвайте за снимки и проекти, в които са изобразени хора, места или вещи
• PNG - най-добър за графики, лога, дизайни с много текст, снимки на екрани и когато ви трябват изображения с прозрачен фон.
• GIF - ако се нуждаете от анимация, в противен случай използвайте PNG

И така, защо има различни формати?

PNG традиционно се използва за запазване на лога и графики, тъй като запазва оригиналното качество на изображението - никой не иска размазан текст и пикселизирани форми. Но ако се опитате да запазите снимка като PNG, тя ще изглежда невероятно, но размерът на получения файл ще бъде по-малко от удивителен.

Част от данните на изображението се изхвърлят, за да се постигне драстично по-малък размер на файла, но тъй като снимките съдържат голямо разнообразие от цветове и естествени вариации, загубата на качество обикновено е незабележима за човешкото око.

По-късно ще разгледаме по-подробно компресията, но засега, ако сте запомнили само две неща, запомнете: JPEG за снимки и PNG за текст/графики.

Размери на изображението

Случвало ли ви се е да заредите уеб страница и да забележите, че изтеглянето на малка снимка (например снимка на глава) отнема много време? Например толкова бавно, че можете да видите всеки ред? Мислите си: как може такова малко изображение да се изтегля толкова дълго?

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

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

А това е огромен файл!

Виждате ли, уеб браузърът (обикновено) мащабира дадено изображение в сравнение с оригиналните му размери, за да се впише добре на мястото си в уеб страницата. Това, което изглежда като малко изображение на екрана, всъщност може да е огромна 10-мегапикселова снимка, мащабирана в реално време от браузъра.

Някои платформи за публикуване в уеб автоматично създават множество варианти на изображението с пълна резолюция в различни размери, но ако това не е така, трябва предварително да промените размера на изображенията си в редактор на изображения като Photoshop, Lightroom, Pixlr или дори MS Paint. Това може да означава разликата между файл с размер 50 хил. и 5 МВ.

WordPress например автоматично ще създаде три (или повече, в зависимост от темата) копия на каченото от вас изображение - всички с различни размери - които можете да използвате в публикациите в блога, вместо винаги да използвате изображението в пълен размер.

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

Той променя размера и заменя оригиналното изображение с по-удобно, така че дори ако вмъкнете в публикацията си изображение в пълен размер, то няма да е толкова лошо.

След като бъде активиран, Imsanity може също така да търси съществуващите ви изображения и да променя размера им.

Обслужване на изображенията

Начинът, по който предоставяте изображенията на посетителите си, не е свързан с оптимизирането им, но може да окаже значително влияние върху времето за зареждане на страницата ви.

Повечето блогъри използват изображенията си директно от хостинг акаунта си и това обикновено е добре, но ако наистина искате да изстискате всяка частица от производителността на сайта си, хостингът на изображенията ви в мрежа за доставка на съдържание (CDN) може да има голямо значение.

CDN се състои от стратегически разположени уеб сървъри, разположени в центрове за данни по целия свят. На тези сървъри се намират дублиращи копия на вашите изображения и когато браузърът на посетител поиска изображение от вашия уебсайт, CDN автоматично насочва браузъра към сървъра, който е географски най-близо до него.

Това означава, че посетителите от Европа, например, ще получават изображения, обслужвани от местен европейски сървър, а не от сървър в Щатите или другаде. Тъй като времето за отговор и мрежовата латентност са намалени, изображенията се изтеглят много по-бързо, което намалява времето за зареждане на страницата.

Blogging Wizard използва Sucuri (той включва защитна стена за сигурност, както и CDN), но има и други качествени доставчици като Cloudfront на Amazon или 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.

Версията Lite ви позволява да оптимизирате безплатно до 20 изображения на ден, а премахването на ограничението струва 19,99 USD.

Професионален съвет : Потребителите за напреднали, които искат да интегрират JPEGmini във Photoshop или Lightroom чрез приставка, могат да закупят версията Pro за 99,99 USD.

Онлайн / облачни / SaaS инструменти

TinyPNG

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

Те също така разполагат с API за разработчици и предлагат плъгин за WordPress, който може автоматично да оптимизира изображенията ви при качване.

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

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

Оптимизатор на изображения EWWW

Ако не сте готови да похарчите пари и не искате да се занимавате с ръчно оптимизиране на изображенията, безплатната приставка EWWW Image Optimizer за WordPress може автоматично да оптимизира качените изображения.

Можете да изберете премиум абонамент, който извършва компресиране със загуби, но безплатната версия извършва само компресиране без загуби, така че икономиите не са толкова значителни. Все пак това ще ви спести време и е по-добре от нищо.

Забележка: За пълна информация вижте публикацията ни за инструментите за компресиране на изображения.

Приключване

Тъй като според някои прогнози до 2017 г. средният размер на уебстраницата ще достигне 3 МВ, сега е моментът да започнете да оптимизирате изображенията си.

Не забравяйте, че не всички посетители на сайта ви ще използват високоскоростни връзки, а раздуването на страниците и бавното им зареждане могат да повлияят на класирането ви в Google. За да облекчите натоварването, още днес придобийте навика да оптимизирате изображенията си.

Обърнете внимание на размерите на изображенията и променете размера на прекалено големите снимки от фондовите борси или изображенията от цифров фотоапарат до подходящ размер.

След това се възползвайте от съвременното компресиране на изображения с приложения за настолни компютри като JPEGmini или инструменти в облака като TinyPNG или Kraken - ако е възможно, интегрирайте ги в WordPress с плъгин.

И накрая, ако вашата платформа за публикуване автоматично създава оразмерени варианти на оригиналното изображение, изберете един от тях за публикацията в блога си, а не оригиналното изображение в пълен размер.

Свързано четене: 7 начина за намаляване на размера на PDF файловете.