На главную
О себе
Виды работ
web-работы
полиграфия
Мои работы
сайты
полиграфия

Вы находитесь в разделе «Статьи по web-дизайну»

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

Прежде всего, что такое оптимизация? Оптимизация — это процесс, при котором уменьшается размер файла за счет удаления из него определенной части информации. В настоящее время при разработке 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 почти не используется.

Рассмотрим, как оптимизировать web-графику в Corel Draw. Окно оптимизации вызывается из меню File>Publish To The Web>Web Image Optimizer. Перед вызовом окна следует выделить нужный объект, иначе оптимизироваться будет вся страница.

В верхней части окна расположены выпадающие списки выбора скорости соединения с интернетом, выбора масштабирования и кнопки выбора количества секций просмотра. В нижней части окна под картинками находятся два выпадающих меню. Левое — выбор формата сохраняемого файла, правое — выбор готовых предустановок для оптимизации. В зависимости от выбранного формата предустановки будут меняться. Для каждой секции можно выбрать свой формат и свои предустановки. Результаты оптимизации выбранной секции — она будет обведена красной линией (на рисунке справа) будут сохранены в файле при нажатии кнопки ОК.
Иногда возникает необходимость передвинуть изображение, особенно при большом увеличении. Чтобы сделать это, нужно навести мышь на изображение основной секции (курсор над ней превратится в руку, в двухсекционном режиме она левая), нажать левую кнопку мыши, переместить изображение, затем отпустить кнопку мыши. Простой щелчок на картинке основной секции приведет к увеличению масштаба просмотра, щелчок при нажатой клавише Shift — к уменьшению. Изображение на всех остальных секциях тут же повторит действия основной. Во всех окнах, которые будут открываться далее, действует такая же схема.
Информация об оптимизированном изображении выводится под вышеуказанными двумя меню. Это размер файла, палитра (если выбран формат GIF) или степень сжатия (если выбран формат JPEG), время загрузки, степень сжатия в процентах и, наконец, количество цветов (если выбран формат GIF) или степень сглаживания (если формат JPEG). На рисунке мы видим, что файл будет занимать 13,1 кб, палитра адаптивная, время загрузки 7,27 сек (при выбранной в верхней части окна скорости соединения 14,4 кб/с), количество цветов — 128. Кнопка Advanced позволит более точно настроить параметры оптимизации в соответствии с собственными нуждами. Рассмотрим эти параметры более подробно.

После нажатия кнопки Advanced при выбранном формате GIF откроется окно Convert to Paletted. Движок Smoothing (Сглаживание) регулирует степень сглаживания, которое скрывает мелкие погрешности оптимизации. Расплата за это — потеря резкости.

Выпадающий список Palette позволит выбрать алгоритм сокращения цветов, или, говоря проще, как программа будет делать из полноцветного изображения индексированное, с ограниченным количеством цветов. Еще этот процесс называют выбором палитры. Из всех вариантов списка интерес представляют следующие палитры:
Adaptive (адаптивная) — создается цветовая таблица с максимальной передачей цветовой гаммы изображения;
Optimized (оптимизированная) — создается палитра из цветов, наиболее часто встречающихся в исходном изображении;
GrayScale (градации серого) — переведет изображение в палитру, содержащую 256 градаций серого цвета;
WebSafe (Web-безопасная) — преобразует изображение в стандартную таблицу из 216 цветов. Будет отображаться одинаково на мониторах PC и Mac, но перевести в нее полноцветную картинку без искажения цветов невозможно.
Лучшие результаты дают адаптивная и оптимизированная палитры.
Выпадающий список Dithering (дизеринг, рассеивание, имитация, перемешивание — как только не называют эту опцию) позволит выбрать алгоритм перемешивания пикселей, что позволит сделать изображение более естественным. Уберутся нежелательные резкие градиентные переходы и могут появятся новые цвета, но несколько увеличится размер файла. Если эта опция будет использована, стоит попробовать все варианты.
Движок Dither Intensity (Интенсивность перемешивания), как ясно из названия, регулирует интенсивность перемешивания.
В списке Colors можно выбрать количество цветов. Ведь изображение может содержать меньше, чем 256 цветов. Отметим, что этот список активирован не во всех палитрах — только адаптивная и оптимизированная палитры позволят менять количество цветов.

Таким образом, оптимизация в формате GIF, в основном, сводится к выбору палитры, режима перемешивания пикселей и количества цветов. Остальные вкладки этого окна — Range Sensitivity, Processed Palette и Batch рассматриваться не будут т. к. вряд ли пригодятся в работе. Текущие установки можно сохранить, нажав значок «+» возле списка Presets и затем, присвоив им имя, пользоваться, выбирая из этого списка. Кнопка Preview (Просмотр) включает/выключает просмотр результатов оптимизации, а Reset (Стереть) возвращает все установки к умолчанию. После нажатия кнопки ОК текущее окно закроется и появится окно GIF Export, в котором будет предложено включить режим прозрачности и опцию черезстрочной развертки.

Изготовление прозрачного GIF в этой статье рассматриваться не будет, поэтому Transparency (Прозрачность) оставляем в None (Нет), а черезстрочная развертка включается отметкой флажка Interlace Image. Ее включение обеспечит постепенное улучшение (прорисовку) изображения в процессе загрузки. Нажимаем ОК и возвращаемся в окно Web Image Optimizer. Если все нормально, нажимаем ОК и сохраняем файл.

При выбранном формате JPEG при нажатии кнопки Advanced откроется окно JPEG Export (Экспорт JPEG). В секции Encoding Method (Метод кодирования), расположенной под картинкой слева, находятся два флажка — Progressive и Optimize, и список Sub Format.
Progressive позволит сделать загрузку картинки более удобной для восприятия — загрузка изображения будет производится с постепенно улучшающимся качеством. Это ускорит ее восприятие, но размер файла при этом увеличится.
Optimize, как указано в документации Corel Draw, позволит использовать оптимальное кодирование для достижения наименьшего размера файла.
Выпадающий список Sub Format предоставит выбор:
Standard (4:2:2) — упор на маленький размер файла с потерей качества;
Optional (4:4:4) — наоборот, сохранение качества с увеличением размера файла.

В секции Properties (Свойства), расположенной под картинкой справа, находятся движки Compression (Сжатие), регулирующий степень сжатия, и Smoothing — сглаживание. После настройки всех этих параметров и достижения оптимального соотношения «размер файла — качество изображения» нажимаем ОК и возвращаемся в окно Web Image Optimizer. Нажимаем ОК и сохраняем файл.

Работы велись в Corel Draw версии X4, но все настройки, окна и клавиатурные сокращения действительны и для версии Corel Draw X3.

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

Copyright 2003-2009 Serg
JavaScript WebEditor
О web-дизайне
Помощь полиграфисту
Связь со мной