Все мы знаем, что для загрузки изображений на сайт (или просто в интернет) необходимо уменьшать их размер, и наверняка у каждого есть свой привычный и проверенный способ для этого. В Фотошопе с этой целью применяется команда Файл (File) => Сохранить для Web (Save for Web) (Alt+Shift+Ctrl+S), где можно выбрать оптимальные для конкретного случая настройки. Однако, бывают ситуации, когда изображение требуется уменьшить кардинально, скажем, в 10-12 раз, и этот способ может привести к недопустимой потере качества и резкости картинки. Как быть?
Скажем, я хочу уменьшить файл с размерами 4288х2859 пикс до размера 350 пикс по максимальной стороне, то есть по ширине. Изменение размера изображения иногда называют ресайз либо ресайзинг (англ. resize), а уменьшение линейных размеров (т.е. ширины и высоты) — даунсайз (даунсемплинг — пересчет файла с уменьшением размера) (англ. downsize). Понятно, что любое уменьшение линейных размеров предполагает исключение части пикселей изображения, и чем меньше требуемый результат, тем больше пикселей придется «выбросить», а это значит, если мы попытаемся увеличить готовый результат, он весь будет состоять из «кубиков» — оставшихся немногочисленных пикселей.
Тот, кто делал фавикон для сайта, наверняка сталкивался с ужасным размытием при уменьшении картинки до размера 16х16. Типа такого)… Это был мой фавикон). Впрочем, картинку не для того уменьшали настолько, чтобы затем ее увеличивать — и мы попытаемся лишь визуально сохранить резкость уменьшаемого изображения.
Способ 1. Двухэтапное уменьшение размера изображения.
Итак, откроем Изображение => Размер изображения (Image => Image Size).
Самый нижний параметр — интерполяция (Resample Image) — по умолчанию выставлен на «Бикубическая автоматическая». Меняем значение на «Бикубическая, четче» (Bicubic Sharper) (так и написано, наилучшая для уменьшения). Затем в верхнем блоке Размерность (Pixel Dimensions) выставляем значение требуемого размера картинки по максимальной стороне (в моем случае 350), умноженное на 2, т.е. 700 пикс. Значение второго параметра (высоты) уменьшится пропорционально. Нажимаем ОК.
После этого второй раз открываем Изображение => Размер изображения (Image => Image Size), снова выбираем значение интерполяции Бикубическая, четче (Bicubic Sharper) и выставляем окончательный требуемый размер: ширина 350 пикс. Жмем ОК и сохраняем наш файл под другим именем, чтобы не уничтожить первоначальное большое изображение. Файл (File) => Сохранить как… (Save as…) (Shift+Ctrl+S) и в открывшемся окне выбираем наилучшее качество.
Давайте сравним результат сохранения:
Второе изображение заметно четче, и, если сравнить вес полученных файлов, то второй файл немного больше (80 Кб по сравнению с первым — 66 Кб), то есть и качество должно быть повыше.
Во многих источниках рекомендуется дополнительно повысить резкость картинки прежде, чем ее уменьшать. Усложняем задачу и рассмотрим…
Способ 2. Двухэтапное уменьшение размера изображения с предварительным повышением резкости.
К исходному файлу применяем команду Фильтр (Filter) => Усиление резкости (Sharpen) => Контурная резкость (Unsharp Mask) (в некоторых версиях переводится буквально как Нерезкая маска).
В открывшемся окне настроек фильтра выставляем такие параметры:
Эффект (Amount) — 500%, Радиус (Radius) — 0,2 пикс, Изогелия (Threshold) (иногда переводится как Порог) — 3 ур. Нажимаем ОК.
(Картинка в окне просмотра фильтра другая, поскольку экспериментировала над разными изображениями))
Вслед за применением фильтра Контурная резкость выполняем первый этап уменьшения размера изображения (до 700 пикс по большей стороне), описанный в Способе 1.
Выполнив первый этап уменьшения, снова переходим в Фильтр (Filter) => Усиление резкости (Sharpen) => Контурная резкость (Unsharp Mask), однако настройки Эффекта делаем в два раза меньше:
И, как можно уже догадаться, после второго применения фильтра проводим второй этап уменьшения размера изображения (до 350 пикс по большей стороне). Сохраняем файл под другим именем с максимальным качеством.
И сравниваем.
На моем мониторе видно, что третье изображение наиболее четкое. Если вас устраивает такой результат, можно радоваться и с облегчением попить чайку.
Однако я разыскала еще и третий способ (впрочем, их намного больше), самый неожиданный для меня, и не испробовать его я просто не смогла. Итак,
Способ 3. Двухэтапное уменьшение размера изображения с предварительным применением фильтра Мозаика.
Надеюсь, у вас еще сохранилось исходное изображение после всех перипетий по уменьшению. Откроем исходное изображение. Переходим в Фильтр (Filter) => Оформление (Pixelate) => Мозаика (Mosaic).
Настройки фильтра незамысловаты:
Параметр Размер ячейки (Cell Size) ставим равным 2 квадрата.
После применения фильтра выполняем первый этап уменьшения размера изображения (до 700 пикс по большей стороне), описанный в Способе 1. Однако затем наши действия несколько иные: для второго этапа сохранения переходим в Изображение (Image) => Размер изображения (Image Size) и в окне интерполяции (Resample Image) выбираем значение По соседним пикселям (Nearest Neighbor).
Выставляем окончательный требуемый размер: ширина 350 пикс. Жмем ОК и сохраняем наш файл под другим именем.
Сравниваем…
На третьем изображении стала четче просматриваться структура ткани в сеточку, да и в общем картинка выглядит немного резче.
Пытаясь увидеть разницу в результатах, можно увеличить полученные изображения и сравнить. Смотреть, конечно, приятнее всего на оригинал).
Впрочем, обратите внимание: применение фильтра Контурная резкость вызывает появление белых ореолов на краях предметов, особенно хорошо их видно вокруг колец.
Многое зависит от исходного изображения, насколько плавные или резкие на нем переходы цвета и контраста, есть ли мелкие детали. Возможно, в каком-то случае ни один из этих способов не пригодится. А для кого-то непременно один из них окажется полезным. Для фото с кольцами неплохой результат дал Способ 3. Когда же я применила все три способа к картинке с тюльпанами на фоне синего неба, как ни старалась, особых различий не заметила.
Пожалуйста, поделитесь со мной вашими наблюдениями в этой сфере)
После уменьшения никто не запретит нам попытаться еще раз повысить резкость изображения. И здесь лучше воспользоваться другим фильтром, он называется Цветовой контраст (High Pass). О нем подробно рассказано здесь.
Почему именно Мозаика?..
Фильтр Мозаика группирует соседние пиксели в квадратные блоки одного цвета. Размер блоков указан в настройках — у нас это 2 квадрата. Учитывая, что в дальнейшем мы применяем уменьшение размера с интерполяцией По соседним пикселям, смею предположить, что соседние пиксели одного цвета дают более четкие края предметов на картинке, чем расплывчатые переходы цветов.
Теперь мы с вами изучили столь непростое уменьшение размера фото с сохранением резкости!
Успешной работы!
Спасибо, Эмили ,за статью!
Мне как-то раз нужно было уменьшить сильно размер ,но у меня ничего тогда не получилось. Теперь понятно!
Пожалуйста) Эти способы тоже не гарантия качества — оно неминуемо упадет, но кое-что можно спасти)
Для меня уменьшение фотографий очень актуальная проблема, так как приходится много фото для своего сайта «адаптировать». Убрала статью в закладки и буду ее изучать- спасибо!
Возможно, для сайта не все картинки придется так сильно уменьшать, но я надеюсь, что статья Вам все равно пригодится!
Уменьшить фото нужно бывает достаточно часто и теперь я знаю, как это сделать сохранив резкость. Статья очень понятная и подробная. Спасибо, Эмили.
Надеюсь, что урок Вам пригодится, благодарю, Галина!
А для меня сложно. я уменьшаю не в фотошопе.
Все-таки вчера я переборола лень и вмонтировала свое личико в красивую тетю.)
Конечно, кому как удобно. Не зря столько программ разных выдумали)
О, поздравляю, нужно посмотреть!
Ну, хоть что-то! А то у меня тогда вообще ничего не получилось!
«Что-то», я так понимаю, — это не идеально… но все же чуть-чуть лучше, чем ничего.
Ну, я ж ещё чайник в фотошопе, поэтому даже идеальные уроки у меня могут получаться не сразу!
Вот спасибо! Как раз то, что мне было надо. А надо именно уменьшить без потери качества. Кстати, к прошлой статье про резкость не могу ответить на комментарий, какую-то ошибку выдает.
Надеюсь, что информация будет полезной. А с комментариями тоже заметила ошибку, спасибо, исправлю.
Очень понятно и доступно вы рассказали нам о том, как можно уменьшить фото и не потерять качество картинки. Спасибо.
Пожалуйста) Я рада, что все понятно.
Сделал, что хотел. По способу «Двухэтапное уменьшение с предварительным повышением резкости». Дальше не пробовал, результат устроил. Спасибо, за урок! Я теперь мастер Фотошопа .
Супер)
Поздравляю! А я, типа, учительница)
Как здорово, что результат положительный. Я очень рада!
Очень интересно! Первый раз слышу, что есть разные способы уменьшения изображений. Я привычно уменьшаю размеры и сохраняю их как веб. Спасибо, Эмили, пригодится «двухэтапное уменьшение размера изображения»
Пожалуйста! Для обычного уменьшения как раз вполне достаточно сохранения для веб — оно позволяет широко варьировать качество картинки на свой вкус. А вышеописанные действия рекомендованы для совсем «экстремального» уменьшения размера.
А уменьшать по-любому приходится. А то потом плохо открываются, особенно, если у людей медленный интернет. Да я и свои сайты с трудом открываю в тех местах, где плохо тянет.
У меня вообще проблемы со скоростью загрузки сайта, что-то я не так делаю. А в самом начале по неопытности загружала огромные фотки…
Если бы не этот урок, то я бы так и оставил с плохой резкостью. Совершенно не дружу с Фотошопом. Спасибо!
Пожалуйста!
Уменьшать картинки чтоб,
Подружитесь с Фотошоп! )))
А я наоборот сильно уменьшала фотки, потом увидела, что большие эффектней. Теперь сжимаю как для веб-страниц и все.
Эмили, я взяла скриншот Вашей формы подписки для своей статьи. Источник (т.е. ссылку на Ваш блог) поставила.
Благодарю, мне приятно) Кстати, сначала я узнала об этом из Вашей статьи: смотрю, что-то знакомое, не поверила своим глазам)
Да, не успела сразу написать и думаю «Вот увидит Эмили вначале картинку у меня — удивится!»
Да, Люда, так оно и вышло!
Ой спасибо большое. Я все время мучаюсь с уменьшением изображения.
Пожалуйста, пусть теперь все удается без мучений!
Спасибо за урок!
А еще как способ сохранения качества при уменьшении размера изображения- это специальная программа. Называется она -PhotoScape. В ней много интересных функций,. среди из которых: возможность без потерь качества уменьшить любое изображение, сразу его подкорректировать и уменьшить вес изображения.
Благодарю за подсказку, Лора, очень полезный совет! Обязательно посмотрю эту программу, не знала о ней.
Ух ты, сколько способов интересных! С мозайкой и вправду очень необычно получается (эх, отстала я в последнее время от фотошопа). Бывает иногда, надо сделать коллаж, а фотки разного размера, вот тут как раз такое уменьшение можно применить (правда, мне чаще наоборот увеличение надо было делать )
Елена, думаю, для коллажа можно просто изменить размер изображения, установив режим «бикубическая, четче»… иначе будет бросаться в глаза разное качество элементов коллажа. Теоретически, для коллажа нужно подбирать фото примерно одинакового качества, но в реальности не всегда это возможно)
А способ применения «мозаики» очень удивил меня)
А я GIMPом пользуюсь. Там все довольно просто. Не зачем такой локомотив как фотошоп гонять из за легких операций.
Конечно! Но если нужно сделать серию различных действий с изображениями и Фотошоп уже запущен — я именно им и воспользуюсь.