Как сжать фотографию без потери качества для размещения в интернете.

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

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

• Графические элементы должны быть представлены в формате 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-код результирующего файла.

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

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

Итак, сначала определяемся, какой размер будет у нашей фотографии.

Смотрим исходный размер. То есть, в меню Изображение , выбираете пункт Размер изображения .

Открывается окно Размер изображения


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

Вводим вместо 2048 (у вас скорее всего там другие цифры) 1024 в окошко "ширина", при этом в окошке "Высота" автоматически появится цифра 768 (потому, что перед фразой Сохранить пропорции стоит галочка)

Нажимаем кнопку "ОК" - теперь у Вашей фотографии нужный размер!
Кстати, если вы на первом уроке кадрировали снимок до нужного размера, то этот абзац можете пропустить.

Примечание: Если исходный размер снимка меньше, чем 1024х768, то увеличивать его не стоит. Он, конечно, растянется до требуемого размера, но качество изображения ухудшится. Поэтому, если фотография и не закрывает весь экран - то пусть радует глаз красотой а не размерами. Ведь еще Ленин говорил по этому поводу: "Лучше меньше - да лучше!"

С размерами определились, переходим непосредственно к сохранению.

Сохранение фотографии для Интернета

В меню Файл, выбираете пункт Сохранить для Web .

Открывается диалоговое окно Save For Web


Как видите, появляется 2 снимка для сравнения качества изображения: оригинал и тот снимок, который получится при устанавливаемых Вами параметрах.

Вы спросите: какие параметры устанавливать?

Во-первых, в окошке 2 выберите формат GIF или JPEG.

Формат GIF поддерживает не больше 256 цветов и подойдет только для сохранения рисунков и чертежей (рисунки 6-8 на этой странице сохранены в формате GIF с поддержкой 64 цветов, поэтому весят по 7-11 кб - мелочь, а приятно!)

Конечно, красивую фотографию в этом формате не сохранишь, поэтому выбираем формат JPEG.

В окошке 3 выбираем качество фотографии: низкое, среднее, высокое, максимальное. Вы скажете: конечно максимальное?

Да, если бы речь шла о сохранении на винчестер, то так бы оно и было. Но Вы же собираетесь эти фотографии размещать в Интернете для скачивания почитателями Вашего таланта! А кто любит долго ждать открытия страницы? Вот именно, никто!

Представленная фотография сохранена при среднем качестве и "весит" 36 кб. При высоком качестве она бы весила около 100 кб, а при максимальном - 200! Вообщем, я особой разницы между средним и высоким качеством не вижу, зато вижу большую разницу в объеме получаемого файла.

А вы можете поэкспериментировать. Меняя значения, вы будете видеть, как у вас на глазах меняется качество правого снимка. Кроме того, под правым снимком увидите, как меняется размер К (в килобайтах) снимка, в зависимости от качества.

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

Если шибко грамотный фотошоп при этом выдаст вам предупреждение, что "некоторые имена файлов несовместимы с некоторыми веб-браузерами" , скажите, что и без него все знаете и нажмите ОК.

Всё, снимок готов!

Внимание! Пока Вы полностью не закончите работу над фотографией, сохраняйте ее в "родном" фотошоповском формате PSD. Потому что многократное повторное сжатие в форматах GIF и JPEG приводит к безвозвратной потере качества.

В этом уроке Вы увидите, как картинки из PSD файла сохранить для Web.

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

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

1. Откройте файл PSD

Пожалуйста, обратите внимание, что для обработки текста в PSD файле нужно установить необходимые шрифты, которые указаны в fonts_info.txt файле.

То же самое нужно сделать и для слогана. Его перекрывают другие фрагменты. Так же перенесите его на перед.

3.Сейчас нужно при нажатой клавише "Shift" выделить все фрагменты, которые хотите сохранить.

4. В верхнем меню перейдите на File > Save for Web & Devices (файл > сохранить для Web & Devices)

5.Выберите инструмент Slice select (выбор фрагмента) и опять при нажатой клавише "Shift" выберите фрагменты. Нажмите на кнопку Save (сохранить)

Обратите внимание, пожалуйста, что картинки нужно сохранить в папке Site, а не в Images. Убедитесь еще раз, что у Вас такие же настройки:

• — Save as type/Сохранить как тип: Images Only/Только картинки
• — Settings/Настройки: Default Settings/Стандартные Настройки
• — Slices/Фрагменты: Selected Slices/Выбрать фрагменты (Важно!)

6. Вы увидите файлы, которые будут заменены. Нажмите на кнопку "Replace" (Заменить)

7. Обновите страницу и проверьте картинку, которую Вы только что изменили.

Пожалуйста, ознакомьтесь с детальным, обучающим видео ниже.

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

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

Да, действительно в некоторых случаях можно просто взять загрузить и все, но это влечет за собой массу проблем и неудобств. Ниже я привел 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. Размер оптимизированного изображения для интернета .

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