Возможности оптимизации

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

В формате JPEG изображение сохраняется с глубиной цвета 24 бит и исполь­зуется сжатие с потерей информации. У него не так уж много способов опти­мизации, точнее сказать, два:

• использование прогрессивной развертки;

• оптимальный коэффициент сжатия.

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

Оптимальный коэффициент сжатия. Это - другая возможность оптимизации изображения в формате JPEG. Для осуществления такой оптимизации нужен графический пакет или утилита, которая позволяет регулировать степень сжатия изображения. Adobe Photoshop позволяет выполнить такую регулировку. Другие программы, например, Photo- Paint и PaintShopPro, также позволяют плавно регу­лировать степень сжатия в интервале значений от 1 до 255.

Как определить оптимальную степень сжатия? Для этого нужно сохранить изо­бражение при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть его. Критерием потери качества будут так называемые «дрожащие контуры», наиболее заметные в местах контрастных переходов, и появление пя­тен в областях с плавными переходами. Тот коэффициент сжатия, при котором искажения еще не видны, но с увеличением коэффициента на одну ступеньку становятся заметными, и будет оптимальным. Размер файла при таком коэффи­циенте сжатия будет минимально возможным при сохранении качества.

Формат GIF сильно отличается от JPEG и использует совершенно другие мето­ды оптимизации. Он предназначен для хранения изображений с количеством цветов не более 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, а основная особен­ность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Смешивание же как раз основано на том, что получает не­достающие цвета путем «перемешивания» точек разных цветов.

Все существующие ныне Web-браузеры, включая Netscape Navigator и Micro­soft Internet Explorer, вынуждены при выводе графических файлов на экран изменять их палитру. Во-первых, им приходится приводить к общему знаме­нателю палитру всех файлов, включенных в одну страницу. Поскольку неко­торые компьютерные мониторы не могут отобразить больше 256 цветов од­новременно, приходится идти на компромиссы. Во-вторых, в некоторых слу­чаях браузеру приходится также приспосабливать палитру файла к фиксиро­ванной системной палитре. Чтобы эти неизбежные преобразования не приво­дили к совсем уж неприемлемым результатам, все современные браузеры пользуются при замещении палитры смешиванием. Это значит, что даже если ваше изображение состоит из идеально гладких цветовых плоскостей, но его палитра почему-либо не может быть отображена напрямую, то в браузере это изображение неизбежно станет шероховатым.

Однако для очень многих изображений, составляющих нередко основу дизайна страницы, смешивание крайне нежелательно. Что же делать? Выход, хоть и не самый лучший, есть. Оказывается, существует набор из 216 цветов, которые с гарантией никогда не подвергаются смешиванию ни в Netscape Navigator, ни в Internet Explorer, ни в Windows, ни в Macintosh. Если ваше изображение будет содержать только цвета из этого набора или, по крайней мере, к этому набору будут относиться цвета, занимающие наибольшую площадь, в браузере оно бу­дет выглядеть намного чище и привлекательнее. Эту палитру часто называют безопасной (browser-safe palette).

Воспользоваться безопасной палитрой не поздно, даже когда графика уже готова. Однако, если вы хотите иметь больший контроль над цветовой стороной своего дизайна, те графические элементы, для которых хотелось бы избежать смешива­ния, лучше с самого начала рисовать с использованием безопасной палитры. Безопасная палитра поддерживается последними версиями Adobe Photoshop.

Стилизация изображения. Для уменьшения количества используемых цветов в изображениях, содержащих фотографические сюжеты, возможно применение стилизации фотографии. Для этого можно воспользоваться такими приемами, как тонирование изображения и применение художественных фильтров, имити­рующих рисунки. Фотографии, обработанные таким способом, будут сжиматься лучше и требовать палитру, содержащую менее 256 цветов.

Изменение размеров изображения. Этот метод оптимизации основан на изме­нении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий собой черный квадрат размером 100x100 пикселов. Для уменьшения размера файла достаточно сделать так называемый однопикселный, т.е. размером 1x1 пиксел, рисунок GIF черного цвета и, как обычно, вставить его в HTML-файл, но размеры картинки указать те, что нужны нам - 100x100. Браузер сам растянет наш пиксел до нужных размеров, и, таким образом, будет достигнута значитель­ная экономия в объеме файла. Подобным же образом можно использовать одно-пикселные рисунки других цветов, но наибольшую пользу может принести прозрачное однопикселное изображение GIF. С его помощью удобно задавать «пустышки» на страницах, абзацные отступы, фиксировать минимальную ширину или высоту таблицы и делать другие полезные вещи.

Фрагментарная оптимизация. Фрагментарная оптимизация применяется в слу­чае, если у вас есть некоторое большое изображение, содержащее сильно отли­чающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в браузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка опти­мизируется отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранять их в формате JPEG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, при­мерно раза в 2-3, в зависимости от конкретного изображения. Кроме того, изображение будет появляться на экране более равномерно, так как все фраг­менты будут загружаться параллельно. Однако, если количество фрагментов превысит 10, то возможного выигрыша не получится, так как каждый фрагмент должен будет хранить свою копию палитры и служебной информации.

Оптимизация «прозрачных» изображений. Формат GIF позволяет сохранять так называемые «прозрачные» изображения. На самом деле, GIF не поддержива­ет прозрачность в изображениях - альфа-канал - он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Если браузер рисует на экране такое изображение, то, встречая «прозрачный» пиксел, он просто игно­рирует его и не показывает на экране. Само по себе это хорошо, но в случае ис­пользования метода сглаживания краев изображения (anti-aliasing) и последую­щего сохранения в формате GIF, возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходило сглаживание и который стал прозрачным. Един­ственным способом уменьшения проявления этого эффекта является назначение прозрачности цвету, близкому к цвету фона, на котором будет использоваться GIF, и проведение сглаживания на этом же фоне.

Какой формат использовать?
Вопрос о том, в каком формате хранить нужное вам изображение, не так прост, как кажется. Очень часто можно прочитать, что фотографические изображения, поскольку они имеют более 256 цветов, следует хранить в формате JPEG, а ри­сунки в формате GIF. Это правило действительно верно в большинстве случаев. Однако могут быть и исключения. В ряде случаев, если вам требуется особое качество изображения, следует предпочесть GIF. Дело в том, что главной поме­хой в использовании JPEG является то, что изображения, сохраненные в этом формате, в отличие от GIF имеют визуально заметные искажения. Они тем за­метнее, чем больше величина сжатия и меньше геометрические размеры деталей изображения. Считается, что если исходный размер файла сжимается до 10 раз то искажения будут не очень заметны. В то же время, если в достаточно «интеллектуальной» программе уменьшить количество цветов фотографии до 256 этих 256 цветов в большинстве случаев хватит на то, чтобы изображение ж проиграло в визуальном восприятии.

Поэтому в том случае, когда для вас существенно, чтобы картинка воспроизво­дилась с минимальными искажениями, сделайте два файла - в GIF и JPEG-форматах и посмотрите, какой файл при устраивающем вас качестве займет меньше места на диске.

Во всяком случае, имейте в виду следующие обстоятельства:

• Чем больше на рисунке мелких и контрастных деталей, тем сильнее будут заметны искажения, вносимые при сжатии в формате JPEG.

• Чем крупнее геометрические размеры изображения в пикселах и чем ниже контрастность снимка, тем искажения JPEG будут меньше заметны.

• Чем больше на рисунке контрастных и мелких деталей, тем более крупный размер файла получится при сохранении в формате GIF.

• Чем большую площадь занимают однородно окрашенные участки и чем большую горизонтальную протяженность имеют детали рисунка, тем мень­ший размер займет на диске файл GIF.

• Файлы, записанные в чересстрочном (interlaced) формате GIF и в прогрессив­ном формате JPEG, то есть так, чтобы изображение «проявлялось» постепен­но, будут, при прочих равных условиях, иметь больший размер.

Но есть две области, где GIF - вне конкуренции. Первая - это создание анимированных, то есть движущихся изображений. На самом деле анимированный GIF -это несколько графических изображений, записанных в один файл. Последова­тельный показ этих изображений создает иллюзию движения. В файле GIF хранится информация о том, сколько раз в секунду надо менять изображение, в какой последовательности показывать картинки и т.д. Для создания анимированного изображения вы в любом графическом редакторе рисуете картинки, из которых будет строиться анимация, а затем загружаете их в специальную программу подготовки анимации, где указываете, как эти картинки должны чередоваться. Таких программ существует большое количество.

Другое незаменимое свойство GIF - это возможность получения прозрачного фона изображения, то есть такого фона, сквозь который видно все, что под ним находится. Создавать GIF с прозрачным фоном может любой профессиональный графический редактор, например, Adobe Photoshop.

3.Вопросы для закрепления.

1)Какие виды графических форматов Вы знаете?

2)Какой объем графического файла допустим на web – странице? ».

3)Назовите способы оптимизации графических файлов

4)Чем отличается формат Gif от Jpg?

4.Домашние задание: Подготовить графические файлы для сайта и оптимизировать их.

Подготовить рефераты на тему: «Форматы, применяемые для представления графики в сети Интернет», «Методы интеграции изображений в документ», «Приемы позволяющие осуществить фрагментацию изображений», «Принципы создания GIF-анимации», «Программы для оптимизации изображений».

Лекция 5

Тема: Структура HTML документа

Цели: Ознакомить учащихся с основными понятиями HTML; дать понятие основных элементов HTML; определить структуру HTML документа.

План урока.

1. Организационный момент.

2. Изложение нового материала.

1) Язык HTML

2) Структура HTML документа

3) Спецификации элементов

3. Закрепление изученного.

4. Итог урока.

Ход урока.