Этот курс продолжает обучение тех, кто уже познакомился с основами HTML и CSS. На очереди всякие изыски: отображение сложных элементов, изучение различий между браузерами и графика. В конечном итоге вы сможете сами сверстать страницу любой сложности. Авторы курса — разработчики из Яндекса.
Форматы графических файлов
Loading...
Из курса от партнера Moscow Institute of Physics and Technology
Тонкости верстки
43 оценки
Moscow Institute of Physics and Technology
43 оценки
Курс 3 из 5 — Specialization Разработка интерфейсов: вёрстка и JavaScript
Из урока
Фотошоп и графика
Вы научитесь работать с изображениями и графикой. Узнаете о цветовых моделях, форматах изображений в вебе и как их оптимихировать. Итоговая практическая работа — сверстать с нуля макет.
Познакомьтесь с преподавателями
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
Здравствуйте!
В этом видео я расскажу вам о таких форматах изображения, как SVG, BMP, JPEG,
PNG и новый формат под названием WebP.
Итак, SVG — это язык разметки масштабируемой векторной графики.
Если открыть файл, то можно увидеть следующий код.
Он очень похож на язык разметки HTML,
и в браузере он выведет три кружочка и один квадрат.
В настоящий момент формат SVG поддерживается 96,67 % браузеров.
Для того чтобы вставить SVG код в HTML, нужно написать тег SVG и дальше,
следуя синтаксису SVG, указывать элементы.
Если форматов векторной графики в вебе всего лишь один — это SVG,
то форматов растровой графики гораздо больше.
И первый, наверное, самый популярный формат в Windows — это BMP.
С этим форматом работает огромное количество программ, можно сохранять
черно-белые, серые полутоновые или цветные изображения в системе RGB.
Но у него есть один огромный недостаток — это большой объем.
Поэтому этот формат не используется в вебе.
На протяжении всего видео я буду приводить в пример вот эту картинку,
но в разных форматах.
И в формате BMP она имеет размер 15,6 мегабайт,
что недопустимо для веб-страницы.
Следующий формат изображений — это GIF.
Этот формат был придуман в 1987 году для веба.
И наверное, самая его большая популярность появилась из-за того,
что там есть анимации, причем эти анимации не сменяют полностью изображение,
а меняют только ту часть, которая действительно поменялась.
Этот формат имеет однобитовую прозрачность,
то есть пиксель либо прозрачный, либо непрозрачный.
Также имеет индексную палитру,
но стандарт разрабатывался только для поддержки 256-цветной палитры.
То есть полноцветные изображения будут выглядеть не очень красиво.
Также он имеет некоторые особенности в алгоритме сжатия.
Например, у нас есть два вроде бы похожих изображения — горизонтальная полоска и
вертикальная полоска.
И если мы посмотрим размеры, то горизонтальная полоска изображения весит
365 байт, а с вертикальной полоской — 2 килобайта.
Это всё особенности алгоритмов сжатия.
Итак, сравним размеры.
В формате BMP эта картинка у нас весила 15,6 мегабайт,
а в формате GIF — 865 килобайт.
Это очень большое преимущество,
но так как здесь 256-цветная палитра, то изображение выглядит не очень красиво.
Следующий формат растрового изображения называется JPEG.
Это, наверное,
один из самых популярных графических форматов для хранения фотоизображения.
Может хранить изображения с глубиной цвета 24 бита, а это полноцветное изображение.
Также есть возможность сохранять в формате progressive JPEG,
который позволяет выводить изображения за указанное количество шагов,
то есть по мере загрузки изображения качество изображения улучшается.
Также при высоких степенях сжатия появляются артефакты.
Формат изображения не поддерживает анимации и прозрачный цвет.
Итак, все то же самое изображение, но уже в формате JPEG.
Итак, напомню, в формате BMP изображение весило 15,6 мегабайт,
в формате GIF — 865 килобайт, и в формате JPEG — это 980 килобайт,
при том что это полноцветное изображение, в отличие от GIF.
Если посмотреть на это изображение, то можно увидеть,
что при увеличении степени сжатия качество изображения падает.
В левой части изображения степень сжатия максимальна, в правой — минимальна.
И видно, что в левой части очень много артефактов и изображение становится
некачественным.
Почему так происходит?
Дело в том, что изображение разбито на восьмипиксельную сетку.
И если изображение попадает в эту восьмипиксельную сетку, то все хорошо.
Если не попадает, то происходит оптимизация: появляются светлые квадраты
на темном участке, и темные квадраты на светлом участке.
При множественном сохранении качество изображения
падает именно из-за того, что каждый раз происходит оптимизация.
И если изображение не попадает в восьмипиксельную сетку,
то происходит оптимизация, и появляются артефакты.
Следующий формат называется PNG.
Он в свое время был разработан, для того чтобы заменить формат GIF.
Он имеет альфаканал, то есть его прозрачность не как у GIF,
где либо прозрачный, либо нет, а можно устанавливать степень прозрачности.
Обладает более высокой степенью сжатия без потери качества.
Пересохранение изображения будет проходить без потерь,
потому что алгоритмы такие, которые не портят качество изображения.
Цветное индексирование изображения также присутствует —
палитра для 8 бит и для 24 бит.
Но не подходит для фотографии.
Некоторые изображения в формате PNG могут быть большего размера,
чем те же самые фотографии в формате JPEG.
И наверное, самая популярная фотография,
которая показывает разницу между PNG и JPEG.
Видно, что если сохранить эту картинку в формате JPEG, то появляются артефакты.
А в формате PNG изображение выглядит довольно хорошо.
Поэтому PNG подходит больше для рисованных изображений, а JPEG — для фотографий.
Итак, вернемся к нашему изображению.
В BMP эта картинка весила 15,6 мегабайт, в GIF — 860, но качество сильно хуже,
у JPEG — это 980 килобайт, а PNG — 5 мегабайт.
Это изображение не подходит для формата PNG.
Итак, давайте сравним еще PNG и GIF.
Если использовать PNG с восьмибитной палитрой, то размер
изображения получается 16 килобайт, а в формате GIF — это 17 килобайт.
Разница не очень большая.
Итак, последний формат растрового изображения называется WebP.
Он обеспечивает сжатие изображения как с потерями, так и без потерь.
Этот формат был придуман в 2010 году.
Это довольно новый формат.
Итак, возьмем все то же изображение и посмотрим,
какой размер у него будет в формате WebP.
Напомню, BMP это было 15,6 мегабайт, в GIF — 860 килобайт, JPEG — 980 килобайт,
в PNG — 4,9 мегабайта и в формате WebP — это 450 килобайт без потери качества.
Какие особенности есть у формата WebP?
Меньший размер файла по сравнению с аналогами; улучшенный алгоритм сжатия;
более качественные переходы цвета; и присутствует маска альфаканала; но
появляется искажение, то есть если сравнивать JPEG и WebP,
то у JPEG получаются более резкие края,
а у WebP более сглаженные, то есть появляется пластиковый эффект.
И конечно же, поддержка, то есть в основном поддержка — это браузер Chrome.
Остальными браузерами на данный момент этот формат не поддерживается.
В этом видео вы узнали про такие форматы изображения,
как SVG, BMP, JPEG, PNG и новый формат WebP.
В следующем видео я расскажу вам, что такое архивация и компрессия.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
