Оптимизация изображений в Adobe Illustrator

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

Формат 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 — 8-битный, использующий индексированные цвета и поддерживающий градиентную прозрачность. Использует сжатие без потерь. PNG-24 — 24-битный, используется для хранений полноцветных изображений. Степень сжатия PNG24 меньше, чем у JPEG, но он использует алгоритм сжатия без потерь.

В Adobe Illustrator окно оптимизации 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 — алгоритм сокращения цветов (по-другому называется выбором палитры) определяет, как Illustrator сделает из полноцветного изображения индексированное. Из всех вариантов нас интересуют следующие:
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 поддерживает сжатие без потерь, Illustrator позволяет установить потери в этом формате. Ползунком Lossy можно еще больше сжать файл, уменьшив его размер.

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

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

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