View
1.008
Download
4
Category
Preview:
DESCRIPTION
Citation preview
Автоматизация храненияграфики на проекте Online4Тимофей Чаптыков
t.chaptykov@2gis.ru @chaptykov
Задача
3
Экраны с высоким разрешением
Пиксель в пиксель
Привычный workflow
Автоматизация
Инструменты
10
Исследование
12
Растровые форматы
— GIF
— JPG
— PNG
13
Растровые форматы
— GIF
— JPG
— PNG
14
Векторные форматы
— SVG
— Шрифт
— Flash
— Silverlight
15
Векторные форматы
— SVG
— Шрифт
— Flash
— Silverlight
16
Поддержка браузерами
Всего Online4
Растровый спрайт 94.08% 100%
SVG-спрайт 84.62% 95%
Шрифт 91.38% 100%
Can I use
18
PNG-спрайт. Плюсы
1. Привычный формат;
2. качество не зависит от устройства и платформы.
19
PNG-спрайт. Минусы
1. Отдельная версия для каждого device-pixel-ratio
2. нелинейный рост размера файла.
20
Иконочный шрифт. Плюсы
1. Вектор;
2. удобное управление цветом, размером через CSS.
21
Иконочный шрифт. Минусы
1. Только одноцветные иконки;
2. сглаживание в Windows.
22
SVG-спрайт. Плюсы
1. Вектор;
2. привычный механизм использования.
23
SVG-спрайт. Минусы
1. Нет поддержки Internet Explorer 8;
2. быстродействие;
3. рендеринг при измененном размере в Firefox, Opera.
24
Критерии сравнения
— Размер файлов;
— скорость рендеринга.
25
Размер файлов
27
PNG 9,98 КБ
TTF 5,75 КБ
EOT 3,42 КБ
SVG 5,52 КБ
PNGO
GZIP
GZIP
GZIP
Скорость рендера
28
103,2 мс
123,7 мс
227,8 мс
PNG 55 мс
TTF 41,8 мс
SVG 35,6 мс
PNG9,98
103,2
SVG5,52
227,8
TTF5,75
123,7Время, мс
Размер, КБ
29
Шрифт с иконкамиFONT
30
Проблемы использования
— Сложно подготовить шрифт;
— мало инструментов;
— хочется все хранить в одном месте.
31
Сохранение
Сохранение
Подготовка шрифта
— github.com/sindresorhus/grunt-svgmin
— github.com/FontCustom/fontcustom
38
Управление размером
.icon1 {
width: 17px;
height: 13px;
}
.icon2 {
height: 18px;
}
40
Управление размером
.icon {
font-size: 18px;
}
41
Грязный код
.icon {
top: -1px;
margin-top: -1px;
vertical-align: -1px;
}
42
Сглаживание в Windows
Растровый спрайтPNG
45
Подготовка спрайта
— https://github.com/Ensighten/grunt-spritesmith
— github.com/JamieMason/grunt-imageoptim
47
Использование
.icon {
.sprite(@filename);
}
48
Результат
.icon {
background-image: url(sprite.png);
background-position: -60px 0;
width: 16px;
height: 16px;
}
49
Ретина
— Отдельная версия изображения;
— подключаем через media queries
50
Высокая разрешение экрана ≠ ретина
2000 файлов?
Векторные иконкиSVG
55
Проблемы использования SVG
1. Нет поддержки Internet Explorer 8
2. Рендеринг при измененном размере в Firefox, Opera
3. Быстродействие
56
Проблемы использования SVG
1. Нет поддержки Internet Explorer 8 Делаем фолбек на PNG
2. Рендеринг при измененном размере в Firefox, Opera
3. Быстродействие
57
Проблемы использования SVG
1. Нет поддержки Internet Explorer 8 Делаем фолбек на PNG
2. Рендеринг при измененном размере в Firefox, Opera
Используем только реальный размер
3. Быстродействие
58
Проблемы использования SVG
1. Нет поддержки Internet Explorer 8 Делаем фолбек на PNG
2. Рендеринг при измененном размере в Firefox, Opera
Используем только реальный размер
3. Быстродействие отказываемся от спрайта в пользу base64
59
Растеризация SVG
— github.com/dbushell/grunt-svg2png
— github.com/chaptykov/grunt-svg2png (форк)
66
Не все визуальные эффекты можнореализовать в SVG
Собираем всё вместе
68
Всё вместе
— SVG+base64 для большей части изображений интерфейса;
— 4×PNG через media queries для того, что невозможно
реализовать через SVG;
— уменьшенные изображения для иллюстраций;
— CSS-рисование.
69
1.5 dppx
spritesmith
imageoptim
CSS
PNGPNG PNG
1 dppxPNG
3 dppxPNG
2 dppxPNG
Спрайты Спрайты
app.cssCSS + sprites
Использование
73
До
.svg-icon {
.bg('filename');
}
74
После
.svg-icon {
background-image: url(data:image/svg+xml;base64,…);
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
75
Для Internet Explorer 8
.svg-icon {
background-image: url(sprite.png);
background-position: -60px 0;
width: 16px;
height: 16px;
}
76
До
.png-icon {
.bg('filename', 1);
}
77
После
.svg-icon {
background-image: url(sprite.png);
background-size: 160px 120px;
background-position: -60px 0;
width: 16px;
height: 16px;
}
78
После
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
.svg-icon {
background-image: url(sprite.192dpi.png);
}
}79
Результаты
— Вся графика генеруется одной командой;
— 1 запрос к серверу на все стили и изображения;
— 130 КБ на все стили и изображения.
81
Особенности
— Только no-repeat
— огромный список изменений в репозитории, если нет командных
соглашений;
— разные версии Adobe Illustrator сохраняют SVG по-разному.
82
Тимофей Чаптыков
t.chaptykov@2gis.ru@chaptykov
83
Recommended