Как сохранять для Web картинки и фото в Фотошопе CC

  Автор:

Как сохранять для WebЗдравствуйте, друзья!

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

Существует несколько вариантов сохранения изображения для веб. В каком именно формате сохранять изображение для интернета зависит от того, что из себя представляет исходный файл.

  • Если это цветная фотография, то сохранять для веб её лучше в формате JPEG
  • Если это рисунок или изображение с относительно небольшим количеством цветов, то изображение хорошо сохранится для Web в формате GIF. Этот формат я применяю, чтоб сохранить для сети, например, скриншоты, которые использую для иллюстрации статей.
  • Прозрачные изображения или изображения на прозрачном фоне лучше сохранять для Web  в формате PNG.
В этой статье рассмотрим все описанные варианты.

Как сохранить фото для Web

Чтобы показать вам, как сохранять для Web фотографии, возьму для примера ту фотографию, которую перед этим уменьшила. (Как уменьшить размер изображения в Фотошопе, читайте здесь).

  • Шаг 1. Открываем фотографию

Жмём "Файл" - "Открыть" - ищем фото на компьютере.
  • Шаг 2. Выбираем "Сохранить для Web"

В последней версии Фотошопа эта опция переехала из главного выпадающего меню в меню "Экспортировать"
Как сохранять для Web

Опция "Сохранить для Web" переехала в другое место.

  • Шаг 3. Выбираем экран просмотра

В левой верхней части открывшегося окна расположено меню просмотра исходного и оптимизированного изображений. Специалисты советуют выбирать "2 изображения". В этом случае на экране будет показано исходное изображение, а рядом или под нам, в зависимости от ориентации, изменённое изображение.
Также здесь можно увидеть размеры исходного и оптимизированного изображений. В нашем случае размер исходника 1,21 Мб, размер оптимизированного изображения, при сохранении его в формате jpeg, всего 142,9 Кб. Согласитесь -  значительная разница! А если вспомнить, что изначально это изображение "весило" 14 Мб, то становится ещё более понятно, зачем мы всё это делаем.
Как сохранять для Web

Как сохранять для Web, выбор экрана просмотра.

  • Шаг 4. Настраиваем параметры сохранения

Настройка параметров сохранения производится в правой части того же окна.

Вариант первый. Параметры сохранения фото для Web в формате JPEG

  1. Выбираем формат сохраненного изображения.
    По-умолчанию установлен формат GIF. Однако для фотографий он не очень подходит, т.к. иммет всего 256 цветов. Если нужно по-максимуму сохранить цветопередачу, лучше выбрать формат JPEG.
    Как сохранять для Web

    Как сохранять для Web, выбираем, с каком формате будем сохранять.

  2. Выбираем качество сохранённого изображения.
    При сохранении фотографии лучше использовать качество "Высокое". При выборе более низкого качества на изображении начинают появляться шумы.
    Как сохранять для Web, выбор качества

    Как сохранять для Web, выбираем качество сохранения в формате JPEG.

  3. Проставляем галочки "Оптимизация" и "Преобразовать в sRGB".
    "Оптимизация" - оптимизирует изображение, ещё немного уменьшая его вес. "Преобразовать в sRGB" нужно для того, чтоб цвета фотографии правильно отображались на мониторе компьютера. После проверки наличия нужных галочек нажимаем "Сохранить".
    Как сохранять для Web

    Проверьте, чтоб в этих местах стояли галочки.

  4. Сохраняем оптимизированное изображение. После нажатия кнопки "Сохранить" открывается окно "Сохранить оптимизированный как", которое позволяет выбрать папку, в которую сохранить изображение, а также, при необходимости, его переименовать.

    Как сохранять для Web, выбираем качество сохранения в формате JPEG., выбор места сохранения.

    Выбираем, в какую папку будем сохранять и даём новое название файлу.

Вариант второй. Параметры сохранения фото для Web в формате PNG-24

Несмотря на то, что на фотографиях редко присутствует прозрачность, очень хорошим форматом для сохранения фото без потери качества является формат PNG-24. Он использует 16777216 цветов, что делает его практически идеальным для сохранения полноцветных изображений.

Настроек сжатия практически не имеет, за исключением прозрачности. Если она есть, в соответствующем окне ставим галочку.

Как сохранять для Web, параметры сохранения в формате PNG-24

Настройки сохранения в формате PNG-24

Однако, после сжатия в таком формате файл получается довольно большой. У меня получился 802,5 Кб по сравнению со 142,9 Кб в формате JPEG.

Как сохранять для Web, PNG

Размер файла, сохранённого для Web в формате PNG-24

Логично, что для сайта я выбираю JPEG.

 

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

Как сохранять для Web скриншоты

Для оформления статей на сайте мы очень часто используем скриншоты экрана компьютера. Использование скриншотов очень хорошо для сайта, т.к. в результате применения данной технологии можно максимально точно иллюстрировать статью на 100% оригинальными изображениями. Однако скриншот надо к публикации правильно подготовить.

    1.Открываем изображение и уменьшаем размер скриншота

Для того, чтоб уменьшить размер скриншота, выполняем первые 3 шага, как описано в статье "Как уменьшить размер изображения в Фотошопе CC". Если Вы делали скриншот части экрана и он получился по ширине меньше или равен той ширине, которая Вам нужна, то, конечно, уменьшать его не надо. В этом случае, после открытия файла сразу переходим к сохранению для Web.

    2. Сохраняем скриншот для Web

При сохранении для Web скриншота первые 3 шага аналогичны таковым для сохранения фотографии. Они описаны выше, в первой части этой статьи. Отличие - в настройках параметров сохранения.

    3.Выбираем параметры сохранения

Вариант первый. Параметры сохранения в формате GIF

Скриншот экрана, как правило, не содержит большого количества цветов, поэтому вполне можно использовать формат GIF. Для получения лучшего качества изображения применяем следующие настройки:

  1. Количество цветов.   В зависимости от сложности изображения, можно выбрать количество цветов от 2 до 256. Чем меньше цветов, тем меньше размер и хуже качество изображения. Однако, для простой графики это очень полезная опция.
  2. Дизеринг отвечает за плавность перехода между цветами. Устанавливаем значение "Шум". Переходы между цветами получаются более естественные, как обычный шум на фотографии.
  3. Галочку в окне "Прозрачность" ставим, если она присутствует на изображении.
  4. Модель редукции цвета  я предпочитаю выбирать перцепционную, т.к. она берёт за основу цвета исходника и обеспечивает наиболее правильное восприятие цветов.
  5. Не забываем поставить галочку напротив надписи "Преобразовать в sRGB". Это нужно, чтоб цвета правильно отображались на мониторе компьютера.
Как сохранять для Web, формат GIF

Настройки сохранения для Web в формате GIF.

В итоге получаем оптимизированное для Web изображение размером всего 36,94 Кб вместо исходных 592Кб.

Вариант второй. Параметры сохранения в формате PNG.

Скриншоты можно также сохранять для Web в формате PNG-8. Использующий большое количество цветов формат PNG-24 здесь нет необходимости. Настройки сохранения в формате PNG-8 абсолютно идентичны настройкам сохранения в формате GIF, однако файл получается ещё меньше. У меня получился 28,25 Кб.

Как сохранять для Web, формат PNG-8

Как сохранять для Web в формате PNG-8, параметры сохранения.

    4.Сохраняем изображение.

Сохранение скриншота, оптимизированного для Web, ничем не отличается от сохранения фотографии, поэтому я отдельно описывать его не буду.

Теперь вы знаете, как сохранять для Web разные типы файлов и можете использовать эти знания на практике. Если у вас ещё остались вопросы по этой теме, вы можете задать их в комментариях.

С уважением. Марина Ножко.

 

 

 

 

 

 

 

Интересная статья? Поделитесь ею пожалуйста с другими:
Понравилась статья? Подпишитесь на обновления блога!
Оставьте свой комментарий:
9 комментариев
  1. Марина, здорово, у тебя скриншоты очень четкие, а у меня размытые, я вот только не поняла,я делаю скриншот, вставляю его в редактор, отображается весь экран, а мне допустим нужно только часть, мне надо его обрезать сдесь же в ФШ?, я обрезала в Paint, сохраняла и потом обрабатывала. Нельзя же сразу скрин вставить в ФШ?

    • Татьяна, я делаю скриншоты в программе «Скриншоты на Яндекс-Диске.» Там же обрезаю и делаю надписи. Потом сохраняю, а потом открываю в Фотошопе чтоб уменьшить и сохранить для Web. Но можно и сразу в Фотошоп. Если скрин получается размытый, скорее всего, заданы неправильные параметры сохранения.

  2. Спасибо Марина, попробую так же сделать. Поделюсь потом своим результатом. Спасибо, за подробный разбор темы.

  3. Оптимизировать картинки для сети конечно важно. Предпочитаю формат .png
    Тоже пользуюсь скриншотами Яндекс Диска, очень удобно.

    • Для таких скриншотов, которые мы используем для статей, PNG-8 даёт примерно такое же качество, как GIF, зато меньше весит.

  4. У меня ещё эта функция не переехала в Экспортировать. Пользуюсь Фотошопом CS5.

    • Когда Фотошоп СС установила, я долго не могла её найти, пришлось искать ответ в интернете. Хорошо, что нашёлся человек, который догадался, что об этом надо написать.

  5. Я скриншотами пользуюсь но в каком формате не знаю даже. *UNKNOWN*
    Я не могу запомнить эти форматы толком, какие для чего. *JOKINGLY*
    Флэшка в голове уже изрядно забита, не сразу всё помещается :-|

Оставьте свой комментарий или вопрос

на Блоге
в Вконтакте
в Фейсбук