Оптимізація (стиснення) зображень для сайту фотографа

1. Мій огляд програм і он-лайн сервісів для оптимізації (стиснення) зображень для інтернету
2. Програма File Optimizer
3. Автоматизований модуль OptiPic
4. Он-лайн сервіс PunyPNG
5. Краще стискати зображення без втрати якості loseless або все-таки з втратою?
6. Підготовка зображень для оптимізації (для стиснення)
7. Основні висновки:

Наша команда-партнер Artmisto

Дорогі друзі, колеги!

Мені довелося приділити досить багато часу вивченню питання, яким краще чином оптимізувати (стискати) зображення для сайту. В даному випадку мова йде про сайті фотографа, де якість зображень, як ви розумієте, має ключове значення. Вирішив трохи розповісти про свій досвід, кому-то це може стане в нагоді.

Кожен фотограф у кого є свій сайт знає наскільки важливо належним чином підготувати фотографії, які ми заливаємо на сайт. Я, наприклад, не приділяв даного питання на серйозну увагу. Хоча насправді, це важливо. Відразу хочу відзначити, що мова піде тільки про методи стиснення і підготовці в цілому фотографій для Інтернету, а не про SEO-оптимізації фотографій.

Алгоритми пошукових систем постійно вдосконалюються, вони охоплюють і враховують всі нові і нові аспекти технічних характеристик сайтів, від контенту до нюансів коду. В даний час справа йде так, що якщо фотографії / картинки на вашому сайті не оптимізовані (не стислі) належним чином і на сторінці їх велику кількість, як зазвичай буває на сайтах фотографів, пошуковики це враховують і можуть видавати попередження в засобах аналітики ЯндексВебмастер, GoogleAnalitics та ін. Ругаются вони на те, що сторінка повільно завантажується. А повільне завантаження в свою чергу негативно позначається на ранжируванні сайту пошуковими системами. Якщо ви створили нову сторінку, яка містить багато неоптимізованих (не стисло) картинок, Google, наприклад, взагалі може довгий часом її не індексувати. Доводиться робити це примусово.

В Інтернеті є багато статей про те, як стискати фото для сайту. Для цього існує цілий ряд програм і сервісів он-лайн. Є аналітичні статті, які розглядають, оцінюють і привласнюють рейтинги різними програмами і сервісів по оптимізації, намагаючись полегшити користувачам проблему вибору.

Коли я перейнявся проблемою стиснення фотографій для сайту, я мало що про це знав і просто почав збирати інформацію в Інтернеті. Потім я вже зрозумів, що потрібно шукати тільки програми та сервіси, які тиснуть фотографії без втрати якості, в режимі loseless, але спочатку я про це не знав. На моєму сайті переважна більшість картинок у форматі JPG, тому я не дивився проги працюють з іншими форматами зображень, а зосередився тільки обробниках JPG. Крім інформації в інтернеті я питав серед знайомих seo-оптимізаторів і програмістів здійснюють технічну підтримку клієнтських сайтів.

Мій огляд програм і он-лайн сервісів
для оптимізації (стиснення) зображень для інтернету

Он-лайн сервіс Tinypng

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

У сервісу є безкоштовна базова версія, яка дозволяє обробляти тільки поодинокі файли. Для пакетної обробки потрібно платна підписка. Я виклав за неї ок. 1600 р.

У перший же день я оптимізував зображення декількох основних сторінок сайту. Але якість картинок, на жаль, помітно попливло. Деякі виглядали менш гірше, деякі зовсім гірше, загальне враження склалося незадовільний. У даного сервісу немає ніяких налаштувань, тільки одна кнопка «Оптимізувати», тому користувач не має можливості впливати на результат.

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

Крім того, у мене в принципі склалося не дуже приємне враження від використання он-лайн сервісу. У тому числі через те, що протягом дня Tinypng був кілька разів недоступний хвилин по 10-15. Не знаю з чим це пов'язано, чи то через зникнення Ітнернет, чи то через збій на самому сервісі.

Програма File Optimizer

Знову я занурився в інтернет в пошуках більш прийнятного варіанту. Тепер вже сильніше заглибився в різні статті і зрозумів, що шукати потрібно сервіс або програму, яка б жала JPG без втрат, в так званому режимі loseless. На Хабре попався хороший аналітичний огляд різних програм і сервісів з якої вибрав для себе програму, яка за своїми показниками була на першому місці серед програм для Windows, це File Optimizer. Правда в тій статті на першому місці серед всіх (проги і он-лайн сервіси) зі стиснення JPG без втрат стояв все-таки он-лайн сервіс PUNYpng, але після невдалого досвіду з Tinypng я вирішив не зв'язується з он-лайн в принципі. Отже, File Optimizer - це розробка програміста Nikkho (Javier Gutiérrez Chamorro). Свіжу версію програми завжди можна скачати на Sourceforge. Якщо ви загугли назва програми ім'я або нік програміста, ви потрапите на потрібну сторінку. Програма тисне JPG без втрат. Працює як з окремими файлами, так і з папками. Оригінали файлів програма не видаляти, вона перейменовує исходник, додаю йому розширення .bak. Програма тисне JPG в середньому на 18% (без втрат), тобто ваша картинка візуально зовсім не змінюється. Якщо у вас стоїть, припустимо, ступінь стиснення JPG на значенні 10, програма так і залишить на цьому значенні, не змінюючи його, але стисне файл використовуючи тільки свій алгоритм, а не стиснення JPG.

Все б добре, мене влаштувала якість результату, але тепер переді мною постала інша проблема - мені потрібно було оптимізувати за допомогою програми більше 8 тис. Зображень, - саме таку кількість знаходиться на моєму сайті. Всі ці картинки розкидані по різних сторінках і папок. За моїми уявленнями, це обсяг робіт приблизно на тиждень. Приблизно в той же час мені попалася в Інтернеті реклама (можливо мене спіймали на ретаргетінг) сервісу OptiPic. Мене привабила фраза, що сервіс оптимізує зображення вже завантажені на ваш сайт, тобто їх не потрібно спочатку готувати на комп'ютері, а потім заново заливати на сайт. Це було ключовим моментом, який вплинув на мій вибір даного сервісу. Вирішив - потрібно обов'язково тестувати!

Автоматизований модуль OptiPic

OptiPic - це автоматизований модуль, який встановлюється на сайт. У сервісу налагоджена інтеграція з усіма основними CMS. У нас, наприклад, сайт на Бітрікс, для цієї CMS на Marketplace Бітрікс скачується модуль і розгортається на сайті. Ви заходите в своїй адмінки на сайті в модуль і там вже встановлюєте параметри обробки картинок. Там же і запускаєте поцесс стиснення. Сервіс оптимізує всі зображення на сайті і надає вам звіт у відсотках про ефективність стиснення.

Сервіс платний. Оплата проводиться за обсягом оброблених картинок в МБ. Я, наприклад, купив у них за 750 р 2 ГБ. В рамках цього обсягу вдалося оптимізувати повністю всі зображення на сайті, більше 8 тис. Шт.

У сервісу OptiPic є ряд налаштувань, які задаються користувачем. Наприклад, якість стиснення (шакала в процентах від 0 до 100). Також в сервісі є опція «стискати без втрати якості». Для цього необхідно встановити якість стиснення на значення 100%.

Можна поставити галку «Зберігати оригінали», вони в такому випадку будуть зберігається так само на вашому сайті, в папці разом із стисненими картинками, сервіс просто перейменовує імена файлів оригіналів, додаючи їм своє розширення .optimg-orig. Якщо ви поставили галку «Зберігати оригінали», ви завжди зможете відкотити процес стиснення назад, натиснувши «Повернути оригінали».

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

Основне і головна перевага цього сервісу то, що ви взагалі не витрачаєте свій час на обробку та заміну картинок на сайті, все робиться за вас.

Однак, друзі, додам ложку дьогтю. Сервіс OptiPic повноцінно працює тільки в автоматичному режимі, тобто вам потрібно встановити на свій сайт модуль і сервіс все буде робити за вас. Але якщо ви захочете самі повністю управляти процесом і жати окремі зображення або вибірки з папок, в OptiPic це робити не вийде. У нього є типу демонстраційного режиму, за допомогою якого можна тиснути окремі картинки, але це реалізовано настільки викривлено, що користуватися цим немає сенсу при наявності стількох цікавіших в цій області пропозицій на ринку.

Далі я приведу конкретні результати в цифрах, які я отримав стискаючи один і той же тестовий файл (фотографію в форматі JPG).

Спочатку OptiPic. У режимі loseless OptiPic видав стиснення мого пробного файлу на рівні 13,6%. Це було зображення JPG, попередньо збережений зі ступенем стиснення JPG на значенні 10 з 12 п. Це ж саме зображення я прогнав через програму File Optimizer, стиснення loseless вийшло на рівні 15%, тобто практично ідентичне.

Он-лайн сервіс PunyPNG

І тоді для чистоти експерименту я зважився все-таки випробувати ще один он-лайн сервіс PunyPNG, пам'ятаючи про статтю на Хабре, де говорилося про провідному місці цього сервісу зі стиснення loseless. Завантажив цей же самий пробник. Я отримав стиснення 14%, що було приблизно на рівні показників програми File Optimizer і сервісу OptiPic.

До речі, сервіс PunyPNG теж платний, базова підписка коштує 1 $ / місяць, підписка Pro коштує 3 $ / місяць. Відмінність між цим підписками у кількості файлів, які можна обробити і в максимальному розмірі, що стискається оригіналу. За базової підписці ви можете щомісяця жати до 3 тис. Зображень з максимальним розміром файлу до 500 KB, по підписці PRO - до 5 тис. Картинок з розміром файлу до 1 MB.

Краще стискати зображення без втрати якості loseless або все-таки з втратою?

Як я з'ясував, рівень стиснення картинок в режимі loseless (без втрат) знаходиться на рівні 13-15%, що досить мало для оптимізації під Google Pagespeed Insights. Якщо Pagespeed Insights лаялася на ваші зображення або цілі сторінки, то стиснення на 13-15% може не поліпшити ситуацію, Google Pagespeed Insights так і буде видавати вам попередження, що зображення на сайті не оптимізовані. У мене було саме так. Google взагалі відмовився індексувати сторінки мого сайту після переїзду сайту на https. Pagespeed Insights лаяти що сторінки занадто важкі і все зображення не оптимізовані.

Поки я зупинив свій вибір на модулі OptiPic і вирішив спробувати стискати не в режимі loseless, а з невеликою втратою якості, встановивши якість стиснення на значення 80%. Загальна ефективність стиснення при цьому вийшла на рівні 32%. Так, якість картинок трохи змінилося, а саме, з'явилося зерно. Але при цьому ніяких інших погіршень помічено не було. Я не переживаю особливо з приводу зерна, тому що за допомогою OptiPic у мене є можливість в один клік повернути оригінали всіх 8 тис зображень на моєму сайті і прогнати через сервіс все повторно, з іншим значенням, наприклад з 90%. Так, я при повторній перегонці знову повинен буду заплатити за трафік близько 750 р., Але це не така велика сума, коли мова йде про сайті. Поки я в роздумах чи варто позбавлятися від зерна або залишити як є.

У загальному і цілому, я задоволений OptiPic, особливо його величезними можливостями автоматизації, користувачеві нічого не потрібно робити самому. Це дуже круто, на мій погляд.

Підготовка зображень для оптимізації (для стиснення)

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

Напевно, головне, в справі підготовки зображення, щоб фізичний розмір (в пікселях) завантажуються на сайт зображень відповідав розміру відображення цих картинок на сторінках. Не можна підганяти розмір за допомогою коду! Це коли, припустимо, ви заливаєте на сайт картинку 1200x800 px, а на сторінці дана картинка відображається в розмірі 900x600 px.Етот метод неправильний і пошуковики це бачать. У Google є сервіс PageSpeed ​​Tools, за допомогою якого можна перевірити сторінки сайту на предмет їх оптимізації та швидкодії з точки зору Google. Якщо даним сервісом перевірити подібну сторінку, на якій є подібне зображення (зменшене за допомогою коду), сервіс покаже вам що є помилка і таке зображення необхідно фізично зменшити в розмірі.

Дозвіл зображення на екрані вимірюється в кількості пікселів на дюйм (ppi). Хоча саме поняття «дозвіл зображення для екрану» - відносне. Від нього реально нічого не залежить, в тому числі і вага файлу. Значення дозволу як і раніше дуже важливо для друку картинки, але не для екрану. Дозвіл більшості дисплеїв варіюється від 72 до 120 ppi. Хоча дозвіл екрана MacBook Pro, наприклад, дорівнює 220 ppi. У нашому випадку, для підготовки зображень ключове значення має тільки розміри зображення в пікселях (ширина / довжина). Якщо допустимо ваша картинка має розмір 800x600 px, яке б дозвіл для неї ви не задали, хоч 72, хоч 300 dpi, всі екрани (з різним дозволом) будуть показувати її як 800 x600. Вони не будуть її розтягувати або стискати в залежності від виставленого вами дозволу. І вага картинки буде однаковим, що для 72, що для 300 ppi. В Фотошопі за замовчуванням параметр дозволу зображень для екрану виставлений на значенні 72 ppi. Його я і дотримуюся, залишаючи значення за замовчуванням.

Стиснення JPG є важливими, як для якості картинки, так і для її ваги. Як відомо, в різних програмах ступінь стиснення задається за різними шкалами. У Photoshop, наприклад, від 0 до 12, в Lightroom - від 0 до 100%. Також і в різних програмах і сервісах для стиснення картинок в основному використовуються 2 цих шкали. Краще знати приблизні відповідності значень цих шакал. В основному всі рекомендують використовувати ступінь стиснення зображень для сайту на рівні 8-10 за шкалою Photoshop, що відповідає приблизно 67 до 85%. Я зазвичай для всіх зображень JPG на сайт так і роблю, виставляю ступінь стиснення 8-10. Так, вісімка незначно змінює якість картинки, але при цьому істотно зменшує її вагу, остаточний вибір за вами.

Основні висновки:

1. Мабуть, не помилюся, якщо скажу, що однією з найбільш зручних і ефективних програм (під Windows) для стиснення зображень у форматі JPG (без втрати якості, loseless) є File Optimizer. Програма безкоштовна. Має можливості для користувача налаштувань.

2. За рівнем зручностей і автоматизації для користувачів, на сьогоднішній день, одним з лідерів є сервіс OptiPic, який дозволяє тиснути як без втрат, так і з втратою якості. Головна перевага сервісу - він працює в повному автоматичному режимі. Сервіс дозволяє стискати вже завантажені на сайт зображення. Але в інших режимах даний сервіс не працює. Тобто ви не зможете його використовувати повноцінним чином, якщо не підключите його до свого сайту.

3. Одним з найефективніших он-лайн сервісів зі стиснення зображень JPG без втрат можна назвати PunyPNG. Сервіс платний, але не дорогий. Дозволяє в ручному режимі завантажувати як окремі зображення, так і папки.

4. Не треба забувати правильним чином готувати зображення перед прогоном їх через програму або сервіс для стиснення.