Марта
Курс, 81 группа «Машинист крана (крановщик)»
Преподаватель: Черепанова А.А.
Тема: Векторные и растровые форматы (2 часа)
Цель: познакомить со сферами применения компьютерной графики;
дать представление о типах компьютерных изображений;
познакомить с принципами формирования растровых и векторных изображений;
Ход урок
К растровой графике: GIF, JPEG, PNG и WebP.
Основные характеристики, которые нас будут интересовать при выборе формата — это качество изображения, вес и количество цветов. В вебе тяжёлые изображения непрактичны, поскольку они долго загружаются. Чтобы уменьшить вес файла, используются алгоритмы сжатия. Сжатие может быть с потерями и без потерь. При выборе подходящего формата изображения, нам нужно найти баланс между весом файла и качеством картинки, так как некоторые алгоритмы сжимают изображения с потерей качества. Теперь рассмотрим каждый из форматов подробнее.
GIF (Graphics Interchange Format)
GIF имеет цветовую палитру, состоящую из 256 цветов. Алгоритм GIF выбирает 256 наиболее используемых в исходном изображении цветов, а все остальные оттенки создаются путём подмешивания — подбора соседних пикселей таким образом, чтобы человеческий глаз воспринимал их как нужный цвет. По этой причине GIF не подходит для хранения полноцветных изображений и фотографий.
Таким образом, формат GIF подходит если:
· изображение не многоцветное;
· нужна простейшая прозрачность;
· нужна анимация.
JPEG (Joint Photographic Experts Group)
Он был разработан для сжатия и хранения полноцветных фотографий. Поддерживает более 16 миллионов цветов.
Формат JPEG сжимает изображения с потерей качества. Можно получать JPEG изображения очень маленького веса, но только за счёт ухудшения качества картинки, можно получить и очень качественные JPEG, но тогда картинка будет слишком тяжёлой. Поэтому главная задача при работе с JPEG — подобрать такой уровень качества, чтобы вес был небольшой и качество картинки было приемлемым (обычно, это диапазон от 60 до 70, но нужно тестировать на каждой картинке).
Таким образом, формат JPEG лучше подходит для:
· полноцветных изображений, фотографий;
· изображений, с плавным переходом яркости и контраста;
· рисунков с большим количеством разноцветных деталей.
PNG (Portable Network Graphics)
PNG является относительно недавним форматом, который был введён как альтернатива для GIF-файлов.
PNG является форматом сжатия без потерь и позволяет сохранять изображения, в которых требуется особенная чёткость. Например, чертежи и печатный текст.
Итак, формат PNG подходит для:
· изображений с прозрачностью и полупрозрачностью;
· когда необходима повышенная точность полноцветных изображений;
· изображений с резкими переходами цветов.
WebP.
Главная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.
Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.
Особенности WebP:
· сжимает изображения без потерь лучше, чем PNG
· сжимает изображения с потерями лучше, чем JPEG
· поддерживает прозрачность (альфа-канал).
Иногда WebP сжимает изображение даже лучше, чем заявляет Google.
JPEG: 44 килобайт
WebP: 26 килобайт. Если изображение не видно, значит ваш браузер не поддерживает формат WebP.
Ввиду относительной новизны формата, не все браузеры умеют с ним работать. На сегодняшний день WebP поддерживается только Chrome, Opera и Firefox.
Векторные форматы
SVG (Scalable Vector Graphics)
Основным форматом векторной графики в Интернете является SVG. В этом формате можно описать не только статичную, но и динамичную картинку (анимация), смешать созданные векторы с растровой картинкой. Благодаря тому, что каждая фигура является для интернет-браузера элементом DOM, c помощью JavaScript можно описывать достаточно сложные сценарии, взаимодействовать с пользователем.
Сокращение от англ. Scalable Vector Graphics. Является открытым стандартом, т.е. в отличие от большинства других форматов, SVG не является чьей-либо собственностью. Это основанный на XML язык разметки, предназначенный для описания двухмерной векторной графики. Формат поддерживается многими веб-браузерами и может быть использован при оформлении веб-страниц. К сожалению, формат не обеспечивается высокого качества в отношении сложных рисунков и имеет ограничения по сфере своего использования.
SVG переводится как — масштабируемая векторная графика. Формат существует с 1999 года.
Размер объектов SVG намного меньше размера растровых изображений, а сами изображения не теряют в качестве при масштабировании. В отличие от растровых форматов мы можем взаимодействовать с изображениями в формате SVG — при помощи CSS можно изменять параметры графики: цвет, прозрачность или границы, а при помощи JavaScript — анимировать изображение.
SVG поддерживается почти всеми браузерами за исключением Internet Explorer 8 и ниже, но и это можно решить подключением JavaScript-библиотек, например, SVGeezy.
Формат SVG отлично подходит для малоцветных схем, логотипов и иконок.
Таким образом, формат SVG подходит если:
· нужно анимировать части изображения;
· изменять цвет элементов изображения;
· необходимо масштабировать изображение без потерь.
Ai
Формат обеспечивает очень высокое качество рисунков, но по ряду параметров плохо совместим с другими программами (например, различные эффекты Adobe Illustrator и градиентная заливка могут не передаваться в другие форматы).
Cdr
Векторный формат файлов, создаваемых программой CorelDraw. Формат обеспечивает очень высокое качество рисунков, но по ряду параметров плохо совместим с другими программами.
Cmx
Corel Presentation Exchange — формат графических программ корпорации Corel, предназначенный для передачи рисунков между разными программами. Формат поддерживается, начиная с версии CorelDraw 6.
Eps
Относительно универсальный векторный формат файлов, поддерживаемый большинством векторных редакторов — CorelDraw, Adobe Illustrator, Macromedia FreeHand и различными узкоспециализированными программами (для плоттерной резки, гравировки, выжигания на дереве и т.д.). Формат имеет много версий и, к сожалению, каждая программа поддерживает его только до опеределенной версии (например, CorelDraw поддерживает только версии до EPS 7). Формат обеспечивает очень высокое качество рисунков.
Swf
Flash-формат, который может просматриваются с помощью Flash Player, устанавливамый как plugin в браузер.
Wmf
Универсальный векторный формат, поддерживаемый большинством векторных редакторов. К сожалению, формат не обеспечивает высокое качество для сложных рисунков и имеет очень ограниченное число поддерживаемых эффектов, поэтому для профессионального использования не подходит и используется преимущественно частными пользователями. Формат поддерживается рядом веб-браузеров и может быть использован при оформлении веб-страниц.
Где применяется компьютерная графика?
От чего зависит качество растрового изображения?
Какие изменения происходят с растровым изображением при масштабировании?
Какие изменения происходят с векторным изображением при масштабировании?
Контрольные вопросы:
1. На какие типы делятся графические изображения?
2.Из каких элементов строится растровое изображение?
3. Из каких элементов строится векторное изображение?
Д/з: законспектировать и ответить на контрольные вопросы