При создании сайтов используются в основном три формата графических файлов: GIF (расширение.gif), JPEG (расширение.jpg) и PNG (расширение.png). Их свойства, преимущества и недостатки надо обсудить подробнее.
Самым распространенным форматом графических файлов для HTML-документов является GIF - Graphic Interchange Format. Для кодирования цвета в нем используется 8 бит, то есть допускается только 256 различных цветов или столько же градаций серого. Наборы цветов (палитры) могут быть различными. Один GIF-файл может содержать несколько изображений, позволяющих создавать движущиеся или изменяющиеся образы. В этом случае требуется согласование палитр различных изображений, составляющих один файл. Похожая проблема возникает, если монитор работает в режиме 256 цветов, а на экране одновременно воспроизводятся несколько изображений с разными палитрами. Очевидно, что для части картинок качество цветопередачи будет ухудшено.
Само по себе 8-битовое кодирование цвета предполагает, что размер графического файла будет относительно небольшим. Но, кроме того, для уменьшения размера файла используется еще и сжатие изображения. Существует две разновидности GIF-файлов: сжатые и обычные, в которых сжатие отсутствует. Компактность файла и дополнительные преимущества стали причиной того, что данный формат прочно утвердился в качестве стандарта де-факто для Интернета.
Дополнительное преимущество этого формата заключаются в том, что хранение информации в файле может быть организовано таким образом, чтобы при выводе рисунка происходило чередование строк (интерлейсинг). То есть вначале будут выводиться строки с номерами 1, 5, 9 и т. д., затем с номерами 2, 6, 10 и т. д., и так до тех пор, пока весь рисунок не будет отображен. Для наблюдателя такой рисунок вначале кажется нечетким, а затем четкость изображения увеличивается. При передаче данных по сети это особенно выгодно, так как еще до окончания передачи файла пользователь имеет возможность увидеть изображение, хотя и в несколько размытом виде.
Еще одно преимущество GIF - возможность сделать часть изображения прозрачной. Прозрачным может стать только один цвет. Так, создание прозрачного фона позволяет более естественно вписать рисунок в документ и избежать появления прямоугольника, обозначающего границы изображения.
Этот формат используется в основном для размещения на Интернет-странице графических элементов оформления – кнопок, значков, обозначений, стрелок, а также анимированных баннеров.
Формат JPEG – основной формат для размещения фотографий на сайтах. У него практически нет ограничений по количеству отображаемых цветов. Плюс этого формата в том, что используется алгоритм сжатия, благодаря которому объем файла во много раз меньше, чем для того же изображения в таких форматах, как TIFF и BMP. В сжатии заключен и минус этого формата. Изображения, созданные в графических редакторах, таких как Adobe Photoshop, с использованием контрастных линий, не всеми браузерами отображаются качественно.
В статье "Представление графических данных" приведены рекомендации по использованию форматов GIF и JPG и предсталена очень наглядная иллюстрация того, какой объем файла получается при сохранении одного и того же изображения в этих форматах.
В качестве альтернативы формату JPEG был внедрен формат PNG. Этот формат является основным форматом графического редактора Macromedia (Adobe) Fireworks, поддерживает слои, объекты, надписи, вставляется в Интернет-страницы без конвертации. В дальнейшем могут свободно редактироваться отдельные слои и объекты графического файла. Этот формат характеризуется наилучшим качеством изображения, однако, во-первых, старые браузеры его не поддерживают и, во-вторых, не все браузеры поддерживают прозрачность фона, реализованную в формате. Одним из существенных недостатков является то, что изображение в формате PNG имеет существенно больший объем, чем такое же изображение в формате JPEG.
10. ТЕХНОЛОГИИ СОЗДАНИЯ САЙТОВ С ИСПОЛЬЗОВАНИЕМ WYSIWYG-РЕДАКТОРОВ. ДВИЖОК САЙТА.
WYSIWYG – это аббревиатура от английских слов What You See Is What You Get, что переводится как «что видишь, то и получишь». То есть, речь идет о среде разработки, в которой пользователь по мере своей работы может сразу же видеть примерный результат своих усилий.. С помощью подобных приложений можно создавать код на разных языках программирования и верстки – HTML, CSS, PHP и др.
Список WYSIWYG-редакторов HTML-кода[править | править исходный текст]
Adobe (Macromedia) Dreamweaver
Microsoft FrontPage
Microsoft SharePoint Designer
Microsoft Expression Web
Mozilla Composer
Kompozer (основан на Nvu)
WYSIWYG Web Builder 5
Под движком сайта понимают систему управления сайтом, а именно управление контентом сайта, администрирование сайта. Система управления сайтом предназначена для упрощения чисто технической, черновой, монотонной работы веб-дизайнера. Чаще всего эту задачу решают программы-редакторы. Движок сайта может располагаться как на сервере, так и на компьютере веб-дизайнера. Возможно расположение части движка на сервере, а части - на компьютере веб-дизайнера. В случаях, когда движок сайта располагается на сервере, он, чаще всего, представляет собой базу данных. В базе данных содержится контент сайта, а также информация, описывающая макеты страниц сайта, разграничение права доступа и т.д. При вызове страницы сайта программный модуль, который должен показать эту страницу, в зависимости от полученных параметров, выбирает из базы данных необходимую информацию (содержимое, ссылки и т. д.), генерирует веб-страницу, которая и показывается посетителю.
Движки сайта можно разделить на две группы:
Движки для конкретных сайтов и для конкретных задач .
Универсальные движки сайтов. Рассчитаны для решения многих задач. Часто называются программами-редакторами. Создав сложный и универсальный движок сайта, и передав его владельцу сайта, веб-дизайнер тем самым предоставляет ему возможность заниматься созданием сайта полностью самостоятельно. В этом случае уместен вопрос: зачем тогда нужно обращаться к веб-дизайнеру?
11. ТИПЫ WEB-САЙТОВ
Сайт является набором веб-страниц, объединенных общей тематикой и связанных между собой гиперссылками, единой системой навигации. Прикладным протоколом для передачи гипертекста (веб-страниц) является http (https), который указывается в URL или адресе любого ресурса (документа, файла) в Internet. Общий вид URL: протокол://хост-компьютер/имя файла (например: http://lessons-tva.info/book.html).
Типы сайтов
В зависимости от технологии создания можно выделить следующие типы сайтов:
1. Статические сайты , содержащие статические HTML или XHTML страницы. Статические веб-страницы - это статические файлы (набор текста, таблиц, рисунков и т.д.), которые создается с помощью языка разметки HTML (имеют расширение.html или.htm) и хранятся в готовом виде в файловой системе сервера.
2. Динамические сайты , в которых веб-страницы генерируются или формируются (создаются динамически) в процессе исполнения запроса пользователя. Динамические сайты бывают двух типов. В первом типе сайтов, веб-страницы генерируются или формируются из данных хранящихся на сервере в базе данных. Во втором типе сайтов веб-страницы генерируются на стороне клиентского приложения (в браузере).
3. Flash-сайты – это интерактивные приложения, разработанные в среде Macromedia Flash. Основным инструментом разработки flash-программ является векторная графика (интерактивная векторная анимация для Web). Flash придает сайтам динамичность и интерактивность.
4. Комбинированные сайты, в которых используются вышеизложенные технологии создания сайтов.
Сайты по взаимодействию пользователя с ресурсами веб-страницы можно разделить на пассивные и активные или интерактивные.
Пассивные сайты – это сайты с пассивными веб–страницами. В пассивных сайтах пользователь имеет возможность только просматривать информацию на веб-страницах.
Интерактивные сайты – это сайты с активными веб-страницами. При работе с интерактивными веб-страницами пользователь имеет возможность обмениваться данными с сервером, участвовать в интерактивном диалоге.
Статические сайты с пассивными веб-страницами
Технология создания веб-страницы статических сайтов: язык HTML (Hyper Text Markup Language), который является языком разметки гипертекста и каскадные таблицы стилей CSS (Cascading Style Sheets). CSS используется для оформления и форматирования различных элементов веб-страниц, в результате чего значительно снижают размеры веб-страниц.
Создание веб-страниц статических сайтов - это трудоемкий процесс. Статические сайты с пассивными веб-страницами создаются вручную, с помощью какого – либо редактора HTML в файловой системе компьютера, потом загружаются на сайт. Создание новых веб-страниц или редактирование существующих страниц пользователь выполняет на ПК в редакторе, а затем вновь загружает на Web-сайт.
В основном статические сайты с пассивными веб-страницами применяются для создания небольших и средних сайтов с постоянной структурой и внешним видом страниц (но каждая страница может иметь свой шаблон оформления), которые можно размещать на любых хостингах, в том числе на бесплатных, которые не поддерживают работу скриптов. Обучение школьников и студентов основам создания сайтов целесообразно начинать с создания статических сайтов с пассивными страницами, т.е. с изучения языка разметки HTML и каскадных таблиц стилей CSS.
Для создания сайта используют различные средства: редакторы текста типа Блокнот, визуальные редакторы типа Microsoft FrontPage, Macromedia Dreamweaver и множество других редакторов, а также конструкторы сайтов (дизайнеры). Конструкторы веб-сайтов размещаются на некоторых сайтах в сети Интернет.
Для обучения целесообразно использовать редактор Microsoft FrontPage - это визуальный HTML редактор, который входит в состав приложений Microsoft Office. Но создание реального сайта лучше выполнять в русифицированном редакторе Macromedia Dreamweaver 8 с использованием технологии CSS. Необходимо отметить, что с целью быстрой загрузки веб-страниц их размеры не должны превышать 20 Кбайт.
Графические материалы для сайта - это общее название всех фотографий, рисунков, чертежей, диаграмм и т.п., которые предназначены для размещения на сайте. Часто их также называют рисунками и графическими рисунками.
Прежде чем добавлять рисунки на веб-страницу, необходимо определить используемый формат.
Файл, содержащий рисунок, в нормальном состоянии часто бывает слишком велик по размеру для быстрой загрузки. Поэтому необходимо уменьшать размер файла с помощью сжатия.
Точечные и векторные рисунки Точечные рисунки (часто называемые растровыми)
Образуются набором точек, наподобие того, как закрашенные квадратики образуют рисунок на листе миллиметровки.
- Точечные рисунки создаются и редактируются в графических редакторах.
- Точечные рисунки - все сканированные изображения и фотографии. При увеличении их размера теряется четкость, и становятся заметны отдельные точки, образующие изображение.
- Отображение цветов на точечном рисунке можно изменять путем настройки яркости и контрастности, путем преобразования цветов в оттенки серого или черно-белого изображения, а также путем создания прозрачных областей.
- Для изменения конкретных цветов в точечном рисунке необходима программа редактирования фотографий.
Точечные рисунки часто сохраняются с расширением BMP, PNG, JPG или GIF.
Создаются из линий, кривых, прямоугольников и других объектов.
Допускается редактирование, перемещение и изменение порядка отображения отдельных линий. При изменении размеров векторного рисунка компьютер прорисовывает линии и фигуры заново так, чтобы сохранялась исходная четкость и перспектива.
Векторные рисунки - автофигуры . Автофигуры представляют собой набор типичных фигур, включающий такие базовые фигуры, как прямоугольники и окружности, а также различные линии, соединительные линии, объемные стрелки, компоненты структурных схем, выноски, звезды и ленты.
Линии и фигуры, из которых состоят векторные рисунки, можно группировать и разгруппировывать, изменять порядок их отображения, а также изменять цвет одной или всех частей рисунка.
Векторные рисунки сохраняются в формате приложения, используемого для их создания. Например, в формате метафайлой.
Метафайлы записываются как совокупность линий, а не пикселов, что позволяет при их обработке избегать искажений, характерных для точечных рисунков.
В Microsoft Windows метафайлы сохраняются с расширением WMF.
В основном на веб-страницах используются рисунки в форматах GIF и JPEG (стандартные форматы файлов для веб-страниц), и, с недавних пор, PNG. Существует много факторов, определяющих использование того или иного формата для каждого рисунка. Выбор зависит от используемого типа рисунка, от размера файла, от размера файла рисунка и от способа загрузки изображения.
Одно из преимуществ формата сжатия GIF - возможность чередования строк рисунка для улучшения его загрузки в обозревателе.
Рисунок в формате GIF с чередованием сначала загружается с низким разрешением, а затем, по мере появления целого рисунка, его качество постепенно улучшается. Таким образом, пользователь сможет увидеть суть изображения перед тем, как изображение появится целиком.
Другая полезная сторона использования рисунков в формате GIF - фон рисунка (один из цветов) может быть сделан прозрачным , чтобы видеть цвет фона текущего окна обозревателя.
Формат JPEG обычно используется для рисунков высокого качества, содержащих тысячи и миллионы цветов (до 16,7 миллионов оттенков).
Удобство использования рисунков JPEG заключается в том, что, изменяя качество рисунка, можно управлять степенью сжатия файла. Чем ниже качество, тем выше степень сжатия файла и, следовательно, меньше его размер.
Рисунки в формате JPEG позволяют использовать большую степень сжатия по сравнению с форматом GIF, обеспечивая более быструю загрузку больших рисунков. Однако обозреватель способен загружать рисунки в формате JPEG только линейно, от верхней строки к нижней.
Формат PNG-8 похож на формат GIF, однако в первом лучше реализована поддержка 8-разрядных цветов. Обеспечивает эффективное сжатие областей постоянного цвета с сохранением четкости в штриховой графике, логотипах или иллюстрациях с текстом. Этот формат не очень широко распространен и поддерживается не всеми обозревателями.
Формат PNG-24 также похож на формат GIF и поддерживает 24-разрядную цветовую палитру. Подобно формату JPEG формат PNG-24 сохраняет широкую гамму и тонкие переходы яркости и оттенков, присутствующих на фотографиях. Формат PNG-24, как и форматы GIF и PNG-8, сохраняет четкость деталей в штриховой графике, логотипах и иллюстрациях с текстом. Этот формат не распространенный и не все обозреватели его поддерживают.
Формат PDF - один из форматов для передачи электронных документов через Интернет.
Документ, открытый в формате PDF полностью сохраняет внешний вид и структуру оригинала (макет, шрифты, графика) независимо от того, на какой платформе (Win, Mac, Unix) был создан, и каким приложением был открыт файл.
Использование электронных документов в этом формате позволяет их успешно распечатывать с сохранением текста, шрифтов и т.д. Беспокоиться о русификации своего компьютера при этом не нужно. Все необходимые русские шрифты уже встроены в документы, записанные в формате *.pdf.
В PDF-документ могут встраиваться интерактивные элементы - гиперссылки, видео- и аудиофайлы, кнопки и поля для ввода текста.
Для просмотра или печати необходима программа Adobe Acrobat Reader, которая распространяется бесплатно и может быть скачена с сервера фирмы-разработчика www.adobe.com. Данную программу часто можно найти на большинстве дисков с драйверами, на любом диске программного обеспечения компании Adobe Systems, а также при покупке нового компьютера.
GIF Рисунки в формате GIF могут содержать до 256 цветов. Формат GIF наилучшим образом подходит для изображений, в которых содержится малое количество разных цветов, например изображения линий или черно-белые изображения.
JPEG (Joint Photography Experts Group) - Объединенная группа экспертов по машинной обработкефотоизображений.Был зарегистрирован в 1990г.
Кроме того, допускается добавление рисунков в следующих форматах (3-8).
BMP (для Windows и OS/2). Простой растровый формат для среды Microsoft Windows. Такие рисунки состоят из наборов точек и поддерживают до 24 разрядов. BMP формат - третий по популярности после форматов GIF и JPEG.
TIFF (Tagged Image File Format). Формат файлов с высоким расширением на основе тегов. Используется в качестве универсального формата для обмена цифровыми изображениями.
TGA (Truevision Targa Graphics Adaptor). Этот формат поддерживает от 1 до 32 разрядов и такие профессиональные средства, как альфа-канал, настройки цветовой гаммы и встроенные эскизы.
RAS Растровый формат с низкой степенью сжатия, поддерживает до 36 разрядов.
EPS (Encapsulated PostScript). Расширенный формат Post Graphic, позволяющий внедрять файлы рисунков PostScript в другие документы.
PNG (Portable Network Graphics - Переносимая сетевая графика). Этот формат является альтернативой формата GIF. Позволяет создавать либо 8-битовые, либо 24-битовые изображения. Данный формат поддерживает прозрачность для рисунков, содержащих тысячи и миллионы цветов. Однако в некоторых веб-обозревателях для отображения рисунков PNG требуются особые подключаемые модули (подключаемый модуль: программный модуль, интегрируемый в веб-обозреватели для обеспечения работы определенных интерактивных и мультимедийных элементов).
Список типов формата PNG, которые можно использовать:
WMF (Microsoft Windows Metafile). Этот формат поддерживает растровые и векторные данные (векторная графика). Способ представления графических объектов, таких как линии, дуги, окружности и прямоугольники с использованием геометрических формул. Противоположность растровой графике (точечные рисунки), где изображение представляется совокупностью точек, а также данными в формате EPS. Если на страницу добавлен рисунок в формате, отличном от GIF и JPEG, то при ее сохранении рисунок автоматически преобразуется в формат GIF, если он содержит меньше 8 разрядов цвета, или в формат JPEG, если он содержит больше 8 разрядов цвета.
PDF (Portable Document Format - Переносимый формат документа) разработан фирмой Adobe Systems. Файлы, записанные в данном формате, имеют расширение *.pdf.
Графика в web-дизайне
Web-страница мертва без графики. Графические изображения применяются для иллюстрации текстов уже много столетий. Еще на первых рукописных пергаментных свитках, обнаруженных учеными-археологами в руинах городов древности, были найдены сделанные рукой давно ушедших в небытие художников рисунки, несущие как пояснительную, так и чисто декоративную функцию. С изобретением книгопечатания иллюстрации стали неотъемлемой частью практически любых книг, не только художественных, но и научных. Пройдя нелегкий путь от многостраничных рукописей до первых книг, отпечатанных на типографских машинах, во второй половине XX века носители информации обрели еще одну форму, на сегодня самую удобную для хранения и представления человеческих знаний - электронную, перенеся с собой в мир двоичных чисел и графику. А с появлением сети Интернет, позволившей сделать эту информацию доступной для всего человечества, графические иллюстрации, сопровождающие текст, обрели свое второе рождение, поскольку автор каждого сетевого ресурса может сам выбирать для своего проекта любое оформление, соответствующее его эстетическим вкусам.
Безусловно, первые сайты, появившиеся еще в эпоху становления Всемирной сети, представляли собой строгие текстовые документы, главным и единственным компонентом которых являлось их содержательное информационное наполнение. Шло время, и по мере того, как складывались общепринятые ныне в Интернете стандарты на графические изображения, чаша дизайнерских весов склонялась в сторону хорошо иллюстрированных ресурсов, привлекающих посетителей своей красочностью и ярким оформлением. В те времена это было в новинку, и подобно пестрой витрине магазина, такие сайты привлекали внимание зрителя неординарностью представления контента и нестандартностью оформления. Некоторые ресурсы оказались буквально перегружены графикой, которой иногда было даже больше, нежели собственно текста.
Времена менялись, к иллюстрированным проектам привыкли, и пользователям стало надоедать десятками минут дожидаться окончания загрузки какой-нибудь странички, на которую они и заглянули-то, чтобы узнать текущий курс доллар а по отношению к немецкой марке или выяснить прогноз погоды на завтра. Онлайновое время весьма дорого, скорости модемов и пропускная способность линий связи весьма далеки от идеала, да и тратить оплаченные кровными центами секунды впустую никому не хочется. Виртуальная чаша весов качнулась в обратную сторону, достигнув относительного равновесия, которое и наблюдается в Интернете на сегодняшний день. Иными словами, встретить во Всемирной сети неиллюстрированный проект сейчас достаточно сложно (в большинстве случаев это либо литературные тексты, либо технические спецификации и справочники), графика же применяется только тогда и только там, где это действительно необходимо.
Графические компоненты web-страниц по назначению можно условно разделить на три обширные категории: иллюстративная графика, включая дополняющие текст фотографии, пояснительные рисунки, чертежи и схемы, функциональная графика, представляющая собой элементы управления сайтом (кнопки навигации, счетчики и элементы интерактивных форм) и, наконец, декоративная графика - элементы дизайна страницы, включенные в нее «для красоты» и не несущие информационной нагрузки (фоновые рисунки, линии-разделители, выполненные в виде графических файлов заголовки и многое другое).
Сетевые графические форматы
Как говорили И. Ильф и Е. Петров, «статистика знает все». Эта самая всезнающая статистика утверждает, что большинство пользователей Интернета на нашей планете применяют для связи со Всемирной сетью соединение по коммутируемым телефонным каналам при помощи модема. Поскольку это весьма медленный способ связи, время загрузки графического изображения в клиентский броузер в данном случае должно быть как можно меньшим. Действительно, длительное ожидание, когда закончится считывание картинки с сервера, занятие не из приятных. Именно поэтому два наиболее популярных стандарта, в которых хранится 90 % всей графики, представленной ныне в Интернете, это GIF и JPEG. В них заложены различные алгоритмы сжатия изображения с потерей качества, благодаря использованию которых удается значительно уменьшить размер целевого файла.
GIF
В далеком 1978 году двое израильских исследователей Якоб Зив (Jacob Ziv)и Абрахам Лемпел (Abraham Lempel) разработали принципиально новый для того времени алгоритм сжатия информации без потери данных, которому, немудрствуя лукаво, дали полученное из сокращения собственных фамилий и даты завершения своего проекта название: LZ78. Информация о принципах построения этого алгоритма была общедоступной, и спустя несколько лет американский программист Терри Уэлч (Terry Welch) усовершенствовал его, добавил в обозначение первую букву своей фамилии и запатентовал новый алгоритм под названием LZW, также предоставив свою разработку для использования всем желающим.
Одним из таких «желающих» оказался сотрудник компании CompuServe Inc.Боб Берри (Bob Berry), взявший LZW в качестве основы для созданного им в 1987 году принципиально нового графического формата GIF (Graphic Interchange Format). Созданная Терри Уэлчем компания Unisys, которой и принадлежали авторские права на алгоритм LZW, взимала плату за его использование только с производителей аппаратного обеспечения для компьютеров, в котором применялся данный стандарт, например, с изготовителей модемов. Разработчики программного обеспечения «комиссионными сборами» не облагались.
Однако зимой 1994 года компания Unisys, начавшая испытывать финансовые проблемы, объявила LZW коммерческим стандартом, использование которого требует оплаты. Это автоматически сделало GIF единственным в мире «платным» графическим форматом, что вызвало волну недовольства среди пользователей Интернета, поскольку практически на всех современных web-сайтах так или иначе применяются элементы GIF. Тем не менее GIF чрезвычайно широко используется в Интернете и сейчас, причем пользователи не обязаны оплачивать кому бы то ни было возможность разместить на своей страничке изображение в данном формате, так как упомянутые выше финансовые претензии касаются, в первую очередь, производителей работающего с GIF программного обеспечения. Ситуация с дальнейшей судьбой этого стандарта до сих пор остается не разрешенной.
Благодаря возможностям алгоритма LZW стандарт GIF позволяет значительно сокращать объем итогового графического файла по сравнению с исходным изображением. Достигается это методом смешения сходных оттенков в один. Если, например, в составе рисунка имеется участок, состоящий из нескольких сходных полутонов, к примеру, голубого, светло-голубого и темно-голубого цвета, они будут кодированы одним оттенком - голубым. Информация об изображении в файле стандарта GIF записывается построчно то есть представляет собой массив описаний строк высотой в один пиксел. Именно это свойство GIF, а также то, что данный формат оперирует фиксированной, так называемой индексированной палитрой, причем число цветов в этой палитре не превышает 256,явилось основой для появления двух простых правил, применяющихся в современном web-дизайне. Вот они.
ВНИМАНИЕ Стандарт GIF используется в документах HTML только для отображения так называемой бизнес-графики: диаграмм, логотипов, кнопок, разделительных линий, других элементов оформления страницы. Для размещения на web-сайте фотографий, репродукций картин и изображений с большим количеством цветов и цветовых переходов используется стандарт JPEG.
В упрощенном виде данный закон «web-мастерства» можно сформулировать так: если изображение рисованное, его следует представлять в стандарте GIF, во всех остальных случаях лучше воспользоваться JPEG.
ВНИМАНИЕ Подготавливая рисунок для сохранения его в формате GIF, необходимо избегать следующих художественных приемов: градиентных заливок, размытий, постепенных цветовых переходов с множеством оттенков, а также графических фильтров, обеспечивающих неравномерное смешение нескольких цветов на одном участке изображения, например, эффектов изменения интенсивности освещения, подобных фильтру «блик» редактора Adobe Photoshop.
Это правило продиктовано тем, что алгоритм замещения схожих оттенков одним в формате GIF далеко не всегда работает корректно. Правильнее было бы, наверное, сказать «работает некорректно почти всегда». Поэтому участки со множеством различных оттенков на небольшом физическом пространстве рисунка после сохранения изображения в индексированной палитре будут выглядеть смазанными и «грязными». Этого можно избежать, применяя в своей иллюстрации по возможности однотонные и контрастные цвета. Одно из замечательных свойств стандарта GIF - его уникальная особенность, названная разработчиками «interlace», или, по-русски, «черессторность». Она позволяет загружать картинку с сервера в клиентский броузер не целиком, а частями, причем процедура считывания файла выглядит следующим образом: сначала на экране отображаются первая, пятая и десятая строки, составляющие изображение, затем - вторая, шестая и одиннадцатая и т. д. Таким образом, для пользователя создается иллюзия постепенной загрузки графического элемента: картинка как бы медленно «проявляется» на странице, что иногда бывает очень полезно при включении в документ изображений большого размера -психологически зрителю легче дождаться полной прорисовки иллюстрации, чем несколько минут скучать перед пустым экраном. К тому же еще до полной загрузки файла пользователь может оценить приблизительное содержимое картинки и решить, стоит ли ему дожидаться ее полной прорисовки или нет.
Через несколько лет после создания стандарта GIF, в 1989 году, компания CompuServe выпустила новую версию этого графического формата, получившую название GIF89a. Данная модификация включает в себя еще две уникальные особенности, широко использующиеся в современном Интернете. Первая называется «transparency» и подразумевает создание для изображения прозрачного фона методом сохранения вместе с файлом так называемого альфа-канала, представляющего собой маску прозрачности рисунка. Цвета, помеченные в альфа-канале как прозрачные, станут невидимы в броузерах и большинстве других программ, предназначенных для просмотра изображений. Эта функция необходима, например, при размещении картинок неправильной геометрической формы на странице со сложным фоновым рисунком, когда корректно «подогнать» части изображений друг к другу не представляется возможным.
СОВЕТ Убрать ненужный фон из файла GIF можно, воспользовавшись встроенной процедурой графического редактора Adobe Photoshop. Для этого вменю «файл» необходимо выбрать пункт «экспорт», среди предложенных вариантов отметить «GIF89a» и в появившемся окне с помощью инструмента «пипетка» указать цвета, в которых вы больше не нуждаетесь.
Другая полезная особенность стандарта GIF89a заключается том, что этот формат позволяет сохранять в файле с одним физическим заголовком несколько разных изображений, демонстрируя их на экране последовательно одно за другим, причем с возможностью специфицировать порядок их чередования и временной интервал между сменами кадра. Именно на этом принципе построена весьма распространенная в Интернете GIF-анимация, о которой мы поговорим подробнее в этом же уроке.
JPEG
JPEG (Joint Photographic Experts Group) - графический стандарт, созданный на основе одноименного алгоритма сжатия изображений с потерей качества, кодирующего не идентичные элементы, как алгоритм LZW, а межпиксельные интервалы. В упрощенном виде механизм сжатия изображения в файл формата JPEG выглядит следующим образом. Первой ступенью компрессии является преобразование изображения в цветовой образ LAB, раскладывающий картинку на три независимых канала, один из которых (Lightness) выделен для сохранения значений интенсивности цветов, а два других (А и В) - для запоминания непосредственно цветовой информации. Причем данные о цветах сохраняются в виде шкалы, организованной по принципу непрерывного спектра. Вторя ступень - собственно компрессия: из получившейся цветовой модели удаляются приблизительно три четверти информации о цвете, затем образ дробится на участки размером 8x8 точек и преобразуется в числовой массив данных. Заголовок каждого блока описывает доминирующий цвет участка, остальная информация - менее заметные оттенки. На третьей ступени сжатия из массива данных удаляется определенная часть информации, описывающей второстепенные оттенки, причем количество изымаемых данных зависит от выбранного пользователем качества результирующего изображения. И наконец, готовый файл сжимается согласно алгоритму Хаффмана, который предусматривает замену наиболее часто встречающихся в массиве данных знаков более компактной двух битной кодировкой. Декомпрессия файла JPEG происходит в обратном порядке.
Из всего сказанного можно сделать вполне очевидное заключение: JPEG оптимален для передачи фотографических изображений, а также картинок с большим количеством полутонов и цветовых переходов. Максимальное число цветов, которое может содержать изображение в формате JPEG, достигает 16 миллионов. Очевидно также, что чем выше степень компрессии такого изображения, тем ниже его качество. Web-мастеру, создающему для сайта иллюстрации в формате JPEG, необходимо помнить следующее правило.
ВНИМАНИЕ При изготовлении иллюстраций в формате JPEG рекомендуется избегать использования больших участков, заполненных одним цветом, во избежание появления на изображении постороннего цветового «шума» и «грязи».
Несоблюдение этого правила может повлечь за собой ряд неприятных последствий: например, картинка в формате JPEG, содержащая достаточно большое пространство, заполненное одним цветом, будет выглядеть на экране компьютера «грязно» и неопрятно, фон сохраненного в JPEG логотипа, «подогнанный» под фоновый цвет html-документа, «поплывет» при изменении свойств экранной палитры.
Существует несколько разновидностей стандарта JPEG. Среди них - формат JPEG Baseline Optimized, основанный на более совершенном алгоритме компрессии изображений. Недостатком данной реализации JPEG является то, что она не распознается целым рядом часто используемых приложений. Так называемый Progressive JPEG был оптимизирован специально для представления графики во Всемирной сети, изображения в этом формате сжимаются чуть лучше, чем в стандартном JPEG, но хуже, чем в JPEG Baseline Optimized. Отличительная особенность Progressive JPEG - возможность сохранять графику в чересстрочном режиме, как это реализовано в стандарте GIF.
СОВЕТ При работе со стандартом JPEG следует учитывать, что сжатию с наименьшей потерей качества поддаются изображения, сохраненные с высоким разрешением, от 150 до 300 dpi. В процессе обработки иллюстраций лучше всего сохранять картинку в формате TIFF и переводить в JPEG лишь готовый результат, поскольку каждое промежуточное сохранение файла JPEG на диск приводит к удалению второстепенной информации и ухудшению качества рисунка.
PNG
Описанная чуть ранее «криминальная история» с неожиданным изменением статуса алгоритма сжатия LZW с бесплатного на платный спровоцировала стремление пользователей избавиться от формата GIF, дальнейшая судьба которого становилась все более туманной. С этой целью во второй половине девяностых годов была создана инициативная группа программистов и исследователей, которую возглавил американский специалист по электронным технологиям Том Боутелл (Thomas Bowtell). Перед инициативной группой стояла нелегкая задача: разработать стандарт, который не только включал бы в себя все лучшие качества GIF, нo и превосходил бы его по всем характеристикам, оставаясь при этом совершенно бесплатным для пользователей. Основной областью применения данного формата должен был стать Интернет. Такой стандарт был создан и получил название Portable Network Graphics - PNG, хотя многие пользователи Всемирной сети придумали этой аббревиатуре иную расшифровку: Picture is Not GIF.
PNG, как и GIF, поддерживает interlacing (чересстрочность), но в отличие от последнего не только по горизонтали, но и по вертикали. Палитра PNG не ограничивается 256 цветами, данный формат позволяет создавать изображения с глубиной цвета до 48 бит. Весьма любопытные изменения внесены в режим прозрачности графики: PNG также поддерживает альфа-канал, по состоит он не из одного уровня, как альфа-канал файлов GIF, а из 254 уровней для каждого элемента изображения, с диапазоном прозрачности рт 0 до 99 %. Благодаря этому дизайнер получил возможность создавать картинки с переменной прозрачностью, например, логотипы, фон которых плавно сливается с фоновым цветом html-документа, каким бы тот ни был.
Помимо альфа-канала изображения PNG содержат так называемый блок описания гамма-коррекции. Под переменной «гамма» в данном случае подразумевается некая величина, выражающая зависимость яркости свечения каждой точки экрана пользователя от напряжения на электродах кинескопа, которое берется из файлов управления видеоподсистемой компьютера. Таким образом, при открытии изображения, созданного с помощью IBM-совместимой машины, на компьютере другого производителя, например на Apple Macintosh, в яркость цветопередачи вводится соответствующая поправка, и картинка отображается совершенно идентично на разных типах оборудования. Этим стандарт PNG еще более приблизился к основной идее Интернета единообразию отображения web-страниц на компьютерах от различных производителей.
Поскольку данный формат появился на свет относительно недавно, его поддерживают далеко не все броузеры, в отличие от GIF и JPEG, которые распознаются без проблем любыми программами, предназначенными для отображения графики. PNG поддерживается Microsoft Internet Explorer, и Netscape Communicator.
В данной статье мы поговорим немного про графические форматы используемые в вебе - все они интегрированы с современными браузерами и вы, вне всякого сомнения, с ними сталкивались не раз.
Правильно применяя графику, а так же экспериментируя с ее форматами, можно достичь значительного увеличения скорости загрузки страниц, что положительно отразится на продолжительности пребывания посетителей на сайте.
Несмотря на то, что в настоящее время широкополосное подключение к Интернету не является редкостью, скорость загрузки страниц продолжает оказывать влиять на отношение посетителя к тому или иному ресурсу. Факты говорят о том, что чем быстрее загружается сайт, тем большее внимание посетитель уделяет его контенту.
Итак, начнем с небольшого теоретического ликбеза касательно самих графических форматов.
Флэш рассматривать не будем - ему посвящена
.
Графических форматов чрезвычайно много, но в именно вебе, чаще всего, встречается только пять из них. Это - bmp, tif, gif, jpg, png.
- 1. BMP ( англ. bitmap ) - формат хранения растровых изображений. Вообще-то не один грамотный веб-мастер не станет использовать графику в этом формате для оформления своего сайта (равно как и для контентного наполнения) - размеры несжатой битовой карты чрезвычайно объемны. Просто забудьте о том, что браузеры поддерживают bmp.
- 2. TIFF (англ. Tagged Image File Format ) - формат хранения растровых графических изображений, который стал популярным форматом для хранения изображений с большой глубиной цвета. Этот формат поддерживается всеми браузерами, но из-за весьма крупных размеров в веб-дизайне не используется. Однако, "тиффы" иногда можно встретить в контентном наполнении различных сайтов - например, в качестве демонстрации "на печать" работ различных фотохудожников.
- 3. GIF (англ. Graphics Interchange Format - формат для обмена изображениями ). Максимально допустимая глубина цвета - 8 бит (256 цветов). Этот формат очень хорошо подходит для того, что бы отображать на веб-страницах растровую графику. Огромный выбор вариантов компрессии, а так же палитр сделало этот формат одним из самых распространенных в вебе. Ну а возможность делать анимированные картинки (и использовать их в качестве банеров, меню и проч.) породили целую индустрию гиф-анимации. Формат совместим на 100% со всеми известными на сегодняшний день операционными системами.
- 4. JPEG
(англ. Joint Photographic Experts Group - объединённая группа экспертов в области фотографии
) - является самым распространенным форматом сжатия фотоизображений в вебе. Как следствие, сфера применения этого формата чрезвычайно широка. Максимальная глубина цвета 24 бита (16.7 миллионов цветов). Степень же сжатия присущая «джепегу» чрезвычайно велика. Но, следует помнить, что уже на 70-ти процентном уровне компрессии начинают быть заметными артефакты (потеря качества).
5. PNG (англ. portable network graphics ) - растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования. В данное время, этот формат стал использоваться в вебе чрезвычайно широко, но еще пока не вытеснил jpg и gif. Плюсы png - поддержка палитры вплоть до 32 битов, возможность работать со слоями, добавление мета-даты в файл (авторские права и т.п.). png применяют не только для растровой графики, но и для обычных фотографий.
Оптимизировать свой сайт следует еще на начальном этапе , т.е. еще в тот момент, когда вы собираетесь разрабатывать его макет - это связано с тем, что на стадии верстки вы можете без особых усилий заменить ненужное графическое наполнение на html-таблицы. Использование графического фона должно тоже быть рациональным - всегда старайтесь уменьшить графический файл до максимальных размеров.
Например, в некоторых случаях достаточно сделать графический элемент размером 4x4 пикселя (а не 4X1520).
В процесе создания растровой графики (элементы страницы и т.п.) старайтесь добиться применения наименьшего количества цветов - разумеется, на внешнем виде страницы это никак не должно сказываться.
Например, формат gif имеет 2, 4, 8, 16, 32, 64, 128 и 256 цветов - поэкспериментируйте с этими показателями. Более того, помните, что рекомендуемый формат сжатия для веба - это WebSnap adaptive. Ну а если у вас есть возможность применить черно-белую графику, то обязательно сделайте это - уменьшение объема картинки будет весьма существенным.
Настоятельно рекомендуется экспериментировать с форматом png - зачастую его использование дает несравненно более высокий эффект нежели использование gif. Как уже было сказано в начале статьи, этот формат поддерживается всеми браузерами и, являясь более поздней альтернативой знаменитому "гифу", обладает несравненно более совершенными показателями.
Чрезвычайно важно помнить, что эксперимент с графическими форматами - это залог успеха. Что бы суметь добиться максимального качества сжатия (без потерь красивости веб-страницы и четкости изображения) необходимо использовать в своей работе сразу три формата одновременно, т.е. надо стремиться сочетать на одной странице gif, png и jpg.
Например, gif целесообразно использовать для растровой графики, jpg при работе с фотографиями, png в тех случаях, когда это позволяют обстоятельства, т.к. исключительно посредством эксперимента вы сможете самостоятельно удостовериться в том, когда более всего целесообразней подменять jpg или gif.
Теперь пару слов о распространенных ошибках совершаемых большим количеством веб-мастеров при работе с графикой.
Зачастую эти ошибки носят весьма банальный характер, но негативные последствия от них весьма и весьма ощутимы.
- 1. Если у вас на странице присутствует большой фрагмент графики имеющей один цвет, то целесообразно заменить его на html таблицу с необходимым цветом.
Для этого просто в графическом элементе добавьте прозрачности и расположите его в вышеназванной таблице. Зачастую таким нехитрым способом можно весьма неплохо выиграть килобайты.
- 2. Старайтесь уменьшить до максимума количество мелких графических элементов на странице.
Даже несмотря на то, что вес их и будет не велик, скорость загрузки страницы, состоящей из большого числа элементов, будет очень затруднена - ведь браузеру потребуется время, что бы все скомпоновать.
- 3. Многие веб-мастера забывают о
.
Их применение делает сайт не только более функциональным, но еще и улучшает его визуальные показатели. Иными словами, если имеется возможность выбирать между использованием CSS и графикой, то лучше остановить свой выбор на CSS.
наполнение сайта - статьи о ньансах заполнения вашего сайта различными материалами
Существуют два типа графических файлов, это растровый и векторный, которые имеют различные форматы.
- растровому графическому файлу соответствуют форматы *.bmp, *.tif, *psd, *.gif, *.png, *.jpg;
- векторному графическому файлу соответствуют форматы *.wmf, *.eps, *.cdr, *.ai
Знание форматов файлов – являются основой работы с цифровыми фотографиями т.к. они определяют способ хранения информации в файле (растровый или векторный), а также форму хранения информации (используемый алгоритм сжатия). Сжатие применяется для растровых графических файлов, так как они имеют обычно достаточно большой объем. Сжатие графических файлов отличается от их архивации с помощью программ-архиваторов (гаг, zip, arj и пр.) тем, что алгоритм сжатия включается в формат графического файла.
Основные форматы графических файлов
RAW
В переводе с английского - сырой. Формат использующийся в процессе обработки фотографий, содержит необработанную информацию, поступающую напрямую с матрицы фотокамеры и не имеющий чёткой спецификации. Эти файлы не обрабатываются процессором камеры (в отличие от JPG) и содержат оригинальную информацию о съемке. RAW может быть сжат без потери качества. В отличие от JPG, который был обработан в камере и уже сохранен с сжатием данных – RAW дает широчайшие возможности по обработке фотографии и сохраняет максимальное качество.
Другими словами, под форматом RAW понимаются данные, полученные напрямую с матрицы без обработки.
Разные производители фототехники используют разные алгоритмы для создания RAW в своих камерах. Каждый производитель придумывает собственное разрешение для своего RAW-файла – NEF, NRW – Nikon; CRW, CR2 – Canon.
JPEG (или JPG)
Это самый распространенный формат графических файлов. Свою популярность JPEG заслужил гибкой возможностью сжатия данных. При необходимости изображение можно сохранить с максимальным качеством. Либо сжать его до минимального размера файла для передачи по сети. При сохранении JPEG-файла можно указать степень качества, а значит и степень сжатия, которую обычно задают в некоторых условных единицах, например, от 1 до 100 или от 1 до 10. Большее число соответствует лучшему качеству, но при этом увеличивается размер файла. Обыкновенно, разница в качестве между 90 и 100 на глаз уже практически не воспринимается.
В JPEG применяется алгоритм сжатия с потерей качества. Что это нам дает? Явный минус такой системы – потеря качества изображения при каждом сохранении файла. С другой сжатие изображения в 10 раз упрощает передачу данных. На практике, сохранение фотографии с минимальной степенью сжатия не дает видимого ухудшение качества изображения. Именно поэтому JPG – самый распространенный и популярный формат хранения графических файлов.
TIFF (Tagged Image File Format)
Формат TIFF - формат хранения растровых графических изображений. Изначально был разработан компанией Aldus в сотрудничестве с Microsoft для использования с PostScript. Он позволяет сохранять фотографии в различных цветовых пространствах (RBG, CMYK, YCbCr, CIE Lab и пр.) и с большой глубиной цвета (8, 16, 32 и 64 бит). TIFF используется при сканировании, отправке факсов, распознавании текста, в полиграфии, широко поддерживается графическими приложениями. Имеется возможность сохранять изображение в файле формата TIFF со сжатием и без сжатия. Степени сжатия зависят от особенностей самого сохраняемого изображения, а также от используемого алгоритма. В отличии от JPG, изображение в TIFF не будет терять в качестве после каждого сохранения файла. Но, к сожалению, именно из-за этого TIFF файлы весят в разы больше JPG.
PSD (Photoshop Document)
Photoshop Document (PSD) - оригинальный растровый формат хранения графической информации, использующий сжатие без потерь, созданный специально для программы Adobe Photoshop и поддерживающий все его возможности. Он позволяет сохранять растровое изображение со многими слоями, любой глубиной цвета и в любом цветовом пространстве. Чаще всего формат используется для сохранения промежуточных или итоговых результатов сложной обработки с возможностью изменения отдельных элементов. Так же PSD поддерживает сжатие без потери качества. Но обилие информации, которое может содержать PSD файл, сильно увеличивает его вес.
BMP (Bit MaP image)
Bit MaP image (BMP) - универсальный формат растровых графических файлов, используется в операционной системе Windows. Этот формат поддерживается многими графическими редакторами, в том числе редактором Paint. Рекомендуется для хранения и обмена данными с другими приложениями. Формат BMP один из первых графических форматов. Его распознает любая программа работающая с графикой. BMP хранит данные с глубиной цвета в данном формате от 1 до 48 бит на пиксель, максимальные размеры изображения 65535×65535 пикселей. На данный момент формат BMP практически не используеться ни в интернете (JPG весит в разы меньше), ни в полиграфии (TIFF справляеться с этой задачей лучше).
GIF (Graphics Interchange Format)
формат хранения растровых графических изображений. Формат GIF способен хранить сжатые данные без потери качества в формате до 256 цветов. Включает алгоритм сжатия без потерь информации, позволяющий уменьшить объем файла в несколько раз. Изображение в формате GIF хранится построчно, поддерживается только формат с индексированной палитрой цветов. Рекомендуется для хранения; изображений, создаваемых программным путем (диаграмм, графиков и так далее) и рисунков (типа аппликации) с oгpaниченным количеством цветов (до 256). Используется для размещения графических изображений на Web-страницах в Интернете.
PNG (Portable network graphics)
Растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования. В отличии от GIF, у PNG есть поддержка альфа-канала и возможность хранить неограниченное количество цветов. PNG сжимает данные без потерь, что делает его очень удобным для хранения промежуточных версий обработки изображений. Используется для размещения графических изображений на Web-страницах в Интернете.
JPEG 2000 (или jp2)
Графический формат, который вместо дискретного косинусного преобразования, характерного для JPEG, использует технологию вейвлет-преобразования, основывающуюся на представлении сигнала в виде суперпозиции некоторых базовых функций - волновых пакетов. В результате такой компрессии изображение получается более гладким и чётким, а размер файла по сравнению с JPEG при одинаковом качестве уменьшается ещё на 30%. Говоря простым языком, при одинаковом качестве размер файла в формате JPEG 2000 на 30% меньше, чем JPG. При сильном сжатии JPEG 2000 не разбивает изображение на квадраты, характерные формату JPEG. К сожалению, на данный момен этот формат мало распространён и поддерживается только браузерами Safari и Mozilla/Firerox (через Quicktime).
WMF (Windows MetaFile)
Универсальный формат векторных графических файлов для Windows-приложений. Используется для хранения коллекции графических изображений Microsoft Clip Gallery.
CDR (CorelDRaw files)
Оригинальный формат векторных графических файлов, используемый в системе обработки векторной графики CorelDraw.
AI (AdobeIllustrator files)
Оригинальный формат векторных графических файлов, используемый в системе обработки векторной графики AdobeIllustrator.
EPS (Encapsulated PostScript)
Формат векторных графических файлов, поддерживается программами для различных операционных систем.
Вот практически и все самые распространенные форматы графических файлов , которые должен знать уважающий себя фотограф и дизайнер.
