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

Прежде всего определимся, что же такое оптимизация? Оптимизация — это процесс, при котором из файла удаляется определенная часть информации и за счет этого размер файла значительно уменьшается. В современном web-дизайне используются три формата оптимизированной пиксельной графики — JPEG, GIF и PNG. Какой из них использовать? Критерий достаточно прост — в каком формате файл займет меньший размер при наименьших визуальных искажениях, в тот и следует конвертировать. Для полноцветных и фотоизображений следует применять JPEG, а для простых, особенно с большими площадями однотонных заливок лучше использовать GIF. Формат PNG-8 лучше чем GIF справляется с оптимизацией изображений больших и средних размеров. Эти особенности объясняются различными алгоритмами оптимизации в разных форматах.

Формат GIF (Graphics Interchange Format) сохраняет изображение с использованием палитры индексированных цветов — до 256. Другими словами, GIF использует оптимизацию за счет уменьшения количества цветов — любое изображение он представит в цветах, выбранных из 16 миллионов, но количество которых может быть от 2 до 256. Естественно, не каждое изображение можно безболезненно «втиснуть» в 256 цветов. Отсюда вывод — использовать формат для немногоцветных картинок с резкими границами между цветами. Формат GIF поддерживает прозрачность и использует сжатие без потери информации.

Формат JPEG (Joint Photographic Experts Group) пригоден для сохранения полноцветных изображений с цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. Прозрачность этим форматом не поддерживается и при сильной степени сжатия появляется различные артефакты (искажения, посторонние пятна и т.д.).

PNG (Portable Network Graphics) — самый новый из форматов, спроектирован для замены устаревшего и более простого формата GIF. Существует 2 вида формата. PNG-8 — использующий индексированные цвета и поддерживающий градиентную прозрачность. Использует сжатие без потерь и заслуживает самого пристального внимания. PNG-24 используется для хранения полноцветных изображений. Степень сжатия PNG24 меньше, чем у JPEG, зато он использует алгоритм сжатия без потерь. В web-дизайне PNG-24 практически не используется.

В Adobe Photoshop окно оптимизации Save for Web & Devices вызывается комбинацией клавиш (Alt+Ctrl+Shift+S) либо в меню File > Save for Web & Devices. С правой стороны окна расположена панель с настройками, которая в зависимости от выбранного формата принимает разный вид. На рисунке показано, как будет выглядеть панель при выборе GIF.

Optimized file format (выбор формата) Color reduction algorithm (алгоритм сокращения цветов) Dithering algorithm (алгоритм имитации) Transparency (прозрачность) Interlaced (черезстрочная развертка)

Color reduction algorithm — алгоритм сокращения цветов (по-другому называется выбором палитры) определяет, как Photoshop сделает из полноцветного изображения индексированное. Из всех вариантов нас интересуют следующие:
Perceptual (палитра на восприятие) — с учетом чувствительности и восприятия человеческого глаза;
Selective (выборочная палитра) — аналогичная первой, но с предпочтением цветов web-безопасной палитры (принята по умолчанию, довольно близко сохраняет исходные цвета);
Adaptive (адаптивная палитра) — создаст цветовую таблицу из цветов, наиболее часто встречающихся в исходном изображении;
Restrictive (Web-палитра) — преобразует изображение в стандартную таблицу из 216 web-безопасных цветов.
Custom (заказная) — сформировывает палитру из выбранных пользователем цветов.

Dithering algorithm — алгоритм перемешивания пикселей (еще называют дизеринг, рассеивание, имитация) позволит выбрать способ имитации дополнительных цветов путем перемешивания существующих пикселей. Варианты выбора: No dither — без перемешивания, Diffusion — диффузный алгоритм, Pattern — алгоритм на основе заданного образца и Noise — алгоритм на основе шума. При оптимизации всегда стоит попробовать все варианты. Включение этой опции приводит к увеличению размера файла. Связанный со списком движок Dither регулирует интенсивность перемешивания.

Transparency (прозрачность) — включение прозрачности, рассматривается тут.

Interlaced — черезстрочная развертка. Обеспечит постепенное улучшение (прорисовку) изображения в процессе загрузки.

Оптимизация сводится к выбору соответствующего алгоритма сокращения цветов, или как говорят, выбору палитры и количества цветов. Алгоритм выбирается в Color reduction algorithm, а цвета — в раскрывающемся списке Colors. Среди всех палитр наиболее предпочтительной считается адаптивная. Количество цветов начинать следует с 256 и, постепенно уменьшая, контролировать изменения изображения. Как правило, количество цветов в выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256.
Несмотря на то, что GIF поддерживает сжатие без потерь, Photoshop позволяет установить потери в этом формате. Проще говоря, движком Lossy можно еще больше сжать файл, уменьшив его размер.

Оптимизация формата PNG-8 ничем не отличается от GIF (в Optimized file format выбираем PNG8). Как уже говорилось, PNG8 следует использовать для хранения изображений больших размеров — именно в этом случае будет преимущество перед JPEG и GIF.

Теперь перейдем к формату JPEG.

Optimized file format (выбор формата) Compression quality (Качество сжатия) Progressive (прогрессивный)

Здесь все несколько проще. Compression quality (качество сжатия) — выпадающее меню с заготовленными значениями качества изображения:
Low — низкое
Medium — среднее
High — высокое
Maximum — максимальное.
В соответствии с выбором будет меняться значение поля Quality от 0 (самое низкое) до 100 (самое высокое). Более плавно качество можно настроить непосредственно в самом поле, либо в появляющемся под ним движке. В поле Blur (размытие) устанавливается степень размытия картинки. Включение флажка Progressive позволит сделать загрузку картинки более удобной для восприятия — изображение будет отображаться еще до полной загрузки. При этом увеличится размер файла.

Остается добавить, что из выпадающего меню Preset можно выбрать готовые предустановки для каждого формата. Нажатие клавиши Alt приведет к очередному изменению кнопок меню (на рисунке). Reset приведет к сбросу всех настроек, а Remember — к запоминанию.

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

Вкладка Original позволит, как ясно из названия, просмотреть оригинал изображения, Optimized — оптимизированный вариант. А вкладки 2-Up и 4-Up — двух и четырехблочный варианты просмотра соответственно, где будет и оригинал, и оптимизированные варианты. Причем для каждого варианта можно применять различные настройки.

Ссылка на статью при перепечатке обязательна.