Інструкція

Стиснення зображення без помітної втрати якості

Більшість зображень виходять із камери чи дизайн-інструмента важчими, ніж потрібно браузеру або електронній пошті. Стиснення не означає псування зображення: за правильного налаштування якості та формату результат виглядає так само, як оригінал, і завантажується у два-п'ять разів швидше. Головне правило: спочатку оберіть правильний формат, а вже потім налаштовуйте якість.

Крок за кроком

Оберіть формат виведення, перш ніж торкатися повзунка якості. JPEG або WebP для фотографій, PNG лише тоді, коли потрібен прозорий фон чи піксельна точність без втрат. WebP перевершує JPEG на 25-35 відсотків за однакової візуальної якості, і кожен сучасний браузер його підтримує: віддавайте йому перевагу, коли контролюєте, де відображатиметься зображення.
Перетягніть зображення у стискач і відрегулюйте повзунок якості. Почніть із 80 відсотків для фотографій і порівняйте перегляди до та після поруч. Опустіть до 70, якщо файл усе ще завеликий: різниця рідко помітна за звичайних розмірів екрана. Для графіки з чітким текстом або суцільними кольорами перейдіть на PNG без втрат або спробуйте SVG, якщо джерело є векторним.
Завантажте результат і перевірте його на 100-відсотковому масштабі перед публікацією. Якщо завантаження на сайт стискає ваше зображення повторно (соцмережі зазвичай так роблять), надішліть версію трохи вищої якості, щоб подвійне стиснення залишалося прийнятним. Стискач працює повністю у вашому браузері: ваш файл ніколи не залишає ваш пристрій.

Чому вибір формату важливіший за число якості

JPEG із якістю 80 і WebP із якістю 80 виглядають на екрані схоже, але файл WebP відчутно менший. AVIF іде ще далі, хоча кодування триває довше. PNG, який часто помилково використовують для фотографій, дає файли в кілька разів важчі за JPEG для тієї самої фотографії, бо за своєю природою він без втрат. Зменшення розміру перед стисненням також допомагає: фото шириною 4000 пікселів, масштабоване до 1200 пікселів для колонки блогу, втрачає у вазі набагато більше від зміни розміру, ніж від будь-якого налаштування якості.

Чому варто стискати локально, а не завантажувати на сервер

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

Інструменти з цього гайда

Поширені запитання

Як зрозуміти, що я зайшов зі стисненням надто далеко?

Збільште результат до 100 відсотків і подивіться на текстуровані ділянки: волосся, тканину, листя. Стиснення з втратами проявляється насамперед у цих зонах блоковими плямами чи розмитими деталями. Якщо ви помічаєте це на 100-відсотковому масштабі, глядачі на телефоні теж побачать, тож підніміть налаштування якості на 5-10 пунктів і спробуйте знову.

Слід змінювати розмір до чи після стиснення?

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