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

Улучшение изображений для размещения в Web

В пакете Painter 5.5 Web Edition компании MetaCreations вы можете с легкостью разбить изображение на отдельные фрагменты. Вы не только можете назначить каждому фрагменту различные URL, но и создать событие, по которому при прохождении указателя мыши над фрагментом графическое изображение изменяет свое состояние

Один из самых интересных аспектов Web-дизайна — создание графики и разработка стиля визуального представления. Хотя текст и информационное содержание являются исключительно важными компонентами, наибольший интерес у посетителей вашего узла будут вызывать графические элементы. Однако злоупотребление графикой может привести к увеличению времени загрузки, из-за чего Web-путешественники нередко щелкают по той самой, «ужасной» кнопке <Назад>. В этой статье вы найдете несколько советов по улучшению изображений, предназначенных для размещения на страницах Web, а также обзор новых технологий, реализованных в современных программах для Web-дизайна.

Выберите формат

Какой формат следует использовать? Вероятно, вы уже заучили основные правила: GIF применяется для логотипов, текста и графики с несколькими цветами, JPEG — для фотографий и изображений с большим количеством цветов. Хотя эти правила верны почти всегда, для ускорения загрузки Web-графики и улучшения внешнего вида изображений существуют и некоторые дополнительные методы.

При сохранении файлы GIF сжимаются. Понимание основ процесса сжатия поможет вам создавать эффективные GIF-изображения с уменьшенным временем загрузки. Большие объемы данных об одном цвете сжимаются в один бит информации. Если у вас есть картинка с двумя сплошными цветными квадратами, результирующее изображение будет сжато довольно эффективно, а объем итогового файла — очень маленьким. Цвета сжимаются по горизонтали, слева направо, по технологии, получившей название «групповое кодирование» (run length encoding, RLE), поэтому логотип, состоящий из цветных горизонтальных линий также будет сжиматься довольно хорошо. С другой стороны, логотип из вертикальных линий может сжиматься хуже, что приведет к увеличению объема файла и времени загрузки изображения для посетителя.

Не менее важно ограничивать частоту смешения (dithering) цветов, применяемого к файлам GIF. Хотя смешение обычно улучшает внешний вид изображения и создает видимое увеличение количества цветов по сравнению с реально используемыми в картинке, оно почти всегда приводит к увеличению объема файла. Это происходит потому, что при сохранении в формате GIF вместо сжатия длинных последовательностей однородных цветов выполняется сжатие сотен отдельных пикселов.

Резкость бывает лишней

При создании графики GIF горизонтальные цветные линии сжимаются гораздо сильнее, чем вертикальные. Обратите внимание на размеры графики и предполагаемое время загрузки, которые приводятся в нижней части каждого окна изображения пакета Adobe ImageReady. Картинка с вертикальными линиями почти в два раза больше, чем графика с горизонтальными линиями. На крайнем справа изображении видно, что добавление даже небольшого смешения приводит к существенному увеличению размеров.

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

Вы наверняка слышали о прогрессивном GIF (изображения, которые по мере их загрузки постепенно становятся все более резкими). А вот версии прогрессивного JPEG не так широко известны. Основанные на тех же принципах, изображения в формате прогрессивного JPEG быстро отображаются на экране в виде картинок с низким разрешением, а затем их резкость постепенно увеличивается. В результате, зрителям есть, на что смотреть во время загрузки полного изображения, к тому же возникает ощущение более быстрого отображения страницы. Недостаток прогрессивного JPEG состоит в том, что его могут не поддерживать устаревшие версии браузеров.

Существует еще один графический формат — PNG (сокращение от Portable Network Graphic — переносимая сетевая графика). В то время, как JPEG и GIF представляют собой форматы с потерями, то есть во время сжатия часть информации об изображении отбрасывается, PNG является форматом сжатия без потерь. Это значит, что вы можете выводить на экран изображения с 24-разрядным цветом и добиваться максимального качества. Поддержка этого перспективного формата Web встроена в большинство программ для Web и обработки графики. Более того, он является форматом по умолчанию в пакете Fireworks компании Macromedia. Однако не забывайте, что в четырех версиях браузеров поддержка PNG ограничена. В пятых версиях поддержка этого формата реализована более полно.

Нарежьте на дольки

Сделав окончательный выбор формата файла, вам придется задуматься об отображении на экране большой картинки без существенной задержки загрузки страницы, и здесь на помощь приходит технология разделения изображения на фрагменты (image sclicing). Стандартные программы Web-дизайна, такие как Painter 5.5 Web Edition компании MetaCreations, в процессе разделения изображения на фрагменты разрезают его на маленькие квадратики, а затем автоматически генерируют исходный текст HTML, собирающий их на странице Web. Преимущество этого метода в том, что когда графика разбита на маленькие квадратики, у зрителя возникает впечатление, что полное изображение появляется быстрее.

Кроме разбиения изображения, некоторые программы, такие как Fireworks компании Macromedia, даже позволяют смешивать различные графические форматы для отдельных фрагментов общего изображения на странице Web. Например, вы собираетесь поместить на странице большую картинку, созданную из фотографии, а также добавить некоторые надписи. Fireworks разобьет часть, состоящую из фотографии, на изображения JPEG, обеспечивая лучшую передачу цветов, а фрагменты с текстом сохранит в формате GIF, добиваясь лучшего сжатия.

Вместо послесловия

И еще один, последний совет по размещению графики в сети: постарайтесь не вставлять большие картинки в верхнюю часть вашей странички Web. Вместо этого поместите сверху какой-нибудь текст — это позволит посетителям не скучать, пока загружается расположенная ниже графика. Для загрузки большого полноэкранного изображения потребуется время, а посетители могут не захотеть ждать, если им совсем нечего делать.

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

Фрэнк Макмэхон — мультимедийный художник из Портленда (шт. Мэн).