Оптимізація картинок - важлива частина просування сайту. Правильно оптимізовані зображення сприяють висшемуранжіровнію ресурсу в пошуковій видачі і прискорюють швидкість завантаження контенту. Що ж таке оптимізація картинок і як вона виконується?
Перед тим, як починати процес "стискання" картинок, оцінюємо швидкість завантаження web-сторінок і розбираємося в тому, які показники заважають покращувати результати. Допоможе в цьому сервіс PageSpeed Insights. Якщо сторінка набере більше 85 з 100 балів - це хороший результат і саме до такої цифри потрібно прагнути.
Наприклад, зараз результат такої:
А після оптимізації:
Такий результат став можливий завдяки використанню рекомендацій Google:
формат PNG
Як оптимізувати картинки, якщо для їх збереження використаний формат PNG? Для цього можна скористатися рекомендаціями Google:
Якщо планується тільки базова оптимізація зображень, можна використовувати будь-яку програму для редагування картинок: GIMP. Photoshop і т.д. Але, яка з них краще? Дізнатися це допоможе невеликий експеримент. Беремо неоптимізованими зображення у форматі PNG вагою 293 КБ:
Створюємо дві папки: «GIMP» і «Photoshop» і поміщаємо в них одну і ту ж картинку.
Результат виходить таким:
Підсумок: Photoshop виконав оптимізацію зображення краще, ніж GIMP.
Але, це не означає, що можна користуватися тільки цими варіантами. Є інші, не менш ефективні утиліти для стиснення картинок у форматі PNG. Наприклад, OptiPNG і PNGOUT. Результат їх роботи наступний:
Незважаючи на те, що OptiPNG на 1 КБ програла Photoshop, важить сама програма всього 96 КБ, а це великий плюс. А ось PNGOUT перевершила своїх «конкурентів» за всіма параметрами:
Робота з програмами
В першу чергу, потрібно завантажити утиліту OptiPNG або PNGOUT (а може і обидві) з офіційних сайтів. Потім потрібно перенести файли .exe в папку: C: \ Windows.
Щоб «спростити» завдання, досить просто скопіювати ці файли з папки Windowsі розмістити їх ярлики на робочому столі. Для зручності ярлик OptiPNG можна відразу назвати opting-o7 (параметр максимального стиснення при якому зберігається якість). Залишається просто перенести потрібні картинки на ярлик і почекати, поки програма їх оптимізує.
Такий спосіб простий, але не дуже зручний. Іноді при спробі оптимізувати велику кількість зображень може «вискакувати» помилка. Також не всім сподобається постійно перетягувати файли.
Тому, є ще один варіант роботи з утилітами. Створюємо тестовий документ, відкриваємо і прописуємо туди код (коректно працює тільки на ОС Windows):
Зберігаємо файл в форматі .reg і в кодуванні ANSI, запускаємо його, погоджуємося з усіма діями і готово. Утиліти інтегровані в оболонку Windows.
Як же здійснюється оптимізація картинок? Процес відбувається так: правою кнопкою миші натискаємо на папці, в якій знаходяться не оптимізовані зображення в форматі PNG (файли іншого розширення утиліта не змінює) і вибираємо програму, за допомогою якої будемо стискати картинки. Можна робити це двома утилітами по черзі.
Потім відкривається командний рядок, в якій демонструється процес оптимізації:
формат JPEG
Налаштування утиліти Jpegtran
Це означає, що потрібно використовувати інший спосіб активування утиліти. Jpegtran не обов'язково розміщувати в папкеС: \ Windows, а ось копію її можна тут зберегти. Розміщуємо програму jpegtran.exe в будь-якій папці і перейменовуємо (для зручності) в! Jpegtran.
Потім за допомогою Notepad ++ створюємо файл в кодуванні UTF-8 (без BOM) з розширенням .bat і назвою! Start. У нього поміщаємо цей код:
Щоб оптимізувати картинки, необхідно обидва файли jpegtran.exe і! Start.bat закинути в одну папці і запустити процес стиснення, використовуючи файл! Start.bat:
Налаштування програми Jpegoptim
Утиліта Jpegoptim без проблем впроваджується в оболонку Windows. Для її активації необхідно дописати код в кінці файлу PMGoptim.reg (він уже створений раніше для утиліт для картинок формату PNG):
Процес оптимізації картинок за допомогою даної програми простий: натискаємо лівою кнопкою миші на папку з зображеннями і вибираємо «Run jpegoptim».
Результат роботи Jpegtran і Jpegoptim:
Online-сервіси
В Інтернеті є безліч сервісів, що дозволяють ефективно оптимізувати зображення. Іноді результат їх роботи краще, ніж утиліт, розглянутих вище.
Однак online-сервіси при стисканні зображення погіршують якість. Іноді всього на кілька пікселів, але спотворення все ж помітні. Тобто розмір зображень нас цілком може влаштовувати, а от якість залишає бажати кращого.