Характеристики изображений

Разрешение

Глубина цвета

– определяет то количество оттенков, в диапазоне которых точка может изменять свой цвет.

1 бит / 24 бита

Индексированный цвет

Цветовые модели

Цветовая модель

— математическая модель описания представления цветов в виде кортежей чисел (обычно из трёх, реже — четырёх значений).

RGB

– кодирует любой цвет, представляя в виде комбинации трех цветов (каналов): красного (Red), зеленого (Green) и синего (Blue), с разной интенсивностью.

Интенсивность каждого из трех цветов – это один байт (т. е. число в диапазоне от 0 до 255):

• Белый цвет r=255; g=255; b=255
• Красный цвет r=255; g=0; b=0
• Желтый цвет r=255; g=255; b=0
• Черный цвет r=0; g=0; b=0

RGB в CSS

a:hover {
    /*     rgb(red, green, blue);*/
    color: rgb(255, 0, 0);
    /*color: rgb(100%, 0, 0);*/
}

a:hover {
    /*Шестнадцатиричная запись*/
    color: #ff0000;
}

a:hover {
    /*Короткая запись(
    */
    color: #f00;
}

RGBA

Похож по синтаксису на RGB, но включает в себя альфа-канал, задающий непрозрачность элемента (0 – прозрачный, 1 – непрозрачный).

red-box:hover {
    background: rgba(255, 0, 0, .5);
}

Имена цветов

В CSS существует 140 зафиксированных имен

• red
• black
• green
• darkmagenta
• orangered
• springgreen
• yellowgreen
• slategrey
• transparent

CMYK

Данная модель является вычитающей, поскольку цвета в ней образуются путем вычитания из черного цвета базовых цветов: голубого (Cyan), пурпурного (Magenta), желтого (Yellow).

HSV

(Hue, Saturation, Value)

• Hue — цветовой тон (оттенок цвета, от 0 до 360).
• Saturation — насыщенность. Чем выше этот параметр, тем «чище» будет цвет, а чем ниже, тем ближе он будет к серому (0 – 100%).
• Value — яркость цвета. Чем выше значение, тем ярче будет цвет. А чем ниже, тем темнее (0% — черный, 100% – яркий)

HSV

Чаще всего используется в простой обработке изображений.

HSL

(Hue, Saturation, Lightness)

• Hue — цветовой тон (оттенок цвета, от 0 до 360).
• Saturation — насыщенность. Чем выше этот параметр, тем «чище» будет цвет, а чем ниже, тем ближе он будет к серому (0 – 100%).
• Lightness — это светлота цвета (не путать с яркостью). Чем выше параметр, тем светлее цвет (100% — белый), а чем ниже, тем темнее (0% — черный).

HSL

Преимуществом HSL перед RGB является то, что HSL является гораздо более понятным. Кроме того, с помощью него легче создать палитры подходящих цветов (сохраняя оттенок и меняя яркость и насыщенность)

HSL в CSS

.span-1 {
    color: hsl(0, 0%, 100%);
}
.span-2 {
    color: hsl(0, 100%, 50%);
    background-color: hsl(120, 100%, 50%);
}
.span-3 {
    color: hsl(30, 100%, 0%);
    background-color: hsl(60, 100%, 100%);
}

HSLA в CSS

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий непрозрачность элемента.

.box {
    background-color: hsla(120, 100%, 50%, 1);
}
.box:hover {
    background-color: hsla(120, 100%, 50%, .5);
}

LAB

Её цветовой охват максимально близок к восприятию человека с нормальным зрением.

• L — Luminance — освещенность (это совокупность яркости и интенсивности)
• a — один из компонентов цвета, меняется от зеленого до красного
• b — второй из компонентов цвета, меняется от синего до желтого

Виды графики

Графический формат — это способ записи графической информации.

Векторная графика	Растровая графика

Векторная графика

– это изображения, созданные при помощи математических описании элементарных геометрических объектов:

• Точки
• Линии и ломаные линии
• Многоугольники
• Окружности и эллипсы
• Кривые Безье
• Текст

Недостатки векторной графики

• большое количество описательной информации для сложных объектов
• недостаточная реалистичность векторного изображени
• грузит CPU

Растровая графика

Изображение по вертикали и горизонтали разбивается на достаточно мелкие прямоугольники – пикселы.

Плюсы растрового изображения:

• высокая реалистичность изображения
• позволяет воспроизвести изображение любой сложности

Минусы растрового изображения:

• плохо масштабируются
• изображение можно редактировать только целиком
• зачастую может иметь больший размер, чем аналог векторного изображения

в вектор – 1.98 KБ, а в растре – 51 КБ

SVG

SVG (Scalable Vector Graphics)

— язык разметки масштабируемой векторной графики

SVG в HTML5

В настоящий момент формат SVG поддерживается 96.67% браузеров.

Форматы растровой графики

BMP (Bitmap Picture)

• c форматом BMP работает огромное количество программ
• можно сохранять черно-белые, серые полутоновые, индексные цветные и цветные изображения системы RGB
• большой объем

GIF (Graphics Interchange Format)

• анимации
• однобитовая прозрачность
• индексная палитра
• стандарт разрабатывался только для поддержки 256-цветовой палитры
365B
2KB

JPEG (Joint Photographic Experts Group)

применяемый для хранения фотоизображений и подобных им изображений

• может хранить изображения с глубиной цвета 24 бит
• progressive JPEG позволяет сохранять изображения с выводом за указанное количество шагов
• появление на изображениях при высоких степенях сжатия характерных артефактов
• форматом не поддерживаются анимация и прозрачный цвет

Множественное сохранение

PNG (Portable Network Graphics)

• альфаканал
• обладает более высокой степенью сжатия для файлов с большим количеством цветов
• пересохранение изображения проходят без потерь в качестве.
• цветное индексированное изображение (палитра 8 бит для цвета глубиной 24 бит)
• не подходит для фотографий

PNG vs GIF

png-8	gif
16 KB	17 KB

WebP

– обеспечивает сжатие изображений как с потерями, так и без потерь.

WebP

• Меньший размер файла
• Улучшенный алгоритм сжатия
• Более качественный переходы цвета
• Маска альфа-канала
• Искажение имеет пластиковый вид

Поддержка

Архивация и компрессия

• Архивация(сжатие без потерь) – программа анализирует наличие в сжимаемых данных некоторых одинаковых последовательностей данных(одного цвета, повторяющиеся текстовые данные), и исключает их, записывая вместо повторяющегося фрагмента ссылку на предыдущий такой же.
  • RLE
  • CCITT
  • LZW
  • ZIP
• Компрессия(сжатие с потерями) – это способ сохранения данных таким образом, при использовании которого не гарантируется полное восстановление исходных графических данных.
  • JPEG
  • JPEG 2000 (jp2)

Инструменты сжатия

JPEGmini

imageOptim

Kraken.io (online)

Оптимизация SVG

– заключается в удалении «ненужной» информации из SVG, тем самым уменьшается размер самого файла.

• SVG Cleaner
• SVG Scour (для работы необходимо установить Python)
• SVG Optimizer (для работы необходимо установить Node.js)

До сжатия

После сжатия

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="300"><circle stroke="#f00" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
            

0.614 KiB – 68.2% = 0.195 KiB

Графика в HTML

img

<img src="img.png" alt="Изображение про img"
     height="100" width="200">
            

Retina дисплей

Изображение

srcset

<img src="img.png" alt="котик" height=100 width=200
     srcset="img@2x.png 2x">
            

<img src="img800.png" alt="котик" height=100 width=200
     srcset="img800.png 800w, img1500.png 1500w">
        

Picture

    
    <img src="img.png"  alt="picture" height=100 width=200>

            

Picture

    <source media="(min-width: 800px)"
            srcset="img/filter-cat.jpg" type="image/jpeg">
    <source media="(max-width: 799px)"
            srcset="img/cat.png" type="image/png">
    <img src="img.png"  alt="котик" height=100 width=200>

            

object-fit

fill

contain

cover

none

Графика в CSS

.box1 {
    background-image: url(pusheen.png);
}

Размеры фона

.box1 {
    background-image: url(pusheen.png);
    /*background-size: 100% auto;*/
    background-size: 100%;
}

Размеры фона

.box1 {
    background-image: url(pusheen.png);
    /*Можно указывать значение в px*/
    background-size: 100% 100%;
}

cover/contain

.box1 { background-image: url(pusheen.png);
    background-size: cover;
}
.box2 { background-image: url(pusheen.png);
    background-size: contain;
}

Повторение картинок

.box0 {
    background-repeat: repeat; /*по умолчанию*/
}
.box1 {
    background-repeat: no-repeat;
}
.box2 {
    background-repeat: repeat-x;
}
.box3 {
    background-repeat: repeat-y;
}

Положение фона

.box1 {background-image: url(pusheen.png);
    /*left | center | right | <проценты> | <значение>*/
    /*top | center | bottom | <проценты> | <значение>*/
    background-position: 75% 50%;
}

Фиксация фона

.box1 {
    background-image: url(windows.png);
    /*scroll | fixed | local*/
    background-attachment: fixed
}

    
Какой-то текст

Область позиционирования

– определяет область позиционирования фонового рисунка

.box { background-repeat: no-repeat; padding: 20px; }
.box1 { background-origin: border-box; }
.box2 { background-origin: padding-box; /*по умолчанию*/ }
.box3 { background-origin: content-box; }

Короткая запись

/* background: <bg-image> ||
<position> [ / <bg-size> ]? || <repeat-style> ||
<attachment> || <'background-color'>*/
.box {
background: url(pusheen.png) 50% 10% / 50px 80px
                           no-repeat #290;
}

Current Color

.box {
    color: #f00;
    background: currentColor;
    box-shadow: 0 0 55px currentColor;
}

Линейные градиенты

.box {
    background: linear-gradient(#f00,#0f0);
}

.box {
    background: linear-gradient(45deg, #ff0 0, #f00 30%, #0f0 30%);
}

Направление градиента

.box {
    background: linear-gradient(to top right, purple, crimson, orangered, gold);
}

.box {
    background: linear-gradient(45deg, purple, crimson, orangered, gold);
}

Радиальные градиенты

.box {
    background: radial-gradient(gold, purple);
}

background: radial-gradient(100px 200px at 100px 10px,
                white 0%, orangered 50%, purple 100%);

Форма

.box {
    background: radial-gradient(circle, gold, red);
}

.box {
    background: radial-gradient(200px 30px, gold, red);
}

Положение

.box {
    background: radial-gradient(at top left, gold, red);
}

.box {
    background: radial-gradient(at 600px 50px, gold, red);
}

Шаблоны

background: linear-gradient(135deg, #eceddc 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, #eceddc 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, #eceddc 25%, transparent 25%),
    linear-gradient(45deg, #eceddc 25%, transparent 25%);
background-size: 100px 100px;
background-color: #ec173a;

Фильтры

.cat {
    opacity: .5;
}

Объединение фильтров

.cat {
    filter: invert(100%) sepia(100%);
}

Поддержка

backdrop-filter

.text {
    backdrop-filter: brightness(40%);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Поддержка

Спрайты

Спрайты

– прием объединить много изображений в одно.

Спрайты в css

Нужно сделать кнопки "поделиться"

.social {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-image: url(share.svg)
}
.fb {
    background-position: 0 0;
}
.fb:hover {
    background-position: 0 -100px;
}
.twitter {
    background-position: -100px 0;
}
.twitter:hover {
    background-position: -100px -100px;
}

Как это работает?

Особенности:

• Меньше запросов к серверу
• Смена по hover
• Сложно добавлять новые картинки (но можно автоматизировать)

Base64

– способ оптимизации загрузки изображения.

.logo {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My+);
}

• отсутствие запроса к серверу
• картинка не кэшируется
• увеличение размера файла (css/html)
• "мусор" в коде

Работа с макетами

DEMO

favicon

manifest.json

• name - название сайта
• short_name - короткое название сайта
• icons - набор иконок разных размеров
• start_url - url, который будет открываться при открытии сайта с рабочего стола
• display - как отображать сайт: с адресной строкой или без
• background_color - цвет страницы до того как она загрузилась