Стиснути зображення онлайн без втрати якості

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

Нижче розписано, як це робити з JPG, PNG і GIF, чому «без втрат» буває двох видів і як вкластися в ліміт 1 чи 2 МБ.

Як стиснути зображення за чотири кроки

Нічого складного, але порядок має значення.

1. Завантаж одне зображення або одразу кілька. Інструмент працює з JPG, PNG і GIF та вміє обробляти файли пачкою.
2. Запам’ятай початкову вагу й розмір у пікселях. Без цих цифр ти не зрозумієш, чи результат вартий уваги.
3. Запусти стиснення.
4. Відкрий обидва файли поруч і збільш до 100%. Дивись на краї об’єктів, текст, плавні градієнти неба чи шкіри. Саме там артефакти видно першими.

Одна порада, яка заощадить найбільше. Подивись, скільки пікселів справді потрібно. Фото 4000×3000 пікселів, яке на сторінці показується шириною 1200, містить приблизно в 11 разів більше пікселів, ніж потрібно (12 000 000 проти 1 080 000). Браузер усе одно зменшить його сам, а користувач заплатить за це трафіком. Для екранів із високою щільністю пікселів беруть із запасом удвічі, але не вчетверо.

Стиснути зображення онлайн — коли це зручніше, ніж програма

Онлайн-інструмент не треба встановлювати, і він однаково працює на телефоні, ноутбуці та чужому комп’ютері. Для разової задачі це найшвидший шлях.

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

Стиснути зображення без втрати якості — що це означає насправді

Стиснення буває двох типів.

Без втрат (lossless). Алгоритм перепаковує дані так, що після розпакування кожен піксель ідентичний оригіналу. Економія зазвичай скромна.

З втратами (lossy). Алгоритм викидає те, що око майже не помічає. Економія велика, але частина інформації зникає назавжди.

Коли сервіс обіцяє «без втрати якості», зазвичай мається на увазі «без помітної втрати». Це чесна й корисна обіцянка, просто це не математична ідентичність. Якщо тобі потрібен точний оригінал (друк, архів, подальша редактура), зберігай вихідний файл окремо і стискай копію.

З SVG інша логіка, ніж з рештою. Це не піксельна картинка, а текстовий опис фігур, тому економія там іде від прибирання зайвої розмітки та метаданих, а не від «якості».

Стиснути зображення PNG

PNG за своєю природою стискається без втрат, тому «вичавити» з нього багато складно. Хороша новина в тому, що є два шляхи.

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

Другий шлях агресивніший. Кількість кольорів у палітрі зменшується, і для логотипів, інтерфейсів та плоскої графіки різниця непомітна, а файл суттєво легшає. Для градієнтів і фотографій такий підхід може дати смуги й «зернистість», тому перевіряй результат очима.

Найчастіша помилка тут зберігати фотографію у PNG. Файл виходить у рази важчим за JPG без жодної користі для вигляду. Якщо прозорість не потрібна, перетвори такий PNG на JPG.

Якщо прозорість потрібна, а вага критична, подивись на WebP. За даними Google, коли для кольорових каналів прийнятне стиснення з втратами, WebP із прозорістю зазвичай дає файли приблизно втричі менші за PNG. Lossless WebP, за тими ж даними, на 26% менший за PNG (Google for Developers).

Стиснути зображення до 1 МБ або до 2 МБ

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

Якщо файл не проходить, дій у такому порядку.

1. Зменш розмір у пікселях. Це дає найбільший ефект і найменше шкодить виду на екрані.
2. Знижуй якість поступово, крок за кроком, і щоразу дивись на результат. Єдиного «правильного» значення немає, бо залежить від зображення (рівень, який виглядає чудово для фото, зіпсує зображення з дрібним текстом).
3. Зміни формат. Фото у PNG перетвори на JPG.
4. Прибери метадані, якщо інструмент це вміє. Дані камери та, іноді, геолокація займають місце, а ще їх не завжди хочеться публікувати.

Окремий нюанс. 1 МБ буває 1 000 000 байтів, а буває 1 048 576, залежно від того, як рахує система. Якщо сервіс жорсткий до ліміту, цілься в результат трохи нижче межі, а не рівно в неї.

Стиснути зображення для сайту

Тут стиснення стосується швидкості, а швидкість стосується і користувачів, і пошуку. Google радить для Largest Contentful Paint (час появи найбільшого елемента на сторінці) значення 2,5 секунди або менше, оцінене для 75% відвідувань. Дуже часто цим найбільшим елементом виявляється саме зображення, наприклад головне фото статті чи банер. Важке зображення там означає повільну сторінку.

Що робити на практиці.

• Віддавай зображення в тому розмірі, в якому їх показують, а не в оригіналі з камери.
• Розглянь WebP. За даними Google, lossy WebP на 25-34% менший за порівнянний за якістю JPEG. Google Search підтримує BMP, GIF, JPEG, PNG, WebP, SVG і AVIF, тож проблем з індексацією не буде.
• Не пропускай alt-текст. Google називає його найважливішим атрибутом метаданих зображення, а ще це доступність для людей зі скрінрідерами. Описуй, що на картинці, а не набивай ключові слова.
• Стискай до завантаження в CMS. Багато систем не оптимізують файли автоматично.

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

Стиснути зображення безкоштовно

Безкоштовних способів кілька: онлайн-сервіси, вбудовані функції редакторів і системи, консольні утиліти. Для більшості людей достатньо першого.

Перш ніж вибрати сервіс, перевір чотири речі. Чи є ліміт на кількість або розмір файлів за раз. Чи не додається водяний знак. Чи потрібна реєстрація. І що відбувається з файлами після обробки.

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

Підсумок

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

А ще у мене зібрано безкоштовні онлайн-інструменти для щоденних завдань, якщо після картинок доведеться щось конвертувати, перевірити чи підрахувати.

Автор: Lumir