аптымізацыя малюнкаў

1. важнасць аптымізацыі Добры дзень. У адной з мінулых артыкулаў я рабіў агляд і параўнанне бясплатнага...
2. Параўнанне вынікаў аптымізаваных малюнкаў
3. Кароткае інтэрв'ю з аўтарам

важнасць аптымізацыі

Добры дзень.

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

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

Людзі здавольваюцца альбо стратай дзясяткаў кілабайт і падзеннем ацэнкі ў PageSpeed ​​Insigths, альбо купляюць прэміум пакеты для апрацоўкі малюнкаў.

Максімальны сціск і эканомія вагі старонкі асабліва важныя для:

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

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

да зместу ↑

Выбар кадавальнік і зручнага спосабу

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

Убудова вы можаце спампаваць з рэпазітара.

Opti MozJpeg Guetzli WebP

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

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

Такім чынам, краевугольныя магчымасці плагіна.

Даступныя на выбар 3 кадавальнік (магчыма даданне новых ў будучыні):

• mozjpeg - самы папулярны кадавальнік малюнкаў на сённяшні дзень, забяспечвае выдатнае сціск з даволі высокай прадукцыйнасцю;
• guetzli - новы алгарытм аптымізацыі малюнкаў ад Google з памяншэннем вагі на 20-30% і захаваннем высокага візуальнага якасці малюнка. Мінусам з'яўляецца вельмі доўгая апрацоўка і высокае спажыванне рэсурсаў;
• webp - фармат сціску малюнкаў, прапанаваны ад Google у 2010 г, аптымізаваны для вэб. Але не падтрымліваецца ўсімі браўзэрамі, таму на сайтах звычайна захоўваюцца некалькі копій малюнкаў у розных фарматах;

Ці значыць гэта, што трэба самому пампаваць і ўсталёўваць гэтыя бібліятэкі? Няма. Убудова дастаткова гнуткі і аўтар падаў тры варыянты яго выкарыстання:

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

да зместу ↑

Параўнанне вынікаў аптымізаваных малюнкаў

Для тэставання усталяваў убудова на чысты WordPress і згенераваў 150 запісаў з выявамі ад медиастока unsplash.com.

Па часе, mozjpeg ў два адначасовых патоку апрацаваў 160 малюнкаў прыкладна за 10 хвілін (на маім даволі слабым наўтбучным працэсары). Guetzli займае вельмі шмат часу і рэсурсаў, таму я не стаў праганяць праз яго ўсё медыяфайлы.

Аптымізаваў і параўнаў адно выпадковае малюнак.

Калі шчыра, я не асабліва заўважаю розніцу. Магчыма, на высакаякаснай матрыцы вы ўбачыце яе, калі заўважыце - напішыце. Дазвол ва ўсіх аднолькавае 254х300 (згенераваны WordPress памер medium)

1. Арыгінал (уверсе злева) - Вага: 25,3 кб.
2. ewww image optimizer (уверсе справа, для вонкавага параўнання выбраў гэты убудова, таму што актыўна выкарыстоўваю і лічу адным з лепшых) - Вага: 23,4 кб.
3. mozjpeg (унізе злева) - Вага: 23,9 кб.
4. guetzli (Унізе справа) - Вага: 19.4 кб.

Вядома, адной карцінкі ў малым дазволе недастаткова. Чым больш дазвол, тым больш выйгрыш і разрыў.

Напрыклад, у арыгінальным дазволе (1500х1200), вынікі аптымізацыі наступныя:

1. арыгінал - 389.6 кб.
2. ewww - 364.6 кб.
3. mozjpeg - 332,6 кб.
4. guetzli - 284,4 кб.

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

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

да зместу ↑

Кароткае інтэрв'ю з аўтарам

1. Як з'явілася ідэя стварыць плягін з такім функцыяналам?

Апошнім часам у SEO асаблівай увагай карыстаецца Google PageSpeed ​​Insights. У 2017 годзе на Google прыйшлося каля 75% усіх пошукавых запытаў у свеце, таму SEO зараз - гэта ў першую чаргу падладка сайта пад Google. PageSpeed ​​Insights - гэта механізм ацэнкі хуткасці загрузкі старонкі. Чым хутчэй грузіцца старонка - тым вышэй у яе рэйтынг у выніках пошуку Google.

Адным з ключавых момантаў паляпшэння паказчыка ў PageSpeed ​​Insights з'яўляецца аптымізацыя выяваў. За неоптимизированные малюнка здымаецца шмат балаў. Увосень 2017 гады мне паступіла некалькі заказаў на PageSpeed ​​SEO для сайтаў. Паўстала неабходнасць аптымізацыі малюнкаў на іх.

Спачатку я купіў платны убудова EWWW Image optimizer. Закінуў у яго $ 50, палічыў што павінна хапіць з запасам. Уключыў аптымізацыю.
Працэс дайшоў на першым сайце да 40% і заглух. Я пачаў разбірацца, аказваецца грошы скончыліся. Убудова бярэ грошы за аптымізацыю кожнага thumbnail.
А там іх па дзесяць штук на адно малюнка.

Вырашыў паставіць WP Smush, бясплатную версію. Аптымізуе бясплатна 50 малюнкаў, а потым трэба націснуць кнопку ў адмінку.
Аптымізаваў частка малюнкаў. Пратэставаў у Google Pagespeed, а ён усё роўна паказвае, што малюнка не аптымізаваныя.
Калі да гэтага было на 30-40% больш за норму, то пасля прымянення бясплатнай версіі WP Smush на 10-15%.

Вырашыў я ўсе выявы загрузіць па ftp і аптымізаваць кансоллю з дапамогай энкодера Mozilla MozJpeg.
Спрабаваў некалькі разоў, пакуль не дамогся таго, што Google Pagespeed прыбраў прэтэнзіі да малюнках. Але якасць малюнкаў стала вельмі дрэннае.
Аказалася што з восені 2017 года Google PageSpeed ​​змяніў правілы вызначэння оптимизированности малюнкаў, і цяпер патрабуе, каб малюнкі былі менш чым webp з якасцю 75 + 10% запас. Webp сціскае малюнка на 40% лепш любога jpeg энкодера, таму атрымаць аптымізаваныя выявы для Google без выкарыстання webp не атрымаецца.

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

Вось тады і нарадзілася ідэя стварыць свой убудова для аптымізацыі малюнкаў, у першую чаргу арыентаваны на аптымізацыю для Google PageSpeed ​​Insights.
Асноўная праблема аптымізацыі малюнкаў у WordPress сайтах - гэта часцяком адсутнасць магчымасці ўсталёўваць дадатковыя праграмы на сервер з сайтам. Большасць сайтаў выкарыстоўваюць хостынгі, а не асобныя сервера. Вось тут і прыйшло рашэнне - стварыць плягін, які будзе працаваць не толькі з лакальна усталяванымі энкодер, але і дыстанцыйна. Самы просты спосаб запусціць праграму дыстанцыйна ў свеце Linux - гэта падлучыцца па ssh. Таму я ўбудаваў ў свой убудова ssh кліент, і ён можа выкарыстоўваць энкодер выдалена.

Працуе гэта вельмі гнутка: Напрыклад Вам трэба аптымізаваць сайт Вашага кліента, які працуе на хостынгу. Вы ставіце на сайт мой убудова, а далей:
a) Калі ў Вас Linux дэсктоп, то ўсталёўваеце на ім ssh сервер і энкодер, і падлучаеце убудова да свайго дэсктопу. Ўбудова будзе аўтаматычна перадаваць выявы на Ваш Linux дэсктоп па ssh, аптымізаваць іх, і забіраць назад на сервер.
б) Калі ў Вас Windows дэсктоп, то Вы можаце ўсталяваць на ім бясплатны эмулятар віртуальнага кампутара Oracle VirtualBox.
Запусціць у ім адмыслова створаную мной віртуальную машыну, у якой ёсць Linux, ssh сервер і неабходныя энкодер. І падключыць ўбудова да гэтай виртуалной машыне.

2. Чаму бясплатна?

Мне хочацца мець свой pet project. І дзеліцца ім з іншымі праграмістамі. Я і сам выкарыстоўваю велізарны лік бясплатных праграм, напрыклад той жа Linux, VirtualBox, WordPress. Так я змагу ўнесці свой невялікі ўклад у свет вольнага ПА.

Акрамя таго, усе платныя убудовы для аптымізацыі малюнкаў у WordPress маюць свае сервера, на якіх вядзецца аптымізацыя.
Сервера - гэта дорага. Таму і кошт такіх убудоў не малая. Мне ўдалося рэалізаваць механізм, па якім Ваш кампутар - гэта і ёсць сервер аптымізацыі малюнкаў. Па гэтым для працы майго ўбудовы мне не трэба ствараць хмарныя сервера аптымізацыі і марнаваць на іх вялікія грошы.
У распрацоўку ўбудовы я ўкладваю толькі свой час.

3. Ці плануецца дапаўняць функцыянал пры росце папулярнасці і чым?

Вядома так, першая функцыя, якую я дадам у убудова - гэта аўтаматычная аптымізацыя пры даданні выявы ў Media Library.
Гэта функцыя патрэбна пасля таго, як праграміст зрабіў аптымізацыю сайта і здаў заказ. Заказчык будзе працаваць з сайтам, дадаваць малюнкі, і яны павінны аўтаматычна аптымізаваць. Праграміст можа стварыць бясплатна віртуальны сервер на Amazon AWS, усталяваць у ім Linux, энкодер і ssh. І падключаць сваіх кліентаў да яго пасля завяршэння работ.

Таксама плануецца дадасць камбінаваныя рэжымы «Mozilla MozJpeg + Google Web» і «Google Guetzli + Google Web»

4. У колькіх праектах вы яго ўжо выкарыстоўвалі і якія вынікі / ступень ацэнкі / задавальненне кліентаў?

У мяне убудова адпрацаваў на некалькіх вялікіх сайтах. Таксама убудовай карыстаюцца іншыя праграмісты. Я рэгулярна атрымліваю ад іх лісты з пытаннямі, таму ад нядаўна пачаў весці старонку
«Часта задаваных пытанняў» па плягіну. Што тычыцца уласнікаў сайтаў, то іх цікавіць толькі вынік. Колькі балаў атрымае іх сайт у PageSpeed ​​Insights. І калі ў PageSpeed ​​наогул няма заўваг да малюнкаў, значыць убудова адпрацаваў на выдатна.

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

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

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

падобнае