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

Like this? Share it with your network

Share

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

on

  • 1,157 views

 

Statistics

Views

Total Views
1,157
Views on SlideShare
531
Embed Views
626

Actions

Likes
0
Downloads
11
Comments
0

7 Embeds 626

http://2014.codefest.ru 275
http://techno.2gis.ru 247
http://techno.2gis.test 79
http://techno.2gis.prod 16
http://backend.codefest.ru 6
http://2013.codefest.ru 2
https://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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