Вы не любіце выявы?

Яны могуць пераўтварыць фрагмент тэксту ў прывабны вопыт падчас чытання. Выявы паляпшаюць паведамленне ў блогу, робяць яго больш даступным для абмену і задаюць тон і брэнд усяму сайту.

І ведаеце што? Мы настроены рэагаваць на выявы. Вось чаму ўключэнне малюнкаў у ваш кантэнт з'яўляецца магутным інструментам для выкарыстання пры маркетынгу вашага блога.

Але, калі вы не будзеце асцярожныя, малюнкі могуць складаць больш за палову (ці больш) агульнага памеру вашай вэб-старонкі. Яшчэ некалькі гадоў таму сярэдні памер вэб-старонкі быў 600-700K. Зараз сярэдняе значэнне складае 2 МБ, і яно павялічваецца з кожным годам.

Гэта велізарна!

Асноўная прычына гэтага ў тым, што некалькі малюнкаў часцей выкарыстоўваюцца на вэб-старонках, і гэтыя выявы не няправільны памер і аптымізацыя. Гэта азначае, што яны не захоўваюцца і не кампілююцца зручным для Інтэрнэту спосабам, а замест гэтага загружаюць вашыя старонкі.

Аднак большасць з нас пакідаюць аптымізацыю малюнкаў на заднім рахунку і аддадуць перавагу займацца цікавымі рэчамі як стварэнне эпічнага допісу або стварэнне сетак з іншымі блогерамі ў вашай нішы.

Але раздуцце старонкі азначае, што гэта ўплывае на хуткасць загрузкі вашай старонкі. Вы можаце не думаць, што гэта вялікая праблема, калі вы карыстаецеся высакахуткасным злучэннем, але многія з вашых наведвальнікаў не так. Акрамя таго, Google не любіць павольную загрузку старонак, і гэта можа негатыўна паўплываць на ваш SEO.

Чаму вам трэба аптымізаваць выявы

Вы шмат працуеце наствараючы зорны кантэнт, і вы марнуеце незлічоныя гадзіны на прасоўванне свайго блога і зносіны з іншымі блогерамі, таму апошняе, чаго вы хочаце, гэта каб патэнцыйныя наведвальнікі пакінулі ваш вэб-сайт яшчэ да таго, як ён загрузіцца!

Даследаванні паказваюць, што да 40% наведвальнікі націскаюць кнопку "Назад", калі загрузка сайта займае больш за тры секунды.

Я ведаю, тры секунды - гэта не так ужо і доўга, але калі вы карыстаецеся мабільным злучэннем і чакаеце загрузкі сайта, секунда можа здавацца вечнасцю.

І паколькі многія вашы наведвальнікі могуць карыстацца павольнымі мабільнымі злучэннямі, становіцца ясна - вам трэба паменшыць памер старонкі. І мы ўжо ведаем, што з'яўляецца найбуйнейшым парушальнікам памеру старонкі - гэта вашы выявы.

Залішне вялікія выявы таксама займаюць месца на вашым уліковым запісе хостынгу. У той час як у некаторых з вас можа быць хостынг з «неабмежаванай» прасторай для захоўвання, многія правайдэры прэміум-хостынгу абмяжоўваюць вас прыкладна 10 ГБ сховішча на планах ніжэйшага ўзроўню. Гэта можа хутка запоўніцца, асабліва калі вы размяшчаеце некалькі сайтаў з вялікай колькасцю малюнкаў на адным уліковым запісе.

Такім чынам, як вы можаце вызначыць, ці запавольваюць вашы выявы ваш сайт? Праверце хуткасць вашага сайта з дапамогай Google PageSpeed ​​Insights.

Калі Google паведамляе пра праблему з неаптымізаванымі выявамі, вось што вам трэба ведаць, каб яе выправіць.

Асновы аптымізацыі выяваў

Калі справа даходзіць да аптымізацыі малюнкаў у вашым блогу, вы павінны выконваць некалькі розных рэчаўведаць пра: тып файла, памер выявы і памеры, спосаб абслугоўвання выявы і сціск выявы.

Давайце больш падрабязна разгледзім кожную з гэтых абласцей.

Тып файла

Выявы ў інтэрнэце звычайна захоўваюцца ў фармаце файла PNG або JPEG або GIF для анімацыі. Каму не падабаюцца гэтыя вясёлыя аніміраваныя GIF-файлы, якія лунаюць па сетцы!

Цяпер тэхнічна добра , калі вы захоўваеце выявы ў любым фармаце – браўзер наведвальніка не будзе мець праблем з адлюстраваннем вашай вэб-старонкі – але для лепшай якасці і аптымізацыі прытрымвайцеся наступных правілаў:

• JPEG – выкарыстоўвайце для фатаграфій і дызайнаў, дзе прадстаўлены людзі, месцы або рэчы
• PNG – лепшы для графікі , лагатыпы, дызайн з вялікай колькасцю тэксту, скрыншоты і калі вам патрэбны выявы з празрыстым фонам
• GIF - калі вам патрэбна анімацыя, у адваротным выпадку выкарыстоўвайце PNG

Дык чаму існуюць розныя фарматы ?

Ну, PNG традыцыйна выкарыстоўваецца для захавання лагатыпаў і графікі, таму што ён захоўвае зыходную якасць выявы - ніхто не хоча размытага тэксту і піксельных фігур. Але, калі вы паспрабуеце захаваць фатаграфію ў фармаце PNG, яна будзе выглядаць цудоўна, але выніковы памер файла будзе не вельмі дзіўным.

JPEG традыцыйна выкарыстоўваецца для захавання фатаграфій. Некаторыя даныя выявы выкідваюцца, каб стварыць значна меншы памер файла, але паколькі фатаграфіі ўтрымліваюць шырокі выбар колераў і натуральных варыяцый, страта якасцізвычайна незаўважныя для чалавечага вока.

Пазней мы спынімся на сціску больш падрабязна, але зараз, калі вы памятаеце толькі дзве рэчы, памятайце: JPEG для фатаграфій і PNG для тэксту/графікі.

Памеры відарыса

Вы калі-небудзь загружалі вэб-старонку і заўважалі, што маленькая карцінка (магчыма, здымак галавы, напрыклад) займае ф-о-р-э-в-э-р для загрузкі? Маўляў, так павольна, што бачыш кожны радок? Вы думаеце пра сябе, як загрузка такой маленькай выявы можа займаць так шмат часу?

І калі гэта здараецца з вялікай выявай загалоўка, гэта яшчэ горш, таму што яна можа спыніць загрузку ўсёй старонкі.

Прычына, па якой гэта адбываецца, заключаецца ў тым, што блогер не змяніў належным чынам памер і аптымізаваў сваю выяву, а ў выпадку з нашым прыкладам здымка галавы, магчыма, загрузіў JPEG у поўным раздзяленні непасрэдна са сваёй люстраной камеры.

І гэта велізарны файл!

Разумееце, вэб-браўзер (звычайна) маштабуе выяву ў параўнанні з яе першапачатковымі памерамі, каб яна прыгожа змясцілася на сваім месцы на вэб-старонцы. Тое, што выглядае як маленькая выява на экране, на самай справе можа быць велізарнай 10-мегапіксэльнай фатаграфіяй, паменшанай у рэжыме рэальнага часу браўзерам.

Цяпер некаторыя платформы вэб-публікацыі будуць аўтаматычна ствараць некалькі варыянтаў вашай выявы ў поўнай разрознасці ў розных памераў, але калі няма, вам варта загадзя змяніць памер малюнкаў у рэдактары малюнкаў, такім як Photoshop, Lightroom, Pixlr - ці нават MS Paint. Гэта можа азначаць розніцупаміж файлам 50K і 5MB.

WordPress, напрыклад, аўтаматычна створыць тры (або больш, у залежнасці ад вашай тэмы) копіі вашай запампаванай выявы – усе з рознымі памерамі – якія вы можаце выкарыстоўваць у паведамленнях блога, а не заўсёды з выкарыстаннем поўнапамернага відарыса.

Калі вы маеце звычку запампоўваць велізарныя стандартныя выявы і хочаце зэканоміць месца ў сваім уліковым запісе хостынгу, плагін WordPress Imsanity падтрымлівае вашу спіну.

Ён змяняе памер і замяняе арыгінальны відарыс на больш зручны, так што нават калі вы ўставіце поўнапамерны відарыс у сваю публікацыю, гэта не будзе так дрэнна.

Пасля актывацыі Imsanity можа таксама шукаць вашы існуючыя выявы і змяняць памер адпаведным чынам.

Абслугоўванне вашых малюнкаў

Тое, як вы паказваеце свае выявы сваім наведвальнікам, не датычыцца іх аптымізацыі самі па сабе. , але гэта можа значна паўплываць на час загрузкі вашай старонкі.

Большасць блогераў размяшчаюць свае выявы прама са свайго ўліковага запісу хостынгу, і гэта звычайна нармальна, але калі вы сапраўды жадаеце выціснуць кожную частку прадукцыйнасці з ваш сайт, то размяшчэнне вашых малюнкаў у сетцы дастаўкі кантэнту (CDN) можа мець вялікае значэнне.

CDN складаецца з стратэгічна размешчаных вэб-сервераў, размешчаных у цэнтрах апрацоўкі дадзеных па ўсім свеце. Гэтыя серверы размяшчаюць дублікаты вашых малюнкаў, і калі браўзер наведвальніка запытвае выяву з вашага сайта, CDN аўтаматычна накіроўвае браўзер насервер, які геаграфічна бліжэй за ўсё да іх.

Гэта азначае, што наведвальнікі з Еўропы, напрыклад, будуць атрымліваць выявы з лакальнага еўрапейскага сервера, а не з аднаго з Штатаў ці іншых краін. Паколькі час водгуку і затрымка ў сетцы зніжаны, выявы спампоўваюцца значна хутчэй, што скарачае час загрузкі старонкі.

Майстар вядзення блога выкарыстоўвае 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, каб зняць абмежаванне.

Парада прафесіянала : Дасведчаныя карыстальнікі, якія хочуць інтэграваць JPEGmini ў Photoshop або Lightroom з дапамогай плагіна, могуць набыць версію Pro для$99,99.

Інструменты Інтэрнэт / Воблака / SaaS

TinyPNG

Калі вы шукаеце высакаякасны інструмент для сціску малюнкаў у Інтэрнэце, TinyPNG (ён аптымізуе JPEG файлы таксама, нягледзячы на ​​назву) - гэта вэб-прыкладанне, якое дазваляе вам перацягваць да 20 малюнкаў памерам 5 МБ або менш у ваш браўзер і аптымізаваць іх усе адначасова.

У іх таксама ёсць API для распрацоўшчыкаў і ствараецца WordPress даступны плагін, які можа аўтаматычна аптымізаваць вашы выявы пасля загрузкі.

TinyPNG дае вам 500 бясплатных аптымізацый выяваў у месяц, а пасля гэтага спаганяе ад 0,002 да 0,009 долараў ЗША за выяву ў залежнасці ад аб'ёму.

Цяпер 500 выяваў у месяц можа здацца вялікай колькасцю, але калі ўлічыць той факт, што WordPress часта стварае ад трох да пяці варыянтаў кожнай выявы ў розных памерах, 500 выяваў не падаюцца так шмат для плённага блогера. На шчасце, кошт кожнай выявы бюджэтны.

EWWW Image Optimizer

Калі вы не гатовыя марнаваць грошы і не жадаеце турбавацца аб аптымізацыі вашых малюнкаў уручную, бясплатны плагін EWWW Image Optimizer для WordPress можа аўтаматычна аптымізаваць загружаныя выявы.

Вы можаце выбраць прэміум-падпіску, якая выконвае сцісканне са стратамі, але бясплатная версія выконвае толькі сцісканне без страт, так што эканомія t амаль гэтак жа істотна. Гэта зэканоміць ваш час і лепш, чым нічога.

Заўвага: Каб атрымаць поўную інфармацыю, праверценаша публікацыя пра інструменты сціску малюнкаў.

Завяршаем

Паколькі некаторыя людзі прагназуюць, што сярэдні памер вэб-старонкі да 2017 года наблізіцца да 3 МБ, зараз самы час пачаць аптымізаваць свае выявы.

Памятайце, што не ўсе вашы наведвальнікі будуць карыстацца высакахуткаснымі злучэннямі, і раздуцце старонкі і павольны час загрузкі могуць паўплываць на ваш рэйтынг у Google. Каб дапамагчы вам, так бы мовіць, палегчыць нагрузку, вазьміце звычку аптымізаваць свае выявы сёння.

Звярніце ўвагу на памеры выявы і змяніце памер любых занадта вялікіх фотаздымкаў або малюнкаў з лічбавай камеры да адпаведнага памер.

Далей скарыстайцеся перавагамі сучаснага сціску малюнкаў з дапамогай настольных праграм, такіх як JPEGmini, або воблачных інструментаў, такіх як TinyPNG або Kraken, інтэграваўшы іх у WordPress з дапамогай плагіна, калі гэта магчыма.

Нарэшце, калі ваш платформа публікацыі аўтаматычна стварае варыянты вашага арыгінальнага відарыса змененага памеру, выберыце адзін з іх для свайго паведамлення ў блогу, а не арыгінальны поўнапамерны.

Звязанае чытанне: 7 спосабаў паменшыць Памер PDF-файлаў.