Tutorials UA Ghost Blog Google Services

Як оптимізувати зображення

Iнструменти і принципи оптимізації зображень (convert to WebP, resize, compression)

Volodymyr Lavrynovych

Volodymyr Lavrynovych

— 3 min read
Як оптимізувати зображення

Вступ

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

Якщо ну дуже коротко, то кожне зображення, яке ви маєте на меті використати повинно пройти декілька етапів, а саме:

  1. Конвертація у WebP
  2. Обрізати зображення (де доречно)
    1. Бажано знайти гарну середину між тим, що хочеться і тим що потрібно. Розмір зображення має бути достатнім, для вашої задачі
  3. Стиснення
    1. Тут також треба знайти баланс мінімально придатного розміру. Картинка має передавати суть, а не перетворюватись на купу пікселів.

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

За приклад ми візьмемо ось це зображення, яке у оригіналі мало наступні характеристики:

  • Розмір файлу - 7,1 MB
  • Розміри зображення - 3042 × 1286
  • Тип - PNG

7.1 MB, Карл! Але я розкажу як зробити з нього адекватні 100 KB

Конвертація у WebP

Спочатку треба трохи пояснити про сам формат WebP і тоді вже перейдемо до процесу конвертації

Формат зображень WebP

Формат WebP — це сучасний формат зображень, розроблений компанією Google. Він створений для того, щоб забезпечити високоякісні зображення при меншому розмірі файлу порівняно з традиційними форматами, такими як JPEG або PNG.

Основні переваги формату WebP:

  1. Стиснення без втрати якості: WebP може зберігати зображення у високій якості без втрати інформації, як і PNG. Проте файли WebP займають менше місця.
  2. Стиснення з втратою якості: Також підтримується стиснення з втратами, як у JPEG, але з меншим розміром файлу і кращою якістю зображення при однаковому ступені стиснення.
  3. Малий розмір файлів: Основна перевага WebP — зменшення розміру файлів зображень, що пришвидшує завантаження вебсторінок та економить місце на серверах.

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

Конвертація PNG у WebP

Як іструмент конвертації ми використаємо цей ресурс: https://cloudconvert.com/png-to-webp (до 10 конвертацій на день)

Як альтернативу без лімітів можна братий ще цей: https://convertio.co

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

Після конвертації на виході маєм файл у форматі WebP з розміром 439 KB. Цим першим кроком ми покращили результат на 93.96%.

І, доречі, в більшості випадків цього може вже бути достатньо. Але, я обіцяв 100 KB. Тож ходімо далі.

Обрізати зображення

Для цієї задачі знайшов інший доступний інструмент: https://www.simpleimageresizer.com/

Для мої цілей було достаньо обрізати зображення до 720px

Після цього кроку ми маємо файл розміром у 176 KB та розміром 1703x720 px. Це також дуже непоганий результат, так ми зберегли ще десь 59.91%. Рухаємось далі

Стиснення

Останній інструмент буде стискати на вказаний відсоток: https://imagecompressor.11zon.com/en/compress-webp/

В пару кліків я підібрав, що для досягнення менш ніж 100 KB мені потрібно стиснути зображення на 72%. На виході маю файл з фактичним розміром 95 KB.

Я також пробував зажимати на більший відсоток. Шляхом спроб я зрозумів, що більше як на 96% краще взагалі не стискати, бо сприйняття контенту погіршується дуже відчутно, особливо в залежності від задач.

Вважаю стиснення від 50% до 75% оптимальним вибором для переважної частини задач.

Висновок

Я на прикладі довів, що можливо суттєво зменшити розмір зображення. З початкових 7.1 MB ми дійшли до 95 KB, що покращило розмір на 98.69%.

Це відповідно буде впливати на багато показників на вашому сайті:

  • Файли займаються менше місця на сервері
  • Читання менших файлів відбувається швидше
  • Передача менших файлів через мережу теж швидша
  • А також рендер таких зображень буде швидший

Головне, це не забувати про адекватність і якість сприйняття самого зображення. Не обрізайте або не утискайте файли, якщо на то немає гострої потреби. Базової конвертації у WebP у 90% випадків буде більше ніж достатньо.

Такий інструмент аналізу веб сторінок як PageSpeed Insights (https://pagespeed.web.dev) надасть вам більше деталей стосовно того, чи потребує ваша сторінка оптимізації зображень.

Знайте міру та використовуйте з розумом!

Read more