Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Прекрасный мир графики

Прекрасный мир графики

Доклад о разных графических форматах и о том как их правильно готовить.

C27317d1ebe4e4a01504acab9d87fe61?s=128

Polina Gurtovaya

October 12, 2019
Tweet

Transcript

  1. Прекрасный мир графики 1

  2. 2

  3. 3

  4. 4

  5. Итак, прекрасный мир графики 5

  6. Графика Иллюстрирует Развлекает Добавляет немного добра на страничку 6

  7. Это может быть Картинка Видяшка Взрывающийся вертолёт 7

  8. Для десктопа ~50% контента это изображения 8

  9. Это самая яркая часть нашей страницы 9

  10. Мы с дизайнерами решаем одну задачу 10

  11. Для кого? 11

  12. Человек Использует глаза и мозг Злопамятное существо Любит когда 60fps

    Не любит ждать 12
  13. Зачем ? 13

  14. 14

  15. 15

  16. Изображения 16

  17. 17 Использовать экспортированное из макета Использовать что дадут Попросить исходник

    Провести эксперимент
  18. Инструменты для экспериментов svgo (svgoomg- web-версия) optipng, cwebp, cjpeg aka

    mozjpeg, ImageMagic, libvips imagemin, sharp squoosh ffmpeg imageoptim 18
  19. SVG PNG JPEG WEBP 19 Pастр Вектор

  20. pазмер контейнера devicePixelRatio 20 Каким должен быть размер растрового изображения?

  21. Чтобы везде работало 21 <picture> <source srcset="cupcake.webp 1x, cupcake@2x.webp 2x"

    type="image/webp" /> <source srcset="cupcake.webp 1x, cupcake@2x.webp 2x" type="image/jpeg" /> <img src="cupcake.jpg" alt="a yummy cupcake" /> </picture>
  22. Когда SVG заходят хорошо 22 Часть изображения можно представить как

    набор геометрических примитивов Есть интерактивность Нужно цеплять маркеры к фону Нужно много размеров
  23. 23 Со временем в голове сформируется нужная связь и потребность

    в экспериментах снизится
  24. Эксперимент 24

  25. Берем тестовую картинку unicorn.svg - 12kB После svgo - 5.1kB

    (57.5%) gzip - 2.7kB (77%) webP@2x - 4.7kB (60.8%) webP - 2.2kB (81.7%) 25
  26. Тестовый единорог внутри <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113 199”> <g

    stroke-width="2.01"> <path d=“…534z” /> <path d=“…9z” fill="#f19c9b"/> <path d=“…” /> … </svg> 26
  27. <path /> <path d="M215.147 235.789c0-13.921 2.609-31.501 9.735- 40.624 7.126-9.123 16.97-14.765

    27.844-14.765 10.874 0 19.62 7.386 26.746 16.509 7.126 9.123 10.788 21.702 1 0.788 35.623 0 13.921-3.459 22.429-10.585 31.552-7.125 9.122-12.332 13.435-23.205 13.435-10.874 0-23.002-2.0 74-30.127-11.196-7.126-9.123-11.196-16.613-11.196-30.5 34z"/> https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths 27
  28. <path /> 28 M - начало пути L - линия

    (V, H) C - кривая (S, Q, T) A - дуга Z - замыкаем путь
  29. SVG можно морфить flubber отлично морфит 29

  30. JavaScript - анимации JS - анимации выполняются в том же

    “потоке” что и основной JS requestAnimationFrame — обязательно нужно использовать, но он никогда не сработает если основной поток занят У нас всего 16.666667 ms :) 30
  31. 31

  32. Пример с печенькой <svg xmlns=“…” width="200" height="120" viewBox="0 0 200

    120"> <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="M69.5433628,33.5480878 C65.8626549…”/> </svg> 32
  33. width and height 33 Original w/o width & height width=30vh

  34. viewBox overflow: visible 34 viewBox: 0 0 100 120 width:

    90px
  35. preserveAspectRatio none 35 meet slice

  36. Округление важно 36 d="M146.215 46.605c5.233…" d="M146.2 46.6c5.2…”

  37. Насколько округлять? 37 Надо учитывать: container size, devicePixelRatio, inner transformations.

    Начитать можно с : 1 знак - контейнер совпадает с размером svg, 2 знака — контейнер в 10 раз больше …etc
  38. Печенька с друзьями 38

  39. Печенька с друзьями <svg xmlns="http://www.w3.org/2000/svg" width="913" height="552"> <g transform="translate(523 128)">

    <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> <g transform="translate(665 236)"> <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> ... </svg> 39
  40. Печенька с друзьями <svg xmlns="http://www.w3.org/2000/svg" width="913" height="552"> <defs> <g id="cookie">

    <ellipse cx="100" cy="60" fill="#FDC970" rx="100" ry="60"/> <path fill="#794545" d="..."/> </g> </defs> <use href="#cookie" transform="translate(521 128)"/> <use href="#cookie" transform="translate(500 236)"/> ... </svg> 40
  41. Сюрпризы внутри SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565 319"> <script>console.log('')</script>

    <ellipse cx="282.5" cy="159.5" fill="#FDC970" rx="282.5" ry="159.5"/> <path fill="#794545" d="M196.46 ..." /> </svg> 41
  42. Сюрпризы внутри SVG <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565 319"> <image

    height="2388" width="1669" x=".635" xlink:href="data:image/ png;base64,iVBORw0KGgoA..." /> </svg> 42
  43. Как инлайнить SVG import React from "react"; import Logo from

    "./logo.svg"; const App = () => <Logo />; export default App; 43 сreate-react-app использует https:/ /github.com/smooth-code/svgr
  44. Мы инлайним SVG чтобы с ними было yдобно работать 44

  45. Шевелящийся контент 45

  46. Видео 46

  47. ffmpeg - наш классный и универсальный инструмент 47

  48. Контейнеры webm mp4 48

  49. Видео кодеки VP8 VP9 AV1 H.264 H.265 49 <video autoplay

    muted> <source src="unicorn.webm" type="video/webm" /> <source src="unicorn.mp4" type="video/mp4" /> </video>
  50. Используйте эффективный кодек 50 evl.ms/blog/better-web-video-with-av1-codec

  51. Избегайте страшных звуков :) 51 <video autoplay muted> <source src="unicorn.webm"

    type="video/webm" /> <source src="unicorn.mp4" type="video/mp4" /> </video>
  52. Анимированные картинки APNG WebP GIF 52

  53. SVG — анимации 53

  54. 54

  55. Есть куча прикольных анимирующихся CSS свойств 55

  56. Анимируй - трансформируй (transform) 56 .animated { transform: ... ;

    } Все что делает transform: (translate, rotate, scale, skew) можно описать при помощи матрицы
  57. 57 .transformed { transform: matrix3d( 1, 0, 0, 0, 0,

    1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  58. Фильтры 58

  59. Clip-path 59

  60. stroke-dasharray 60

  61. Как анимировать • CSS animation API (плохая поддержка) • Можно

    костыльнуть через @keyframe 61
  62. 62 <Path className={cx("path")} ref={ref} style={{ strokeDasharray: pathLen, strokeDashoffset: pathLen, animation:

    "15s dash 300ms infinite linear" }} />
  63. 63 const pathElement = svg.querySelector("path"); const length = pathElement.getTotalLength(); const

    dist = length / numPoints; const points = [...Array(numPoints)].map((_, index) => { const { x, y } = data.getPointAtLength(index * dist); return { transform: `translateX(${3 * x}px) translateY(${3 * y}px)` }; }); fish.animate(points, { duration: 15000, iterations: Infinity }); setPathLen(length);
  64. 64 const data = ref.current.querySelector("path"); const length = data.getTotalLength(); const

    dist = length / numPoints; const points = [...Array(numPoints)].map((_, index) => { const { x, y } = data.getPointAtLength(index * dist); return { transform: `translateX(${3 * x}px) translateY(${3 * y}px)` }; }); const keyFrames = `@keyframes fly { ${points .map( (point, index) => `${((index * 100) / numPoints).toFixed(2)}% { transform: ${ point.transform }; }` ) .join("\n")} }`; setPathLen(length);
  65. Что еще прикольного можно делать? 65

  66. Generative art 66

  67. 67

  68. Процессинг и трансформация изображений • Обрезать картинку • Обнаружить предмет

    • Применить затейливый фильтр (cместить цвета, etc) • Что-нибудь измерить 68 При помощи <canvas /> можно:
  69. Пиксель измеряющий 69

  70. Все работает быстро 70

  71. WebGL 71

  72. 72 56ms x6 slowdown

  73. Почему спецеэффекты в web - редкость? Низкая конверсия Никто не

    верит в свои силы Нам лень :) 73
  74. Путь к успеху Добавьте осознанности к процессу Используйте правильные инструменты

    Сравнивайте результаты Не бойтесь экспериментировать Почитайте спец. литературу :) 74
  75. 75 evl.ms/blog/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques

  76. Спасибо! 76 @polina_gurtovaya @pgurtovaya hellsquirrel@evl.ms