Это тот факт, что существует и еще очень долго будет существовать, пока люди будут работать с изображениями и цифровыми фотографиями. Файлы нужно сжимать, сами фотографии нужно обрабатывать таким образом, чтобы и качество имели приличное, и можно было их без труда использовать в веб-дизайне, отправлять по e-mail. В нашем случае, то есть в веб-дизайне, особенно важен этот факт, поскольку, чем сильнее можно сжать файл и сохранить качество, тем больше красоты можно создать, большее количество изображений разместить и так далее.
Поскольку формат JPEG - это основной формат для изображений, несмотря на существование PNG или WebP, в течение уже более двух десятков лет, сжатие его происходит уже при сохранении файла. Но и качество обычно страдает, хотя не всегда можно это заметить, особенно если смотреть на картинки на компьютере. Тем не менее, при попытке сохранить/распечатать/изменить размер такого изображения и проявляются все недостатки сжатия JPEG.
Благодаря Photoshop и его одному очень редкому режиму смешивания, можно увидеть, насколько повлияет сжатие Jpeg и как этих самых ужасов можно избежать. Иными словами, мы не просто поговорим и рассмотрим детально, как можно сжимать Jpeg-изображения и как осознанно к этому подойти, мы также рассмотрим возможности Photoshop по предотвращению искажения.
С учетом того, как много разных изображений и фотографий используется в веб-дизайне, такие возможности уж точно пригодятся творцам. Поскольку материал достаточно насыщенный – сразу и перейдем к делу.
Режим смешивания
Для того чтобы точно узнать и увидеть, что происходит с изображением при его уменьшении, мы используем режим наложения Photoshop – Разница. Мы немного о нем уже упоминали ранее. Напомним, что режим получил свое название от того, что он ищет различия между двумя слоями. Любые области на обоих слоях, что выглядят одинаково (например, черный цвет) и области, отличающиеся друг от друга (с проявлениями странных и чужеродных цветов). При работе со спецэффектами режим Разница обычно не используется и если читатели блога вспомнят наши практические материалы, то данного режима нигде и не было.
Но при этом Разница проделывает огромную работу, демонстрируя пользователям, как много «мусора» мы добавляем к нашим изображениям, когда сжимаем их. Это совершенно не означает, что теперь нужно перестать сжимать файлы, использовать jpeg вообще и так далее. В реальном мире это попросту невозможно. Но это помогает понять нам, что происходит с картинкой и как можно избежать ухудшения. Тем более, если учесть то, что в веб-дизайне используются огромные по разрешению фотографии, а если их открыть на мониторах с разрешением более 1080р, то и «артефакты», и «мусор» будут явно видны и создастся негативное отношение и к самому сайту, и к работе дизайнера.
У нас два изображения, одно из которых пережато на 60%. Но какое из них где? Проявления искажений могут быть обманчивыми, особенно на экране компьютера. Истина заключается в том, что это два совершенно разных изображения. Слева – оригинал, справа – сжатое на 60%. В это сложно поверить на слово, но если действительно увеличить их и сравнить, то можно увидеть лишние элементы, размытость или отсутствие пикселей. Если их не нужно печатать, то можно использовать в веб-дизайне и в таком виде, но иметь в виду, что в дальнейшем при любом изменении сжатого варианта, «огрехи» будут все явнее и четче.
Обратимся к режиму Разница, который ищет различия между двумя слоями. Давайте испытаем его в действии. Открываем наш оригинал и создаем копию Ctrl+J. Ничего переименовывать не будем. Выбираем Слой 1 и в списке режимов наложения выбираем Разница.
Все покрыто черным цветом и это говорит о том, что оба слоя идентичны друг другу. То есть никаких изменений режим не обнаружил.
Но давайте попробуем удостовериться, что изменений действительно нет и черный цвет полностью однороден. Добавим к Слой 1 корректирующий слой Уровни.
В появившемся диалоговом окне появится гистограмма. Если каждый пиксель в изображении отображает чистый черный цвет, который должен быть в данном случае (при одинаковых слоях), то все, что мы увидим на гистограмме – одна вертикальная полоска по левому краю. Таким образом, в нашем изображении нет никаких лишних цветовых пикселей, нет артефактов и нет мусора. Оно идеально. И так всегда, если мы создаем копию оригинального изображения, она есть 100% копия и никак иначе.
Но идем дальше…
Оставим только наш фоновый слой-изображение и удалим Слой 1 и Уровни. Вернемся к самому началу, иными словами. Но теперь сравним наш оригинал с изображением, которое подвергается маломальскому сжатию или обработке. У нас два документа открыты в окнах, и выбрав инструмент Перемещение, мы сжатый вариант перемещаем на окно оригинала (клик по нужному документу, зажимаем, «тащим» на другой и отпускаем). Таким образом, второй файл открывается у нас, как новый слой.
Важно: когда будете перемещать, то вокруг оригинального изображения появится белая рамка, сообщающая о том, что в эту область создается перемещение.
Поскольку мы перетаскивали наше сжатое изображение, то и отображаться оно будет в слегка сдвинутом виде. Поправим его, зажав Shift или по направляющим.
Таким образом, у нас снова появилось два слоя, но один из них имеет «в себе» изображение, пережатое на 60%. Применим к Слой 1 режим смешивания Разница. И если разницы между двумя вариантами нет, то мы должны видеть снова чистый черный цвет. Вы можете видеть чисто черный или небольшие артефакты, но мы видим явные примеси (мы ближе к монитору).
Добавим корректирующий слой Уровни. И если ранее у нас была одна тонкая полоска слева по вертикали, то теперь она более широкая и форма у нее иная. И она явно демонстрирует то, что нечто чужеродное в изображении есть. В чисто черном цвете есть что-то еще, а это означает, что два изображения совершенно не идентичны друг другу, хотя изначально именно так и может показаться.
Что же в них не так? Мусор. Сжимая одну версию, мы по факту использовали чистую, нетронутую информацию изображения и добавили к ней целую кучу мусора. Шум, мусор, артефакты – называйте это, как вам нравится. Суть заключается в том, что мы повредили оригинал. Сколько мусора добавляет JPEG сжатие? Это сложно увидеть даже через режим смешивания или гистограмму Уровней. Но можно сдвинуть все ползунки Уровней влево. Не будем долго вдаваться в рассуждения, просто отметим, что таким образом слабый шум на изображении сделается гораздо ярче и его станет лучше видно.
При этом стоит помнить, что все странные места непонятных цветов (красные, желтые и др.) это как раз и есть те самые области, что отличаются от оригинала и которые повредились при сжатии. Не очень красиво выглядит, но это как раз есть то, что называется «артефакты сжатия». Таким нехитрым способом можно очень хорошо узнать, как сильно повреждено изображение при пересохранении и в каких местах.
По возможности в этих места веб-дизайнер можно поместить надписи, блоки (если изображение используется как фоновое) и так далее. То есть, «прикрыть» их.
Настройки сжатия jpeg
Хорошо, мы знаем, что при сжатии на 60% наше изображение было повреждено достаточно сильно. Как же теперь выбрать оптимальное сжатие, которое и не очень повредит, и сделает размер файла небольшого размера? В Photoshop существует шкала сжатия от 0 до 12, где последнее – наилучшее качество. И если логичным было бы от 0 до 10, где 10 соответствовало бы 100%, то у Adobe все совершенно иначе.
Если после многих сравнений посмотреть на таблицу, то становится видно, что некоторые параметры шкалы попросту не имеют смысла. Сравните 80%, 77% и 84%. По факту, это соответствует 10 и 11 по шкале Adobe. Но на деле ничего не меняется. Если вы сравните результат сжатия 11 и 9, то разница будет очевидна. Аналогично отсутствует видимая разница в качестве сжатия между 12 и 11.
Мы сохранили наше изображение со сжатием в 11 и провели анализ мусора. Как видите, его… нет, даже на гистограмме Уровней.
А вот результат сжатия 10 дает более утолщенную линию на Гистограмме Уровней, хотя кажется, что черный цвет полностью однороден.
Из чего следует, что иногда смело можно сжимать на много единиц сразу и тогда уже начинать сравнение и смотреть, проявились ли «артефакты» или нет.
Сохранение для Web
В новейших версиях Photoshop до сих пор осталась функция Сохранения для Web, хотя она и получила приписку «Старая версия». Она прячется в Экспортировании. Здесь сжатие происходит по другому алгоритму. Да, это еще один вариант. В данном случае уже можно увидеть процентное сжатие от 0 до 100, множественные дополнительные настройки, а размер файла при этом может очень уменьшаться без потери качества.
Дело в том, что Adobe решили намеренно создать алгоритм, идеально подходящий для интернета, в отличие от иных методов. Мы сохранили наше изображение при максимальных настройках сжатия (100%), получили в разы уменьшенный размер файла, но и искажений нет ни при режиме смешивания, ни на гистограмме Уровней.
И еще вариант.
Завершение
Для многих фотографий даже 77% (10 по шкале) бывает очень малым сжатием, что создает и большой файл, но и при малом искажении. Если же выбрать хотя бы 9, то можно увидеть и малое искажение оригинала, и небольшой размер файла, что уже более приемлемо для большинства случаев. Бывают варианты изображений, когда получается и на 62% – 54% сделать отличный вариант, который и распечатать не стыдно.
Иными совами, конкретно выбор уровня, метода и параметров сжатия в формат jpeg зависят от самого оригинала. Но так или иначе, все это может очень пригодиться в веб-дизайне, особенно, если изображений много, а уменьшенные варианты нужно размещать на сайте и сервере и для экономии, и для ускорения загрузки, и так далее. Чтобы выиграть сражение с пытливыми пользователями и заказчиками, никогда не будет лишним удостовериться, что вы не просто сжали изображения, но еще и почти максимально сохранили их качество, не перенасытили мусором и шумом, размытием по краям и так далее.
А это, в свою очередь, положительно скажется не только на веб-проекте в целом, но и на отношении к веб-дизайнеру, на его профессиональном уровне.