Оптимизация изображения для WEB с помощью Photoshop
CTRL + SHFT + ALT + S Чудесное сочетание клавиш, а для остальных меню файл - экспорт изображения для WEB

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

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

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

ЧЕМ ХОРОШ ДАННЫЙ МЕТОД
Потеря качества при этом минимальная. А разница в размере (Kb) исходного файла  очень значительная. Удобство использования , все в одной программе. Без лишних дополнений и заморочек.

ВЫБОР ОПТИМАЛЬНОГО КАЧЕСТВА
Здесь все просто, сначала рекомендую выставить эмуляцию скорости, чтобы наглядно видеть сколько по времени займет предполагаемая загрузка изображения на сайте. Делается это внизу. эмуляция скорости

Теперь можно приступить к настройкам самой оптимизации. На примере JPEG картинка. В пресетах есть несколько быстрых решений:

Самое низкое качество и маленький вес

настройка качества - низкое

Среднее качество

настройка качества - среднее

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

настройка качества - высокое

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

настройка качества - лучшее

Как видите, если наплевать на качество, то получается очень легкая картинка, которая будет моментально грузиться даже при плохом соединении. А высокое качество лучше для восприятия. Что же делать? В данном примере я остановился на среднем показателе в 60%. Артифактов получилось минимум и размер файла довольно компактный 114 кб. Отлично!

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

настройка качества фильтрации

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

НАГЛЯДНЫЕ РЕЗУЛЬТАТЫ КОМПРЕССИИ ИЗОБРАЖЕНИЯ 

ДО $IMAGE8$ ПОСЛЕ $IMAGE9$

Конечный результат можно теперь сохранить

экспорт изображения

Теперь вы знаете для чего необходимо оптимизировать изображения.