Оптимизация графики Web сайта

Чтобы любое изображение можно было использовать на Web-странице, его необходимо предварительно оптимизировать, уменьшив до минимума размер файла и, следователь но, время загрузки по сети, но так, чтобы качество изображения при этом заметно не ухудшилось. Оптимизация обычно выполняется с помощью графического пакета или утилиты, которые поддерживают эту возможность, например, Adobe Photoshop, Corel PhotoPaint, PaintShopPro. По сути, оптимизация - это компромисс между размером файла и качеством изображения.
Различные графические форматы имеют собственные особенности оптимизации.
В формате JPEG изображение сохраняется с глубиной цвета 24 бит и используется сжатие с потерей информации. У этого формата всего две возможности оптимизации:
• подбор оптимального коэффициента сжатия;
• использование прогрессивной развертки.

Оптимальный коэффициент сжатия. Для определения оптимальной степени сжатия следует сохранить изображение при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть его. Критерием потери качества будут так называемые «дрожащие контуры», наиболее заметные в местах контрастных переходов, и появление пятен в областях с плавными переходами. Тот коэффициент сжатия, при котором искажения еще не видны, но с увеличением коэффициента на одну ступеньку становятся заметными, и будет оптимальным. Размер файла при таком коэффициенте сжатия будет минимально возможным при сохранении качества.
Использование прогрессивной развертки в формате JPEG практически не сказывается на размере изображения, но заметно при загрузке. В случае записи изображения в стандартном формате, т.е. без прогрессивной развертки, вывод на экран осуществляется горизонтальными полосами, и до загрузки всего изображения невозможно определить его смысл. Напротив, при записи файла в прогрессивном формате изображение появляется сразу целиком, но в грубой форме, и затем постепенно улучшается. Это дает возможность посетителям сайта сразу же оценить изображение и решить, стоит ли ожидать его окончательной зафузки. Таким образом при просмотре страниц экономится некоторое время. Общее время загрузки страницы при этом не уменьшается, возникает лишь иллюзия его уменьшения. Прогрессивная развертка JPEG поддерживается всеми браузерами, но не каждый графический пакет может записывать в этом формате. Поэтому проверьте, могут ли ваши программы сохранять файлы с прогрессивной разверткой. Последние версии Adobe Photoshop умеют это делать.

Оптимизация изображений В формате GIF
Формат GIF значительно отличается от JPEG. Он использует совершенно другие методы оптимизации. Формат GIF предназначен для хранения изображений с количеством цветов не более 256 и использует сжатие без потерь по методу LZW, который применяется в программах-архиваторах. Методы оптимизации можно разделить на следующие типы, исключая оптимизацию файлов с анимацией:
• уменьшение количества цветов;
• оптимизация палитры изображения;
• стилизация изображения;
• изменение размеров изображения;
• фрагментарная оптимизация;
• оптимизация «прозрачных» изображений;
• использование чересстрочной развертки. Теперь рассмотрим по порядку эти методы и приемы оптимизации.
Уменьшение количества цветов. Для большинства изображений, не являющихся фотографическими, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив размер файла.
Это возможно потому, что формат GIF поддерживает размер палитры меньше 256 цветов. Теоретически, вы можете задать любое число цветов палитры, от 2 до 256, например, 45 или 99. Практически же, количество цветов в изображении выбирается из ряда:
2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксел. В случае, если вы используете в рисунке, предположим, только 97 цветов, то для сохранения одного пиксела все равно будет использовано 7 бит, как и при использовании 128 цветов. Поэтому при оптимизации количества цветов следует ориентироваться на приведенный выше ряд. Это позволит получить более качественное изображение. Уменьшив количество цветов с 256 до 32, можно иногда добиться уменьшения размера файла в 2 раза без заметной потери качества.
Оптимизация палитры изображения. Преобразование полноцветного изображения в индексное, т.е. уменьшение количества цветов до 256 является важной операцией, и здесь следует сказать несколько слов о том, как это делается современными графическими пакетами. Палитра конечного изображения может быть либо фиксированной, либо оптимизированной. В первом случае графический редактор просматривает каждую точку изображения и подбирает ближайшую ей по цвету из палитры. Этот способ дает самые худшие результаты с точки зрения правильности воспроизведения цветов. Тем не менее, данный способ применяется, в основном, для того, чтобы изображения приемлемо выглядели на мониторах с малым количеством цветов - 16 или 256. Обычно в этом случае пользуются так называемой безопасной палитрой, состоящей из набора часто используемых цветов и их оттенков. Безопасная палитра гарантирует, что изображения, использующие эту палитру, будут одинаково показаны всеми браузерами.
Во втором случае, когда используется оптимизированная палитра, графический редактор вначале анализирует рисунок и составляет список всех используемых в изображении цветов. Далее, на основании частоты появления цветов, составляется палитра, которая называется оптимизированной. После этого снова рисунок просматривается, и цвет каждого пиксела изменяется на ближайший из палитры. Данный способ дает значительно лучшие результаты, и именно его следует применять, если у вас нет причин для использования фиксированной палитры.
При оптимизации конкретного изображения задача состоит в том, чтобы выбрать оптимальное количество цветов в палитре. Здесь уместно сказать о способе увеличения количества используемых цветов при их недостатке — так называемом смешивании (dithering).
При этом области, которые в оригинале были залиты однородным цветом, после преобразования заполняются смесью пикселов разных цветов, разбросанных по случайному закону. Как правило, каждый отсутствующий в редуцированной палитре цвет передается пикселами двух самых близких к нему цветов новой палитры. В результате изображение приобретает характерную зернистую, шероховатую фактуру. Очень часто смешивание является единственным способом хоть сколько-нибудь адекватно передать исходные цвета с помощью палитры, в которой этих цветов уже нет. Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет.
В таком случае можно составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека будет казаться, что вы видите сплошной оранжевый цвет.
Это классический пример смешивания. Его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное. Смешивание может увеличить размер файла, причем довольно существенно - он может стать больше, чем до оптимизации. А все дело в способе хранения изображения в формате GIF. Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Смешивание же как раз и основано на том, что получает недостающие цвета путем «перемешивания» точек разных цветов. Поэтому к оптимизации с помощью данного метода нужно относиться очень аккуратно и использовать только при необходимости.
Все существующие ныне браузеры, включая Netscape Navigator и Microsoft Internet Explorer, вынуждены при выводе графических файлов на экран изменять их палитру. Во первых, им приходится приводить к общему знаменателю палитру всех файлов, включенных в одну страницу. Во-вторых, в некоторых случаях браузеру приходится также приспосабливать палитру файла к фиксированной системной палитре. Чтобы эти неизбежные преобразования не приводили к совсем уж неприемлемым результатам, все современные браузеры пользуются при замещении палитры смешиванием. Это значит, что даже если ваше изображение состоит из сплошных цветов, но палитра его почему-либо не может быть отображена напрямую, то браузер неизбежно использует смешивание. Однако для очень многих изображений, составляющих нередко основу дизайна страницы, смешивание крайне нежелательно. Что же делать? Выход, хоть и не самый лучший, есть. Оказывается, существует набор из 216 цветов, которые с гарантией никогда не подвергаются смешиванию ни в Netscape Navigator, ни в Internet Explorer, ни в Windows, ни в Macintosh. Если ваше изображение будет содержать только цвета из этого набора или, по крайней мере, к этому набору будут относиться цвета, занимающие наибольшую площадь, в браузере оно будет выглядеть намного чище и привлекательнее. Эту палитру часто называют безопасной (browser-safe palette). О ней мы уже упоминали выше. Воспользоваться безопасной палитрой не поздно, даже когда графика уже готова.
Однако если вы хотите иметь больше контроля над цветовой стороной своего дизайна, те графические элементы, для которых хотелось бы избежать смешивания, лучше с самого начала рисовать с использованием безопасной палитры. Безопасная палитра поддерживается последними версиями Adobe Photoshop.

Стилизация изображения.
Уменьшить количество используемых цветов в изображениях, содержащих фотографические сюжеты, возможно, применив стилизацию фотографии. Для этого используются такие приемы, как тонирование изображения и применение художественных фильтров, имитирующих рисунки. Фотографии, обработанные таким способом, будут сжиматься лучше и требовать палитру, содержащую менее 256 цветов.
Изменение размеров изображения. Этот метод оптимизации основан на изменении размеров рисунка средствами браузера. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий собой черный квадрат размером 100x100 пикселов.
Для уменьшения размера файла достаточно сделать так называемый однопикселный, т.е. размером 1x1 пиксел, рисунок GIF черного цвета и, как обычно, вставить его в HTML-документ, но размеры картинки указать те, что нужны нам - 100x100. Браузер сам растянет наш рисунок до нужных размеров, и, таким образом, будет достигнута значительная экономия в объеме файла. Подобным же образом можно использовать однопикселные рисунки других цветов, но наибольшую пользу может принести прозрачное однопикселное изображение GIF. С его помощью удобно задавать «пустышки» на страницах, абзацные отступы, фиксировать минимальную ширину или высоту таблицы и делать другие полезные вещи.
Методом изменения размеров очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение в виде квадрата со стороной в один пиксел, а в HTML-документе указать нужную ширину линии или высоту, если линия вертикальная. Фрагментарная оптимизация. Фрагментарная оптимизация применяется в случае, если у вас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты, которые можно поместить в таблицу. Тогда в браузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка оптимизируется отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPEG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно в 2-3 раза, в зависимости от конкретного изображения.
Кроме того, изображение будет появляться на экране более равномерно, так как все фрагменты будут загружаться параллельно. Однако если количество фрагментов превысит 10, то возможного выигрыша и не получится, так как каждый фрагмент должен будет хранить свою копию палитры и служебной информации. Оптимизация «прозрачных» изображений. Формат GIF позволяет сохранять так называемые «прозрачные» изображения. На самом деле, GIF не поддерживает альфа-канал, в котором обычно хранится информация о прозрачности.
Он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда браузер рисует на экране такое изображение, то, встречая «прозрачный» пиксел, он просто игнорирует его и не показывает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF, возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходило сглаживание и который стал прозрачным. Единственным способом уменьшения этого эффекта является назначение прозрачности цвету, близкому к цвету фона, на котором будет использоваться GIF, и проведение сглаживания на этом же фоне.
Использование чересстрочной развертки. Версия GIF89a позволяет сохранять файлы с чересстрочной разверткой. При использовании этого способа строчки, составляющие изображение, перемежаются, и при загрузке браузер вначале показывает каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное изображение. Посетитель вашей Web-страницы сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки. Это очень удобно.

Наш телефон

+7(495) 649-89-44  
900 - 2300 без выходных

Подробнее