Тема: Графические изображения. Особенности веб-графики

Цели: Ознакомить учащихся с основными понятиями графических форматов; возможностями оптимизации графических изображений;

План урока.

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

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

1) Виды графических форматов их особенности и отличия

2) Оптимизация графических объектов

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

Итог урока.

Ход урока.

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

Отметить присутствующих. Сообщить тему урока. Настроить учащихся на восприятие материала.

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

Графика для web

Оформление Web-страниц подразумевает необходимость размещения максимально возможного объема информации на сравнительно небольшом пространстве. Вы должны исходить из того, что среднестатистический пользователь работает в Интернете с разрешением экрана не более 800x600. Область, которая отображается в окне браузера при таком разрешении экрана, составляет примерно 790x430 пикселов. Чтобы представить величину этой области, вспомните, что значки на рабочем столе Windows имеют размер 32x32 пиксела.

Подготавливая графику для Web-страницы, необходимо помнить о небольших размерах области, с которой вы должны работать. Изображение не должно превышать 700 пикселов по ширине и 400 пикселов по высоте. Но файл даже такой картинки может оказаться слишком большим для передачи по каналам связи сети. Следует также помнить и о том, что часть пользователей могут видеть на своих мониторах только 256 цветов. Поэтому 24-битная графика, способная обеспечить 16,7 миллиона оттенков цвета, не сможет быть оценена некоторой частью зрителей. При этом пользователи не только не смогут увидеть на своих мониторах всей заложенной вами цветовой гаммы, но, кроме того, изображение может оказаться худшего качества, чем в случае использования 8-битной графики, отображающей 256 цветов. К тому же файл окажется в три раза больше по размеру, так как, его размер пропорционален глубине цвета, и, соответственно, будет требовать большего времени для загрузки на экран.

Использование корректной цветовой гаммы важно при разработке любого графического проекта. Для графики Web-страниц необходимо применять цвета модели RGB. Так как для Web-страниц устройством вывода графики является экран монитора, то здесь, как правило, соблюдается условие WYSIWIG - What You See Is What You Get (Что видишь, то и получаешь). Говоря «как правило», мы имеем в виду небольшие индивидуальные отличия мониторов пользователей.

На вопрос «Каков должен быть размер графического файла?», предназначенного для Web, трудно ответить однозначно. Давайте попробуем представить себе, что пользователь, обращающийся к вашему сайту, имеет модем с пропускной способностью 14,4 Кбит/сек, хотя подобные модемы и считаются устаревшими. При использовании такого модема передача блока данных объемом 1 килобайт занимает примерно 1 секунду, так что при объеме графики в 30 килобайт для ее передачи по сети потребуется приблизительно 30 секунд. После таких расчетов возникает следующий вопрос: как долго посетитель, обратившийся к вашему сайту, готов ждать появления на экране загружаемого изображения? Если вы сможете ответить на этот вопрос, то сразу же определите и максимальный размер файла с графическим изображением. Считается, что файл должен иметь такой размер, при котором время его загрузки по сети не превышает одной минуты, что выражается в ограничении размера величиной примерно 60 килобайт.

Размер графического файла, в частности, полученного в результате сканирования изображения, можно определить по следующей формуле:

F = (A/25,4xB/25,4)xD2xC/8,

где

F - размер файла без сжатия в байтах;

А - ширина исходного изображения в мм;

В - длина исходного изображения в мм;

D - графическое разрешение изображения в dpi;

С - глубина цвета в битах.

Таким образом, если вы хотите отсканировать для своей Web-страницы фотографию

размером 10x15 см с разрешением 150 dpi и глубиной цвета 24 бита, то результирующий

файл будет иметь размер 1569378 байт или 1,49 мегабайта.

Любая компьютерная информация может храниться только в определенном формате. Каждый вид информации имеет собственные форматы. Для текста используются одни форматы, для электронных таблиц - другие, для графики -третьи. Формат графической информации обычно определяется программой, в которой она создана. Для Web-графики стандартными считаются форматы JPEG, GIF и PNG.

Формат JPEG (Joint Photographic Experts Group - Объединенная группа экспер­тов фотографии) - самый популярный формат для хранения фотографических изображений. JPEG является стандартом в Интернете и предназначен для со­хранения растровых или точечных изображений со сжатием, уменьшающим размер файла от десятых долей процента до 100 раз, за счет отбрасывания избы­точной информации, не влияющей на отображение документа. Но практически диапазон сжатия значительно уже: от 5 до 15 раз. Хотя алгоритм сжатия изо­бражения этого формата и ухудшает качество, он может быть легко настроен на минимальные, практически незаметные для человеческого глаза, потери. Распа­ковка JPEG-файла происходит автоматически, во время его открытия. Между качеством изображения и степенью уплотнения существует обратная зависимость: чем более высокую степень сжатия для результирующего изображения вы зададите, тем хуже будет его качество.

Существует разновидность формата JPEG, именуемая «прогрессивный JPEG» (p-JPEG). Прогрессивный JPEG отличается от обычного тем, что при выводе на экран изображение появляется почти сразу, но плохого качества, а по мере загрузки качество улучшается. В формате JPEG можно хранить только полно­цветные изображения с глубиной цвета 24 пиксела. Существует также версия JPEG для 32-битных изображений, но она пока мало распространена. Обычно формат JPEGрекомендуют использовать для фотографий, на которых снижение качества, сопутствующее сжатию по этой технологии, наименее заметно.

Формат GIF (Graphics Interchange Format - Формат для обмена графической ин­формацией) был разработан специалистами компьютерной сети CompuServe в 1987 году с целью ускорения пересылки файлов по телефонным линиям. Требо­валось создать такой формат, который бы содержал достаточно хорошо упако­ванные данные. Алгоритм распаковки должен был быть при этом встроен во все программы, которые будут работать с этим форматом: утилиты просмотра, гра­фические редакторы и т.п. Именно такой подход и реализован в формате GIF.

Хотя с тех времен пропускная способность модемов увеличилась во много раз, требования к компактности файлов, передаваемых по сетевым каналам, отнюдь не отошли на второй план. Web-страница, которая со всем своим текстом и гра­фикой занимает свыше 40-50 килобайт, уже считается «большой» - и далеко не каждый посетитель дождется, пока она целиком загрузится в его браузер. Профессионализм Web-дизайнера как раз и заключается в том, чтобы отыскать должный баланс между художественностью, информативностью страницы и ее объемом. Вот почему формат GIF, главным достоинством которого является ма­лый размер файлов, до сих пор сохраняет свое значение основного графического формата World Wide Web. Из распространенных графических форматов GIF однозначно уступает по степени сжатия только формату JPEG.

Конечно, GIF - не единственный формат, позволяющий сжимать графические данные; кое-какие способности к сжатию есть у форматов BMP, PCX, TIFF и многих других. Однако GIF - один из немногих форматов, использующих алго­ритм сжатия, почти не уступающий по эффективности программам-архиваторам. Иными словами, GIF-файл не нужно архивировать, так как это редко дает ощутимый выигрыш в объеме.

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

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

В 1989 году появилась новая, усовершенствованная версия формата GIF, в которой используется «постепенный» показ изображения по мере его загрузки из сети. Эта технология заключается в том, что при показе специально записанных GIF-файлов строки изображения выводятся на экран не подряд, а в определенном порядке: сначала каждая 8-я, затем 4-я и т.д., то есть полностью изображение показывается в четыре прохода. Такая система показа позволяет понять, что изображено на картинке еще до того, как она полностью загрузится, что очень важно на медленных линиях связи. Нечто подобное используется в телевидении для передачи одного полного кадра за два прохода луча - так называемая «че­ресстрочная развертка». Поэтому такие изображения были названы чересстроч­ными (interlaced). Приняв из сети очередной проход чересстрочного GIF-файла, браузер не только рисует каждую его строку на своем месте, но и заполняет ко­пиями предыдущей строки все промежутки между строками, иначе после перво­го прохода изображение было бы почти невидимым. Поэтому сначала чересст­рочный GIF состоит из широких горизонтальных полос, которые постепенно сужаются по мере проявления изображения.

Формат PNG (Portable Network Graphics - Переносимая сетевая графика) поддер­живается поздними версиями браузеров, например, Netscape Navigator, начиная с версии 4, но широкого распространения пока не получил. Этот формат, осно­ванный на вариации алгоритма сжатия без потерь качества, в отличие от GIF сжимает растровые изображения и по горизонтали, и по вертикали, что обеспе­чивает более высокую степень сжатия; кроме того, он поддерживает цветные графические изображения с глубиной цвета до 48 бит включительно.

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

PNG позволяет хранить полную информацию о степени прозрачности в каждой точке изображения в виде так называемого альфа-канала. Каждый пиксел PNG-файла, вне зависимости от его цвета и местоположения, может иметь любую градацию прозрачности: от нулевой - полная непрозрачность, до абсолютной невидимости.

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

PNG-формат не дает возможности создавать анимационные ролики. Поэтому для хранения анимации или нескольких изображений в одном файле использу­ется вариация формата PNG - формат MNG (Multiple Network Graphics - Множе­ственная сетевая графика). В настоящее время разработчики формата PNG рабо­тают над новым форматом PNP(пинап) (Portable Network Photography - Переносимая сетевая фотография), произносится «пинап», который предназначен для хране­ния фотографических изображений и обладает мощным алгоритмом сжатия с потерей качества.

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

Чтобы любое изображение можно было использовать на 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