Оптимизация изображений в Adobe Photoshop

Для работы нам потребуется программа Adobe Photoshop (любой версии) и минут 10 свободного времени. На то, чтобы разобраться в тонкостях. Дальше процесс со временем ускорится в разы. И будет достаточно пары минут и пары кликов. Давайте начнем.

Исходное изображение

Для наглядности возьмем большую красивую картинку. В оригинале она имеет размер 5760х3840 пикселей и весит аж 6,26 Мб.

Предположим, что мы делаем сайт и хотим разместить её там фоновой подложкой. Если мы поставим именно это изображение, то пользователи нам спасибо не скажут) Только представьте, сколько нужно времени и трафика, чтобы с телефона загрузить 6,26 Мб! А ведь это будет на каждой странице. Кроме того, при определенных настройках эта картинка должна будет грузиться снова и снова при каждом обновлении. Ужас! С нашего сайта все разбегутся в момент!

Но у нас есть фотошоп и сейчас мы решим эту проблему, чтобы всем стало хорошо.

Оптимизация изображения

Под оптимизацией понимается уменьшение веса. Прежде всего. Если мы говорим о сайте, то страницы должны грузиться как можно быстрее, а это значит, что мы не можем себе позволить сделать фоном картинку размером 6 Мб. И даже 1 Мб — это много! К какому весу стремиться, каждый решает для себя сам.

Как осуществляется оптимизация

Открыв изображение в Adobe Photoshop, мы идем в раздел меню Файл — Сохранить для Web и устройств. Также можно воспользоваться сочетанием горячих клавиш, одновременно нажав комбинацию Alt+Ctrl+Shift+S. По-началу это может вызвать трудности, так что можете открыть из меню.

Если у вас очень большое исходное изображение, фотошоп выдаст предупреждение.

Мы не обращаем на него особого внимания, и нажимаем Ок.

Дальше появляется такое окно.

На скрине не очень хорошо видно, но места, где подчеркнуто красным, заметно. Остальное мы сейчас разберем подробнее.

Сверху в данном окне имеется 4 вкладки: исходное, оптимизация, 2 варианта и 4 варианта. Сейчас вам нужно проследить за тем, чтобы было активно окно Оптимизация.

Затем нужно выбрать формат, в котором мы сохраним файл. Правила следующие: если есть прозрачные области, то выбираем PNG, если это просто картинка, тогда JPEG. Вы можете выбрать любой, который понравится, но это может в дальнейшем сказаться на размере изображения и на его качестве. Поэтому советую изначально усвоить, какой формат для чего предназначен.

Затем выставляем параметр Качество. Можете погонять ползунок вправо-влево и посмотреть, как изменяется результат. Как правило, можно смело выставлять значение из диапазона 50-70%. Это позволяет существенно уменьшить вес изображения и оставляет качество на хорошем уровне.

Изменение размеров изображения

Как вы помните, изначально я взял картинку размером 5760х3840 пикселей. Максимальное расширение монитора сейчас где-то 2560х1600 пикселей. И то, это далеко не у всех. Скорее всего, такими могут пользоваться либо дизайнеры и верстальщики, либо геймеры. Ведь по-сути это 30 дюймовый экран.

Ну, да это и не важно. В рамках данного примера давайте ограничимся размером более распространенным 1920х1200 пикселей.

Чтобы уменьшить исходное изображение до нужного нам результата, всё в том же окне Оптимизация в правом нижнем углу находим блок Размер изображения и выставляем там ширину в 1920 пикселей. При этом мы видим, что размер полученного изображения (отображается в левом нижнем углу, прямо под картинкой) вместо начальных 6 Мб уменьшился до 369,3 Кб!

Теперь осталось лишь нажать кнопку Сохранить и файл готов к загрузке на сайт!

Как быть, если нужен точный размер изображения

Если вы проделаете всё вышеописанное, то увидите, что на последнем шаге у нас получается файл, который по ширине нас полностью устраивает (1920 px), а по высоте значение может плясать вверх-вниз в зависимости от исходника. И хорошо, если вместо 1200 нам выдает 1260, а если меньше? Тогда в случае загрузки на сайт у нас могут возникнуть проблемы, которые придется докручивать стилями.

Так как я уже сталкивался с подобным, предлагаю решить данный вопрос на этапе его зарождения.

Первый этап. Подготовка изображения.

Для этого мы вновь открываем исходное изображение. Идем в меню, там выбираем Изображение — Размер изображения (Ctrl+Alt+I) и проверяем, какой результат мы получим после трансформации, выставив один из размеров. Я советую не снимать галочку Сохранять пропорции. Иначе картинка может поехать и будет некрасиво.

Дальше все индивидуально: если речь идет о фоне сайта, обоях или о какой-то подложке, то нужно добиться того, чтобы один из размеров был равен требуемому, а второй был больше. Например, мне нужно получить картинку размером 1920 на 1200. Я выставляю ширину 1920 и получаю высоту 1276 — это хороший результат. Если бы я получил 1100, тогда нужно выставить нужную высоту (при этом увеличится ширина — это нормально). После этого нужно нажать Ок, чтобы изображение уменьшилось.

Если речь идет о карточке товара или о какой-то картинке для сайта, и вам нужно вписать изображение в определенный размер, то нужно поступить иначе: вы просто изменяете наибольший размер исходного изображения до требуемого. К примеру, если у вас картинка размером 1350х856px, а вписать её нужно в квадрат размером 120х120, открыв исходное изображение, вы нажимаете Alt+Ctrl+I и выставляете высоту 120px. И жмёте Ок. Картинка уменьшилась.

Второй этап. Получение требуемого размера изображения.

Теперь, не закрывая предыдущий файл, создаем новый (Ctrl+N). Выставляем необходимый размер. Раз я делаю обои, я ставлю значения 1920х1200 и жмём кнопку Ок.

Затем перетаскиваем свой первый рисунок в только что созданный файл. Кто никогда этого раньше не делал, нужно выбрать в панели инструментов инструмент Перемещение (активируется клавишей V). Затем нажать левую кнопку на том изображении, которое нужно переместить и, не отпуская её, тянуть в новый файл. Прямо на рабочую область.

Когда вы это проделаете, то увидите, что в случае с обоями у нас не влезает вся картинка целиком. Часть придется пожертвовать, поэтому мы располагаем её наиболее приемлемым образом и возвращаемся к пункту Оптимизации, чтобы завершить данную операцию и получить качественный фон для сайта.

Если вы создаете изображения для карточек товара, то вам необходимо будет создать файл с тем размером, который используется у вас на сайте. Узнать его можно у вашего веб-мастера. Либо, если вы сами всем занимаетесь, посмотрите размер изображения карточки товара в DOM, используя файл таблицы стилей CSS или с помощью панели веб-мастера. Далее вам нужно выбрать фон (его также можно посмотреть в стилях) и в этот файл поочередно подгружать свои товары и сохранять их. Не забывайте перед сохранением оптимизировать размер изображения.

Понравилась статья? Расскажи о ней друзьям!

Уроки Adobe Photoshop CS6. Оптимизация для веб gif-изображений

SEO оптимизация сайта на Adobe Muse

Интересные записи

• Как нарисовать в фотошопе cs4
• Рисуем в Photoshop CS6
• Основы рисования в фотошопе для новичков (Digital Art)
• Как нарисовать сайт в фотошопе
• Как заработать деньги с помощью фотошопа
• С чего начать изучение фотошопа