оптимізація зображень

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. На ваш власний погляд, чим відрізняється ваш плагін від інших існуючих рішень і чому вигідно використовувати його.

Плагін дає можливість самостійно і дуже гнучко створювати міні-сервери оптимізації. Це єдиний безкоштовний плагін, який працює на хостингах і не потребує хмарних серверах.

Спасибі, Ігор, за відмінний плагін і відповіді на питання! Я буду користуватися і рекомендувати плагін. Бажаю йому подальшого прискореного розвитку і зростання популярності.

схоже