Графика и анимация в Web распространенные форматы и программы
JPEG (Joint Photographic Experts Group) – популярный графический формат, применяемый для хранения фотоизображений. Объединенная группа экспертов по фотографии – рабочая группа, образованная международными организациями ISO (International Organization for Standardization), IEC (International Electrotechnical Commission)и ITU-T (International Telecommunication Union Telecommunication sector) с целью разработки эффективных цифровых форматов сжатия для фотографических (и подобных им) изображений.
спецификация JFIF (JPEG File Interchange Format, разработана в 1991 г. специалистами компании C-Cube Microsystems) предполагает использование преобразования из RGB в YUV – цветовая модель, в которой цвет представлен как 3 компоненты – яркость (Y) и две цветоразностных (U и V). Яркостная компонента содержит изображение в оттенках серого, остальные компоненты содержат информацию для восстановления требуемого цвета.
*. jpg 16, 7 млн. оттенков малопригоден для сжатия чертежей, текста и знаковой графики (резкий контраст между соседними пикселами приводит к появлению заметных артефактов) при высоких степенях сжатия возникают артефакты: изображение рассыпается на блоки размером 8 x 8 пикселов на контрастных контурах и границах изображения возникают артефакты в виде шумовых ореолов.
GIF (Graphics Interchange Format) — популярный формат графических изображений. разработан в 1987 г. фирмой Compu. Serve для передачи растровых изображений по сетям, в 1989 г. модифицирован. GIF использует формат сжатия LZW (Алгоритм Лемпеля – Зива – Велча), оптимизированный для сжатия изображений, строки которых имеют повторяющиеся участки (в которых много пикселей одного цвета по горизонтали). Сжимает данные путем поиска одинаковых последовательностей во всем файле, выявленные последовательности сохраняются в таблице, им присваиваются более короткие маркеры.
*. gif 256 оттенков Осуществляет сжатие без потерь Поддерживает чересстрочность Прозрачность (один из цветов в палитре может быть объявлен «прозрачным» в браузере сквозь пиксели, окрашенные «прозрачным» цветом будет виден фон). Анимация (состоит из последовательности кадров и слоев).
PNG (portable network graphics) – растровый формат хранения графики, использующий сжатие без потерь по алгоритму Deflate. Создан в 1995 г. , хранит графическую информацию в сжатом виде без потерь. Преимущества перед GIF: неограниченное количество цветов в изображении; поддержка альфа-канала (модель RGBA - 4 байта для каждого пикселя: красный, зеленый, синий и альфа); возможность гамма-коррекции (данные о настройках ПО (информация о гамме) сохраняется в файле); двумерная чересстрочная развертка.
*. png Осуществляет сжатие без потерь Изначально был предназначен лишь для хранения одного изображения в одном файле. Не все браузеры одинаково отображают содержимое png-файлы. Сложности: • частичная прозрачность (альфа-канал); • поддержка прозрачности в палитре; • гамма-коррекция. • поддержка расширений PNG с анимацией. • цветовая коррекция.
При представлении одного и того же изображения в трех форматах можно наблюдать отличия по качеству и размеру файлов: jpg - 78, 4 КБ gif -110 КБ png - 590 КБ
Фрагменты изображения в форматах JPEG и GIF
Программные средства для создания анимации в веб Наиболее распространена программа Adobe Image. Ready – растровый графический редактор, поставлявшийся вместе с Adobe Photoshop (до версии CS 2), разработанным и распространяемым фирмой Adobe Systems c 1998 по 2007 гг.
Image. Ready была предназначена для быстрого редактирования веб-графики (функции создания анимированных GIF, оптимизации изображения, нарезки изображения и генерации HTML). Панель инструментов Image. Ready похожа на панель инструментов Photoshop, но имеет ряд дополнительных функций: • Просмотр документа (Preview Document tool) — возможность просмотра эффектов в Image. Ready, а не в браузере. • Просмотр в браузере по умолчанию (Preview in Default Browser tool) — предпросмотр изображения в окне браузера, в том числе и анимационных эффектов. • Передача изображения в Photoshop (Jump to Photoshop) — открытие изображения в Photoshop.
Панель анимации в Adobe Photoshop CS 5 Простейшая анимация, сохраняемая в формате GIF, создается путем создания в файле нескольких слоев, преобразуемых в кадры
Создание простой анимации Создадим слайд с надписью и сделаем его копию, текст копии модифицируем
После создадим несколько промежуточных кадров, зададим время их воспроизведения
Скачать презентацию Графика и анимация в Web распространенные форматы и
Лекция 2. Графика и анимация в Web.ppt