Автоматизация хранения
графики на проекте 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,...
Критерии сравнения
— Размер файлов;
— скорость рендеринга.
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
TTF
5,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. Бы...
Проблемы использования SVG
1. Нет поддержки Internet Explorer 8 Делаем фолбек на PNG
2. Рендеринг при измененном размере в...
Проблемы использования SVG
1. Нет поддержки Internet Explorer 8 Делаем фолбек на PNG
2. Рендеринг при измененном размере в...
Проблемы использования SVG
1. Нет поддержки Internet Explorer 8 Делаем фолбек на PNG
2. Рендеринг при измененном размере в...
Растеризация SVG
— github.com/dbushell/grunt-svg2png
— github.com/chaptykov/grunt-svg2png (форк)
66
Не все визуальные эффекты можно
реализовать в SVG
Собираем всё вместе
68
Всё вместе
— SVG+base64 для большей части изображений интерфейса;
— 4×PNG через media queries для того, что невозможно
реа...
1.5 dppx
spritesmith
imageoptim
CSS
PNG
PNG PNG
1 dppx
PNG
3 dppx
PNG
2 dppx
PNG
Спрайты Спрайты
app.css
CSS + sprites
Использование
73
До
.svg-icon {
.bg('filename');
}
74
После
.svg-icon {
background-image: url(data:image/svg+xml;base64,…);
background-repeat: no-repeat;
width: 16px;
height: 1...
Для Internet Explorer 8
.svg-icon {
background-image: url(sprite.png);
background-position: -60px 0;
width: 16px;
height: ...
До
.png-icon {
.bg('filename', 1);
}
77
После
.svg-icon {
background-image: url(sprite.png);
background-size: 160px 120px;
background-position: -60px 0;
width: 16...
После
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen an...
Результаты
— Вся графика генеруется одной командой;
— 1 запрос к серверу на все стили и изображения;
— 130 КБ на все стили...
Особенности
— Только no-repeat
— огромный список изменений в репозитории, если нет командных
соглашений;
— разные версии A...
Тимофей Чаптыков
t.chaptykov@2gis.ru
@chaptykov
83
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС
Upcoming SlideShare
Loading in …5
×

CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС

6,666 views

Published on

Published in: Internet
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,666
On SlideShare
0
From Embeds
0
Number of Embeds
3,683
Actions
Shares
0
Downloads
19
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

CodeFest 2014. Чаптыков Т. — Автоматизация хранения графики в новой онлайн-версии 2ГИС

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

×