Белгородский центр Интернет-образования Создание Web-сайтов Подготовка изображений для размещения в Интернете. - презентация

1

2 Белгородский центр Интернет-образования Создание Web-сайтов Подготовка изображений для размещения в Интернете

3 Белгородский центр Интернет-образования Создание Web-сайтов Подготовка изображений для размещения в Web Вопрос 1. Форматы и методы сжатия графической информации Вопрос 2. Оптимизация изображений для размещения в Web Вопрос 3. Создание и сохранение растровых изображений

4 Белгородский центр Интернет-образования Графика – существенный элемент любого сайта, хотя бы в декоративном смысле, а в ряде случаев и жизненно необходимый. Рисунки и графика – это единственное средство Интернета, позволяющее просматривать на экране одновременно изображения и текст. Изображения на Web-странице не должны перегружать ее. Одним из методов поиска изображений, помимо создания, является заимствование их с чужих страниц и сайтов. Используя чужую графику, нужно помнить об авторских правах, которые функционируют в Интернете. Подавляющее большинство графики в WWW представлено в растровой форме. Векторные же изображения приходится трансформировать в растровый вид.

5 Белгородский центр Интернет-образования Поддержка графики броузерами В отличие от HTML для графических форматов нет никаких стандартов. Хотя и можно организовать связь любого графического файла с Web- страницей, но не все из них будут отображаться в броузерах. Сегодняшние Web-броузеры поддерживают многие дополнительные модули (plugins), но для их отображения на компьютере пользователя должно быть установлено специальное программное обеспечение.

6 Белгородский центр Интернет-образования Форматы изображений в Web: GIF – Graphics Interchange Format JPEG – Joint Photographic Experts Group PNG – Portable Network Graphics

7 Белгородский центр Интернет-образования *.gif GIF – наиболее популярный графический формат в Web. Первоначально изобретен для использования в коммерческих интерактивных сетях. GIF стал первым графическим форматом, поддерживаемым в Web. Сжатие файлов производится путем замены последовательности одинаковых символов одним, умноженным на число повторений (алгоритм LZW). GIF ограничен 256-цветной палитрой, т.к. называемый режим индексированных цветов.

8 Белгородский центр Интернет-образования *.jpg JPEG – это стандарт сжатия, разработанный для уменьшения размера файлов с изображениями, содержащими плавные переходы цветовых тонов и оттенков. Обычно используется для фотографий, объемных изображений и графики с эффектами освещения. JPEG сжимает изображения, сохраняя его полную черно-белую версию и большую часть цветовой информации. Является форматом с потерями (lossy).

9 Белгородский центр Интернет-образования *.png PNG (переносимая сетевая графика) – создан относительно недавно (1995 г.). Он должен был улучшить форматы GIF и JPEG. Является форматом без потерь. Позволяет создавать файлы в режиме RGB, а не только индексированных цветов, как GIF. При этом файлы значительно меньше по размеру, чем аналогичные формата JPEG. Сжатие. Обеспечивает от 10 до 30 % экономии по сравнению с GIF. Но экономия зависит от качества PNG- кодировщика.

10 Белгородский центр Интернет-образования Конец вопроса 1. Возврат к оглавлению Возврат к оглавлению Возврат к оглавлению

11 Белгородский центр Интернет-образования Поддержка цветов браузерами Системы управления цветом резервируют 40 цветов для системного программного обеспечения компьютера. 216 – это точное число цветов, с которыми должны работать Web-дизайнеры. Работа вне палитры увеличивает вероятность искажения Web-узла при просмотре. 256 – 40 = 216

12 Белгородский центр Интернет-образования Советы по работе с цветом Если дизайн Web-узла не работает, попробуйте использовать меньшее количество цветов Попробуйте использовать темный текст на светлом фоне Фотографии на Web-узле не обязательно должны быть полноцветными. Подумайте о том, чтобы осветлить их или изменить насыщенность Если вы хотите, чтобы анимация накладывалась на Web-страницу, вам стоит использовать черный или белый цвет фона

13 Белгородский центр Интернет-образования Оптимизация *.gif-изображений Методы оптимизации можно разделить на следующие типы (исключая оптимизацию анимированных GIFов): уменьшение количества цветов оптимизация палитры изображения стилизация изображения искажение размеров изображения фрагментарная оптимизация оптимизация "прозрачных" изображений использование чересстрочной развертки

14 Белгородский центр Интернет-образования Уменьшение кол-ва цветов Для большинства изображений, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это возможно потому, что GIF поддерживает размер палитры меньше 256 цветов. Теоретически, мы можем задать любое число цветов палитры в диапазоне 2-256, например, 37 цветов или 101. Практически же, количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp).

15 Белгородский центр Интернет-образования Уменьшение кол-ва цветов В случае, если мы используем, допустим, только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Поэтому при оптимизации количества цветов нужно ориентироваться на приведенный выше ряд. Это позволит получить более качественную картинку. Сравните два изображения - они не очень-то и отличаются, но левое использует полную палитру в 256 цветов, а правое - палитру, состоящую только из 32 цветов. И, соответственно, различаются размеры файлов (примерно в 2 раза).

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

17 Белгородский центр Интернет-образования Оптимизация палитры изображения Тем не менее, данный способ применяется - в основном для того, чтобы изображения приемлемо выглядели на мониторах с малым количеством цветов (16, 256). Обычно в этом случае пользуются т.н. палитрой Netscape (или безопасной палитрой), состоящей из набора часто используемых цветов и их оттенков. Палитра Netscape гарантирует, что изображения, использующие эту палитру, будут одинаково показаны всеми броузерами. Для иллюстрации - посмотрите на два изображения: левое использует оптимизированную палитру, а правое - фиксированную палитру Netscape.

18 Белгородский центр Интернет-образования Оптимизация палитры изображения Когда используется оптимизированная палитра, графический редактор вначале анализирует рисунок и составляет список всех используемых в изображении цветов. Далее, на основании частоты появления цветов, составляется палитра, которая называется оптимизированной. После этого, уже обычным способом, просматривается рисунок, и цвет пикселя изменяется на ближайший из палитры. Этот способ дает гораздо лучшие результаты (см. рисунок выше), и именно его следует применять, если у Вас нет иных причин для использования фиксированной палитры.

19 Белгородский центр Интернет-образования Оптимизация палитры изображения При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут уместно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг (Dithering). Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека нашим глазам покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга; его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное. Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации :). А все дело в методе хранения изображения форматом GIF.

20 Белгородский центр Интернет-образования Оптимизация палитры изображения Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Дизеринг же как раз и основан на том, что получает недостающие цвета путем "перемешивания" точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно и по возможности не использовать. Ниже приведены две картинки: обе используют фиксированную палитру, но к правой применен дизеринг, а к левой - нет. Посмотрите, как изменилось изображение, а заодно обратите внимание на размеры файлов.

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

22 Белгородский центр Интернет-образования Искажение размеров изображения Следующий метод оптимизации основан на искажении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий из себя черный квадрат (Малевича ;) размером 100x100 пикселей. Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1x1 пиксель) GIF черного цвета. Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100x100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию :). Подобным же образом можно использовать однопиксельные GIFы других цветов, но наибольшую пользу может принести прозрачный однопиксельный GIF. При помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать минимальную ширину (высоту) таблицы и делать другие полезные вещи.

23 Белгородский центр Интернет-образования Искажение размеров изображения Методом искажения очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение шириной (высотой) в один пиксель, а в HTML-документе указать нужную ширину линии (или высоту, если линия вертикальная). Линия, расположенная под абзацем, сделана именно таким способом.

24 Белгородский центр Интернет-образования Фрагментарная оптимизация Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.

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

26 Белгородский центр Интернет-образования Оптимизация прозрачных изображений Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пиксела по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti- aliasing'а на этом же фоне. Ниже приведены два изображения: на левом anti-aliasing проведен на белом фоне, и поэтому ореол не заметен, а на правом - на контрастном синем, и ореол хорошо виден.

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

28 Белгородский центр Интернет-образования Оптимизация *.jpg-изображений Данный формат хранит изображения c цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. У него не так уж много способов оптимизации, точнее сказать, - один: выбрать оптимальный коэффициент сжатия. Для осуществления такой оптимизации нужен графический пакет или утилита, которые позволяют нам регулировать степень сжатия изображения. К сожалению, PhotoShop в базовой конфигурации не позволяет нам свободно регулировать степень сжатия (он предлагает несколько фиксированных значений). Правда, для него можно найти модули, специально подключаемые для осуществления данной операции. Для оптимизации графики лучше воспользоваться программами типа PhotoPaint или PaintShopPro. В этих программах возможно регулирование степени сжатия либо заданием процента потерь, либо заданием значения качества от 0 до 255.

29 Белгородский центр Интернет-образования Оптимальная степень сжатия Для определения оптимальной степени сжатия нужно сохранить фотографию при нескольких значениях коэффициента сжатия, а затем внимательно рассмотреть ее. Критерием потери качества будут так называемые "дрожащие контуры", наиболее заметные в местах контрастных переходов, и появление пятен в областях с плавными переходами (см. рисунок). Тот коэффициент сжатия, при котором искажения еще не видны, но с увеличением его (коэффициента) на одну ступеньку становятся заметными, и будет оптимальным. Размер файла при таком разрешении будет минимальным и без потери качества.

30 Белгородский центр Интернет-образования Оптимальная степень сжатия Если такую операцию проводить с каждой фотографией, то это может занять слишком много времени. Но есть выход - все фотографии можно подразделить на некоторые подтипы (например: черно-белые фотографии, тонированные фотографии, пейзажи и т.д.) и к каждому подтипу подобрать свой оптимальный коэффициент. Впоследствии можно просто применять ранее найденный коэффициент ко всем подобным фотографиям. Ниже представлены две одинаковые фотографии, но только с разной степенью коэффициента сжатия JPG. Слева - фотография, записанная в PhotoShop 5.0 со степенью сжатия 3 (не оптимизированная ), а правая оптимизирована при помощи Ulead SmartSaver Pro. Обратите внимание на размеры фотографий: они различаются в три раза (при одинаковом качестве изображения). Оригинал ~14 kb Jpg- изображение ~4 kb

31 Белгородский центр Интернет-образования Использование прогрессивной развертки И еще один небольшой метод оптимизации JPG - использование прогрессивной развертки. Это практически не сказывается на размере фотографии, но заметно при загрузке. В случае записи изображения в стандартном формате вывод на экран осуществляется горизонтальными полосками, и до загрузки всего изображения мы не сможем определить его смысл. Напротив, при записи файла в прогрессивном формате изображение появляется сразу целиком, но в грубой форме, и постепенно улучшается. Это дает посетителям возможность сразу же оценить фотографию и решить, стоит ли ожидать ее докачки, что позволит сэкономить немного времени при просмотре Ваших страничек.

32 Белгородский центр Интернет-образования Конец вопроса 2. Возврат к оглавлению Возврат к оглавлению Возврат к оглавлению

33 Белгородский центр Интернет-образования Вопрос 3 рассматривается в ходе практической работы с программой Adobe Photoshop

34 Белгородский центр Интернет-образования Конец вопроса 3. Возврат к оглавлению Возврат к оглавлению Возврат к оглавлению

35 Белгородский центр Интернет-образования Автор ресурса: Климачков Александр Всеволодович