От автора: Для сжатия изображений можно применять инструменты автоматизированной оптимизации. Однако если потратить время на их ручную оптимизацию, то можно еще больше улучшить результаты. Вот пять методик ручной оптимизации изображений.
Оптимизация 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’а для автоматического преобразования векторной графики в растровую они из всех сил стараются сгладить углы — это автоматизированный процесс под названием «фильтрация-сглаживание».
Результаты фильтрации-сглаживания могут оказаться разными. Часто она ведет к ухудшению качества. Для сохранения качества графики можно вручную отредактировать пиксели для того, чтобы те соответствовали пиксельной сетке. Это называется пиксельной подгонкой (или пиксельным хинтингом).
Источник: dcurt.is
Используя редактор изображений, такой как 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, который уберет большую часть размера файла изображения без влияния на его качество. А затем можно применить подходящие из описанных выше способов для более точной регулировки результатов.
Автор: Rahul Mistry
Источник: //sixrevisions.com/
Редакция: Команда webformyself.
Комментарии (1)