Как правильно сохранить изображение для Web в Photoshop. Модуль Save for Web

В левом верхнем углу области предварительного просмотра вы увидите серию из четырех вкладок. По умолчанию, выбрана вкладка "Оптимизация" (Optimized), которая означает, что вы не видите исходное изображение. Вместо этого, показан предварительный просмотр того, как изображение выглядит с текущими настройками оптимизации (которые мы рассмотрим чуть позже):

Как советуют веб-дизайнеры, лучше воспользоваться другой вкладкой, где в окне предпросмотра показываются сразу два изображения, оригинальное и оптимизированное, это вкладка "2 варианта" (2-Up):

При активной вкладке "2 варианта", теперь мы видим сразу два изображение, оригинальную версию слева и оптимизированную версию справа (если Ваша картинка имеет альбомную ориентацию, т.е. её ширина больше, чем высота, то тогда картинки будут показываться одна над другой):

Формат файла

С правой стороны диалогового окна находятся опции оптимизации изображения.

Первое, что нужно сделать, это выбрать правильный формат файла для нашего изображения. Если Вы открываете это окно в первый раз, по умолчанию установлен формат GIF . формат выбранного файла в верхней части (непосредственно под словом "Preset"). GIF в некоторых случаях используется для сохранения веб-графики, но для моей фотографии лучше подойдёт формат JPEG, поэтому я изменю GIF на JPEG:

Качество сжатия изображения

Непосредственно под опцией формата находится варианты выбора качества сжатия изображения, т.е. выходного качества самой картинки.
Мы можем выбрать из предварительно заданные параметров качества (низкое, среднее, высокое и очень высокое, и наилучшее, в англ. - Low, Medium, High, Very High, и Maximum) в выпадающем списке слева, либо можем ввести определённое значения качества в процентах справа.
Хотя довольно таки заманчиво задать максимальное качество для наших фотографий, оптимизация для интернета означает, что мы должны делать размер файла в мегабайтах как можно меньше, что означает поиск золотой середины между качеством изображения и размером файла. Значение качества "Высокое" почти всегда является оптимальным выбором, оно даёт нам приемлемое качество изображения при относительно небольшом размере файла. Выбор значения "Высокое" автоматически устанавливает значение качества на 60%:

Как только вы выбрали значение качества, убедитесь, что опция "Оптимизация" (Optimized) у Вас включена, т.к. она может помочь ещё несколько уменьшить размер файла. Опции "Прогрессивный" (Progressive) и "Встроенный (цветовой) профиль" (Embed Color Profile) включать не обязательно, т.к. всё-равно большинство веб-браузеров не поддерживают цветовые профили:

Цветовое пространство

Наконец, включите опцию "Преобразовать в sRGB" (Convert to sRGB), если она ещё не активна. Это позволит убедиться в том, что фотография сохраняется в цветовом пространстве sRGB, что, проще говоря, означает, что цвета на фотографии будут корректно отображаться на веб-сайте:

Размер изображения
Диалоговое окно также дает нам возможность изменить линейный размер изображения. Я рекомендую изменять размер изображения заранее, перед включением диалогового окна "Сохранением для Web", чтобы при сохранении для Web линейные размеры в пикселях были уже готовыми. Особенно это актуально для последней версии Photoshop CC с его
новым диалоговым окном "Размер изображения" . Об изменении размера изображения в Photoshop CC рассказывается , а в версиях CS6 и ниже - .

Сравнение исходных и оптимизированных размеров файла

На данный момент, мы сделали все, что нужно, для оптимизации файла для Web, и теперь давайте посмотрим на размер файла в байтах в исходной и оптимизированной версиях. В моем случае, размер исходной фотографии (слева) был равен колоссальному для интернета значению - 1,29Mb что слишком велико для пользователей даже со средней скоростью интернета, а оптимизированная версия (справа), которая выглядит почти так же хорошо, как и оригинал, получилась всего 41,85 Kb:

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

Чтобы сохранить оптимизированную версию Вашей фотографии, нажмите кнопку "Сохранить" (Save) в нижней части диалогового окна. Photoshop откроет новое диалоговое окно "Сохранить оптимизированный как" (Save Optimized As), которое позволяет при необходимости переименовать изображение, а также выбрать нужную папку на жёстком диске для сохранения. Когда закончите, нажмите кнопку "Сохранить", чтобы сохранить изображение и выйти из диалогового окна:

Ну вот, собственно, и всё. Фото теперь полностью оптимизировано и готово к оправке по электронной почте либо для размещения на сайте.

Зачем оптимизировать фотографии для интернета - ведь мы потеряем в качестве? Часто такие вопросы возникают у начинающего фотографа при упоминании о сжатии фотографий для размещения в интернете. Замечательно, если у вас скоростной интернет! А если у вас ещё и скоростной мобильный интернет - тогда вам очень повезло!

Однако, не стоит забывать, что не у всех есть такая возможность. Большая часть населения России (да и многих других стран Восточной Европы и Азии) не могут пока позволить себе быстрое и, самое важное, устойчивое интернет соединение. Особенно если есть возможность использовать только мобильный интернет. При низкой скорости интернет соединения 1 Мбайт информации может загружается более 2 минут, а средний размер фотографии 10Мп фотоаппарата в составляет примерно 6-8 Мб.

Теперь представьте, что на вашей интернет-страничке не одна фотография, а несколько.... Вы же размещаете свои фотографии для того, чтобы их могли посмотреть другие пользователи интернета? А сами вы будете ждать загрузки фотографий на странице так долго? Скорее всего нет! А если интернет-соединение в добавок ещё и неустойчивое?

Да и по электронной почте посылать такие объёмы информации другу с "медленным" интернетом, просто неуважительно! А если учесть, что количество пикселей в цифровых фотоаппаратах растёт с той же скоростью, что и интернет технологии, то вряд ли мы сможем не думать об этом вопросе в будущем. Остаётся только один выход - сжимать фотографии перед отправкой в мировую электронную сеть.

Итак цель оптимизации фотографий для интернета мы уже выяснили, а исходя из цели ставим перед собой задачу: изменить размер фотографии до принятого в интернете размера 800 × 600 пикселей и немного ужать объём файла, контролируя при этом качество картинки.

Один из самых качественных и достаточно быстрых способов оптимизации сжатия фотографий для интернета - это использование соответствующей функции Adobe Photoshop - Save For Web.

Оптимизация сжатия фотографий для размещения в интернете

Пошаговая инструкция для Photoshop

1. Загрузка фотографии в окно Sawe For Web & Devices

Итак, открываем нашу фотографию в фотошопе, запускаем команду File>Save For Web & Devices... или просто жмём "хитрое" сочетание клавиш: Alt+Shift+Ctrl+S и пред нами открывается "страшное" на первый взгляд окно под названмем Save For Web & Devices , что в переводе обозначает Сохранить Для Интернета и др. Устройств.

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

На любом этапе оптимизации фотографии для интернета вы можете прямо из окна Save For Web & Devices запустить браузер и посмотреть как будет выглядеть ваша работа в его окне - значок Internet Explorer внизу окна оптимизации фотографий для интернета.

Если вы уже успели изучить, что находится в открывшемся окне (просто поводите мышкой по картинке выше, задерживая там, где появится знак вопроса), то мы приступаем к оптимизации фотографий для размещения в интернете.

2. Уменьшаем размер изображения - Image Size

Ставим галочку Constrain Proportions (Сохранить Пропорции).
В окошке With (Ширина) поля New Size (Новый Размер) ставим 800 для горизонтального снимка или 600 для вертикального снимка. Ширина снимка (Height) и процент уменьшения (Percent) изменятся автоматически.

3. Оптимизируем качество сжатия фотографии

Для того, чтобы объём файл фотографии "вписался" в требуемый объём 80-100 Кбайт и при фотография не сильно отличалась от несжатого оригинала делаеем следующее:

Внимание!
Не сохраняйте оптимизированный для интернета снимок вместо
исходного файла - обратно его уже не улучшить!

Это самый простой способ оптимизации фотографий для интернета с использованием фотошоп. Есть ещё некоторые настройки и возможности, особенно полезные, когда нужно оптимизировать большое количество фотографий, например для интернет галереи... Но это уже отдельная тема. А пока скачивайте бесплатный видеоурок и смотрите сами, как просто уменьшить объём фотографии с помощью фотошоп!

Цель: изучение алгоритма подготовки графических элементов веб-страницы

Общие пожелания для подготовки изображений:

• Графические элементы должны быть представлены в формате GIF или PNG .
• Фотографии должны быть представлены в формате JPEG .
• Обеспечьте показ изображений с малым разрешением, пока идет загрузка больших изображений.
• Используйте GIF -изображения с чересстрочным форматом.
• Укажите атрибуты height и width элемента img .
• Сократите количество анимации.
• По возможности используйте пиктограммы изображений.
• Обязательно создавайте «альтернативный» текст (атрибут alt )

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

Рис. 1.1. Градиент на фон в Photoshop

Прежде чем использовать файл изображения в веб-странице, необходимо в графическом редакторе подготовить его для размещения. При этом важно не только определить в photoshop размер изображения, но и правильно сохранить: используя диалоговое окно Сохранить для Веб и устройств (см. рис. 1.2 ):

Устанавливаем настройки диалогового окна Сохранить для Интернета и устройств :

Оптимизация и сжатие до заданного размера файла:

Рис. 1.4. Оптимизация и сжатие до заданного размера файла

Лабораторная работа Photoshop 1_1:

1. Откройте изображение в Photoshop и выберите «Файл» -> .
2. В диалоговом окне «Сохранить для Интернета и устройств» щелкните вкладку «Оптимизированный» .
3. В меню «Стиль» выберите «Низкое качество JPEG» .
4. Щелкните вкладку «Размер изображения» .
5. Убедитесь, что установлен параметр «Сохранить пропорции» и введите ширину. Для электронной почты подходит размер 400 пикселов.
6. Нажмите кнопку «Сохранить» . Введите имя файла и путь для сохранения файла. Убедитесь, что в меню «Формат» выбран вариант «Только изображения» . Нажмите кнопку «Сохранить» .

Установка параметров оптимизации JPEG

Для размещения качественных фото, необходимо подготовить в Photoshop изображение в формате JPEG:

Рис. 1.5. Параметры оптимизации JPEG

Установка параметров оптимизации для форматов GIF и PNG

Рис. 1.6. Параметры оптимизации для форматов GIF и PNG

Лабораторная работа Photoshop 1_2 : JPEG-сохранение

• Откройте в редакторе изображение jpg формата (или скачайте ) и вызовите диалог (Save for Web & Devices ) в меню File .
• Выберите вкладку «Оптимизированный» (Optimized )
• Откройте список «Наборы параметров» (Preset ) и выберите один из 12 предлагаемых вариантов – JPEG Medium (средний)
• Оцените качество изображения и размер итогового файла
• Уровень качества, можно грубо задать в меню, а можно точно настроить ползунком «Качество» (Quality ): передвиньте ползунок на 70 .
• Включите флажок опции «Оптимизированный» (Optimized ): позволяет чуть уменьшить размер файла в обмен на ограничение совместимости со старинными браузерами.

Лабораторная работа Photoshop 1_3 : GIF-сохранение

• для работы.
• Из «списка форматов» выберите пункт «GIF» .
• Выберите (или впечатайте) количество оттенков в поле «Цвета» (Colors) и посмотрите, как это отразилось на изображении и размере итогового файла (установите 90 )
• Для уменьшения исходной гаммы картинки до заданного количества, можно воспользоваться одним из 9 доступных методов редукции цвета. Выберите одну из четырёх верхних опций: установите «Ограниченная» (Restrictive)
• Смешение цветов (Dithering ) отчасти компенсирует узость гаммы, «конструируя» отсутствующие цвета из набора имеющихся. Выберите «Диффузия» (Diffusion) и передвиньте ползунок Dither (степень количества полутонов) на 80 .
• В таблице цветов выберите один из цветов (желтый), дважды щелкнув по цвету, и замените его другим оттенком. Для выбора можно воспользоваться Пипеткой в левой части экрана.
• Щелкните кнопку Done , чтобы сохранить параметры оптимизации в исходный документ

Лабораторная работа Photoshop 1_4 : Взвешенная оптимизация

• для работы.
• Откройте файл в редакторе. Выделите фрагмент картинки (цветок) Прямолинейным Лассо или любым другим инструментом.
• Сохраните выделение в альфа-канал (Select → Save Selection (Выделение → Сохранить выделение )). Дайте ему имя (введите в поле Имя ).
• Откройте диалог «Сохранить для Веб и устройств» , выберите «JPEG» в качестве формата на выходе и, если нужно, настройте уровень качества.
• Щёлкните кнопку «маска» по соседству с полем «Качество» (Quality) . Открывается диалоговое окно.
• Выберите в меню «Канал» (Channel) только что сохранённый альфа-канал. Настройте «Минимальное» и / или «Максимальное» значения по вкусу и нажмите Ok .

Лабораторная работа Photoshop 1_5 : Настройка параметров вывода

• В диалоговом окне «Сохранить для Интернета и устройств» в раскрывающемся меню «Оптимизация» выберите пункт «Изменить настройки вывода» (Edit output settings ).
• Отметьте флажок Вывод XHTML : При экспорте создаются web-страницы, соответствующие стандарту XHTML.
• Щелкните по кнопке Следующая и настройте параметры в группе «Фрагменты» .
• Настройте вывод фона щелкнув по Следующая .
• Щелкните ОК и сохраните оптимизированный файл.
• Просмотрите HTML-код результирующего файла.

Вы создали в Фотошопе свой маленький шедевр и Вам хочется похвастаться им перед своими друзьями. Для этого его нужно сохранить для публикации в Интернет.
В меню «Файл» выберите команду «Сохранить для Веб и устройств» (Save for Web & Devices). Открывается большое диалоговое окно, предназначенное для оптимизации сохраняемых изображений, то есть, для поиска оптимального соотношения качества изображения и размера получаемого файла.

· 1. Панель инструментов.

· 2. Параметры отображения

· 3. Область комментариев

· 4. Масштаб

· 5. Информация о цвете

· 6. Просмотр в браузере

· 7. Палитра оптимизации

· 8. Метаданные

· 9. Таблица цветов

· 10. Размер изображения

· 11. Элементы управления анимацией

· 12. Кнопки подтверждения отмены операции

· 13. Область предварительного просмотра

Область предварительного просмотра

Если Вам кажется, что картинка великовата для размещения на веб-странице, откройте вкладку «Размер Изображения» (Image Size) - (№10 в описании диалогового окна)- и уменьшите её ширину и высоту.

Настройки и оптимизация для формата GIF

 1. Меню "Оптимизировать"

 2. Меню "Формат файла"

 3. Алгоритм редукции цвета

 4. Алгоритм дизеринга

Примечание: Сохранение изображений с помощью диалога «Сохранить для Web и устройств (Save for Web)» (часто называемое «экспортом») подразумевает создание «облегчённой» и несколько «ухудшенной» копии, предназначенной именно для публикации в Web. Ни в коем случае не сохраняйте оптимизированную копию поверх исходного изображения!

Мы научились загружать шрифты в Фотошоп, всем кто еще ее не читал эту статью рекомендую с ней ознакомится.

Сегодня мы продолжим изучать основы Фотошоп, тема сегодняшнего урока Как подготовить фото для интернета . Возможно, у Вас сразу возникли вопросы, для чего и зачем фото готовить для интернета? Можно ведь просто взять загрузить и все.

Да, действительно в некоторых случаях можно просто взять загрузить и все, но это влечет за собой массу проблем и неудобств. Ниже я привел 5 причин почему нужно подготавливать фото для интернета:

5 причин подготовки изображений для WEB

Большой вес изображения. Если Вы например разместите у себя на сайте фото которое весит несколько мегабайтов, во-первых Вы перегружаете и нарушаете работу своего сервера, во-вторых у Вас очень долго будет грузится страница, где Вы разместили свою картинку. А это сильно влияет на посещаемость сайта. Запомните, люди не любят посещать сайты которые тормозят и долго грузятся.

Во время вёрстки веб-дизайна, все элементы макета будущего сайта (картинки в формате.png и.jpg) обязательно подготавливаются для интернета, без этого вёрстка невозможна.

Неправильные пропорции фотографии, которые приводят к искажению. Этот пункт я думаю не нуждается в разъяснение.

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

В некоторых ситуациях требуется загрузка изображения определенного размера и формата. Например Вам нужно загрузить иконку 16×16 пикселей в формате .png для своего сайта. Все это легко и просто можно сделать в Фотошоп.

Со всеми этими задачами прекрасно справляется наша любимая программа Adobe Photoshop CC . Разработчиками Фотошоп был придуман очень полезный и нужный модуль с функцией сохранения изображений для интернета ( Save for Web) .Это мощный модуль управления процессами оптимизации и сохранения документов, который автоматически подбирает оптимальные настройки сохраняемого файла. Этот модуль поддерживает и работает с самыми распространенными форматами файлов для интернета .jpg , .gif , .png .

Преимуществами и удобствами пользования этого модуля являются такие полезные и нужные возможности как:

Выбор нескольких режимов просмотра во время оптимизации изображения для web

Выбор формата в котором изображение будет сохранено

Выбор качества и размера сохраняемого изображения

выбор способа оптимизации, сжатия и просмотр веса оптимизированного изображения.

На этом вся теория заканчивается, переходим к практике. Для начала давайте откроем изображение или фотографию которую будем сохранять для интернета. Я буду работать с этим изображением:

Для того, чтобы перейти к сохранению для web, заходим в верхнее меню Файл/Сохранить для web или воспользуемся горячими клавишами Ctrl+Alt+Shift+S .

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

Описание опций:

1. Четыре вкладки вариантов предварительного просмотра.

- Исходное — это когда Вы видите тока своё исходное изображение

- Оптимизация — это когда Вы видите в предварительном просмотре только оптимизированное изображение

- 2 Варианта — это когда Вы видите своё исходное изображение вверху, а оптимизированное внизу. Этом вариант самый удобный и больше всего мне нравится, именно поэтому я его и выбрал.

- 4 Варианта — это когда Вы видите в предварительном просмотре исходное изображение, изображение в качестве котором Вы выбрали, изображение в качестве 22 и изображение в качестве 11.

2. Формат сохраняемого файла. В нашем случае мы выбираем JPEG.

- PNG — формат файла для сохранения Веб-графики. Бывает двух видов, 8 bit -индексированые изображения, 24 bit — «все» цвета. Обычно в этом формате сохраняют клипарты и логотипы на прозрачном фоне.

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

- JPEG — Самый популярный формат. Прекрасно подходит для сохранения фотографий и изображений со множеством цветов, оттенков, эффектов.

3. Значение качества. Мне нравится «Высокое».

Среднее

Высокое

Очень высокое

Наилучшее

4. Здесь ставим галочку в значение «Оптимизация « . Рассматривать и заострять внимание на опциях «Прогрессивный » и «Встроенный профиль «, мы не будем так как большинство веб-браузеров их не поддерживают.

5. Ставим галочку для того чтобы включить опцию «Преобразовать в sRGB «. Это нужно для того чтобы, наше изображение корректно отображалось на веб-сайте и сохранилось в цветовом пространстве sRGB.

6. Выставляем нужный размер изображения. В моём случае это, ширина 500 — пикселей, высота — 281 пиксель.

7. Размер оригинального изображения.

8. Размер оптимизированного изображения для интернета .

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