Прийоми просунутої оптимізації зображень

45

Від автора: Для стиснення зображень можна застосовувати інструменти автоматизованої оптимізації. Однак якщо витратити час на їх ручну оптимізацію, то можна ще більше поліпшити результати. Ось п’ять методик ручної оптимізації зображень.

Оптимізація JPEG з допомогою Гаусового розмивання

Гаусівських розподілу розмиття пом’якшує деталі зображення. При редагуванні фотографій воно зазвичай застосовується для поліпшення якості надання фотографії цікавого зорового ефекту. Тим не менш, якщо помістити на фото трохи Гаусового розмивання — такого, яке не надто змінить його візуальну точність — можна зменшити розмір файлу фотографії.

Наочний приклад. Дане зображення розміром 60,9 KB:

Відкриємо його в photoshop’е і застосуємо Фільтр > Розмиття > гаусівських розподілу розмиття.

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

Після застосування фільтра Гаусового розмивання збережемо зображення звичним нам чином. Ось оптимізоване зображення:

Розмір оптимізованого зображення – 58,7 KB — розмір файлу зменшився на 3,6%.

Постеризація зображення

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

Наочний приклад. У цьому прикладі я використовую безкоштовне зображення PNG:

Зображення PNG розміром приблизно 51,0 KB. Я відкрив його в photoshop’е для постеризації.

Для цього перейдіть до Зображення > Регулювання > Постеризація. У діалоговому вікні Постеризації відзначте галочкою опцію Попередній перегляд для того, щоб бачити свої корективи в реальному часі. Встановіть опцію Рівні на найнижче значення з можливих, що підійде вам.

У прикладі погіршення якості сприйняття зображення неприйнятною для мене стає при значенні Рівня менше 76. Після регулювання просто зберігаємо PNG як зазвичай. Нижче наведено оптимізоване зображення:

З-за того, що я дуже енергійно застосував постеризацию, оптимізоване зображення стало всього 37,6 KB — зменшення розміру файлу сталося на 26,3%.

Подальше читання

Розумні техніки оптимізації PNG — ця стаття на Smashing Magazine більш докладно описує роботу постеризації і розкриває інші прийоми просунутої оптимізації зображень, такі як фільтрацію рядка розгортки і «брудну» прозорість

Найефективніший спосіб зменшення та оптимізації зображень PNG — це покроковий підручник показує, як постерізовать зображення у Photoshop

Постеризація зображень — В цій статті обговорюються технічні аспекти постеризації

Піксельна підгонка

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

Однак часто проблема виникає при перетворенні векторної графіки статичні формати зображення (растрову графіку), такі як JPEG або PNG. При використанні програм редагування зображень начебто photoshop’у для автоматичного перетворення векторної графіки на растрову вони з усіх сил намагаються згладити кути — це автоматизований процес під назвою «фільтрація-згладжування».

Результати фільтрування-згладжування можуть виявитися різними. Часто вона веде до погіршення якості. Для збереження якості графіки можна вручну відредагувати пікселі для того, щоб ті відповідали піксельною сіткою. Це називається піксельної підгонкою (або піксельною хинтингом).

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

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

Подальше читання про піксельної підгонці

Піксельна підгонка — підручник Дастіна Кертіса (Dustin Curtis) про піксельної підгонці та його обговорення

Піксельний хінтінг векторних зображень в Photoshop — відео-підручник про те, як підігнати пікселі своєї векторної графіки з допомогою photoshop’у

Як добитися ідеальних пікселів в Photoshop — ще один відео-підручник про виконання піксельної підгонки

Оптимізація JPEG з 8-піксельною сіткою

Я натрапив на цей прийом у статті Smashing Magazine з назвою Розумні техніки оптимізації JPEG. Там же ви знайдете й інші корисні способи оптимізації JPEG’ів. Зображення JPEG поділяється на блоки 8x8px, і з кожним з них можна звертатися як з цілісним об’єктом.

Ретельно вирівнявши частини зображення всередині сітки 8x8px, можна зменшити розмір файлу зображення, а також отримати хороші результати якості. Для прикладу: я створив два однакових квадратних об’єкта 8x8px, які потім зберіг в JPEG з дуже високим рівнем стиснення (щоб зробити більш вираженою їх відмінність). Верхній квадрат не вирівняний всередині сітки 8x8px.

Зверніть увагу на різницю в якості і зайві пікселі, що відображаються у тому об’єкті, який не вирівняний по сітці 8x8px. Цей прийом оптимізації нагоді для зображень JPEG, що містять прямокутні об’єкти, тому що їх можна легко розмістити в сітці.

Подальше читання

Оптимізація JPEG. Частина 1 — Сергій Чікуенок (Sergey Chikuyonok) (автор вищезгаданої статті в Smashing Magazine) обговорює в цьому підручнику концепцію JPEG 8x8px

Селективне стиснення JPEG

Звичайне стиснення JPEG працює як фіксований рівень стиснення, застосований до всього зображення.

У селективному стиску JPEG ми вручну визначаємо рівні стиснення для різних областей зображення. Наприклад, нам може знадобитися більш низький рівень стиснення/більш високу якість важливих областей фотографії, так як потрібно гарантувати, щоб ці області добре виглядали. А для інших частин того ж зображення, типу фону і недетализированных розділів, можна обійтися більш високим рівнем стиснення/більш низькою якістю.

Наочний приклад. Селективне стиснення JPEG можна робити за допомогою Adobe Fireworks. Нижчевикладене фото стисло при рівні якості 80. Розмір файлу – 54,0 KB.

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

В Adobe Fireworks можна замаскувати ті області, які потрібно захистити. У замаскованої області буде більший рівень якості (80)/більш низьке стиснення. У решти частин зображення — незамаскированных областей — низький рівень якості (60)/більш високе стиснення.

Можна скористатися одним з інструментів Ласо (в даному випадку я застосував інструментальне засіб Многоугольное ласо) для виділення прямокутником тих областей, які потрібно захистити.

Закінчивши вибір високоякісних областей, виберіть Редагувати > Селективний JPEG > Зберегти як маску JPEG.

Тепер ті частини зображення, у яких залишиться високий рівень якості до 80, будуть виділені:

В панелі Оптимізувати зменшіть опцію Якість до 60 і встановіть опцію Селективне якість на 80. (якщо бачите панель Оптимізувати, то переконайтеся, що Вікно > Оптимізувати зазначено «галочкою».)

Потім просто знайдіть Файл > Зберегти як для збереження вихідного зображення як JPEG. До наведеного нижче зображення застосовано селективне стиснення. Його розмір 50,2 KB – сталося 7,0% зменшення розміру файлу у порівнянні з неселективним стисненням, яке я продемонстрував вам раніше.

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

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

Подальше читання

Селективне стиснення областей зображення — старий підручник Adobe.com, докладно описує кроки селективного стиснення зображень за допомогою Fireworks

Висновок

Існують більше прості способи оптимізації зображення. Можна відмінно зменшити розміри файлів зображень, просто застосовуючи інструменти, такі як команду photoshop’у Зберегти для Веба & Пристроїв і такі інструменти стиснення без втрати даних, як Smush.it.

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