CodeFest 2019. Вадим Макеев (HTML Academy) — Делайте из слона муху

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
April 07, 2019

CodeFest 2019. Вадим Макеев (HTML Academy) — Делайте из слона муху

У разметки, стилей и скриптов есть всё: спецификации, документация, множество конкурирующих решений, понятные лучшие практики. 25 лет спустя после появления тега img графика для веба — всё ещё чёртова магия, которая передаётся в устной традиции. «Мой дед всю жизнь джипеги из Фотошопа сохранял, и ничего — дожил до ста». 15 лет опыта в одном докладе: от создания и экспорта графики до оптимизации и вставки.

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 07, 2019
Tweet

Transcript

  1. Делайте из слона муху

  2. :nth-fest(3n) 2013 ∙ 2016 ∙ 2019…

  3. None
  4. None
  5. youtube.com/pepelsbey

  6. Ситуация

  7. None
  8. 23 контентных картинки на 1,4 МБ Заняло 1 минуту сделать

    900 КБ — — 8
  9. © Fox Searchlight Pictures

  10. Графика

  11. Контент Интерфейс — — 11

  12. Контент Содержимое страницы Создаётся после Копируется, сохраняется Живёт отдельно от

    кода Нужна пользователям Интерфейс Оформление, дизайн Как код, только нет Создаётся с кодом Живёт кодом Иногда и правда код — — — — — — — — — — © Matt Groening 12
  13. Форматы 13

  14. None
  15. Векторные Цвета Прозрачность Анимация SVG Много Да Да SVG —

    это программируемая графика, как Canvas. 15
  16. Растровые Цвета Прозрачность Анимация GIF 256 Да Да PNG 256

    и больше Да, альфа Да * JPEG Много Нет Нет WebP 256 и больше Да, альфа Да HEIC Много Да, альфа Да 16
  17. Гифка — это жанр, а не формат графики. 17

  18. Анимация 18

  19. © The Walt Disney Company

  20. video/webm bolt.webm video/mp4 bolt.mp4 Видео <video autoplay loop muted> <source

    type=" " src=" "> <source type=" " src=" "> </video> $ ffmpeg -i bolt.gif -movflags faststart -pix_fmt yuv420p -crf 01. 02. 03. 04. 20
  21. image/webp bolt.webp bolt.gif Если очень нужно <picture> <source type=" "

    srcset=" "> <img src=" " alt="Болт кривляется"> </picture> $ gif2webp bolt.gif -o bolt.webp 01. 02. 03. 04. 21
  22. Новый кодек AV1, Андрей Ситник

  23. GIF

  24. Создание

  25. Редакторы 25

  26. None
  27. © 20th Century Fox

  28. CSS-графика Ручной SVG Canvas CSS Paint API — — —

    — 28
  29. burger burger__line burger__line burger__line CSS-графика <div class=" "> <div class="

    burger__line--1"></div> <div class=" burger__line--2"></div> <div class=" burger__line--3"></div> </div> 01. 02. 03. 04. 05. 29
  30. .burger 12px 10px .burger__line 12px 2px CSS-графика { position: relative;

    width: ; height: ; } { position: absolute; left: 0; width: ; height: ; background-color: #4b86c2; } 01. 02. 03. 04. 05. 01. 02. 03. 04. 05. 06. 07. 30
  31. 0 4px 8px CSS-графика .burger__line--1 { top: ; } .burger__line--2

    { top: ; } .burger__line--1 { top: ; } 01. 02. 03. 04. 05. 06. 01. 02. 03. 31
  32. 12px 10px 2px 2px 4px CSS-графика получше .burger { width:

    ; height: ; background-image: repeating-linear-gradient( #4b86c2, #4b86c2 , #fff , #fff ); } 01. 02. 03. 04. 05. 06. 07. 32
  33. 0 0 12 10 0 4 8 Ручной SVG <svg

    width="120" viewBox=" " fill="#4b86c2"> <rect width="12" height="2" x="0" y=" "/> <rect width="12" height="2" x="0" y=" "/> <rect width="12" height="2" x="0" y=" "/> </svg> 01. 02. 03. 04. 05. 33
  34. Canvas 34

  35. Canvas © Matt Groening

  36. #4b86c2 paint(burger) burger.js CSS Paint API div { --burger-color: ;

    background-image: url('burger.png'); background-image: ; } CSS.paintWorklet.addModule(' '); 01. 02. 03. 04. 05. 36
  37. Shape inputProperties() paint … burger Shape CSS Paint API class

    { static get { return ['--burger-color']; } (context, geometry, properties) { } } registerPaint(' ', ); 01. 02. 03. 04. 05. 06. 07. 37
  38. --burger-color color CSS Paint API const color = properties.get( '

    ' ); context.fillStyle = ; context.fillRect(0, 0, 120, 20); context.fillRect(0, 40, 120, 20); context.fillRect(0, 80, 120, 20); 01. 02. 03. 04. 05. 06. 07. 38
  39. #32b332 CSS Paint API div:hover { --burger-color: ; } 01.

    02. 03. 39
  40. CSS Paint API © Matt Groening

  41. Экспорт

  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. data:image/png;base64 Заглядывайте в SVG <svg><image xlink:href=" ,iVBORw0KGgo AAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7EAAAOxAGV Kw4bAAAIXUlEQVR4nO3WMQEAIAzAsIF/z+ACjiYKenbNzBkAIGX/DgAA3 jMAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyA

    AAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwA AQQYAAIIMAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAE GQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQA…"/></svg> 56
  57. Экспорт PNG PNG 8 JPG SVG Photoshop 852 155 3596

    130 Affinity 1555 856 10793 602 Sketch 5639 … 3836 525 Figma 2179 … 7797 153 Руки 111 111 1144 98 57
  58. © Fox Searchlight Pictures

  59. Оптимизация

  60. Экспортируйте где угодно Сжимайте инструментами 1. 2. 60

  61. None
  62. None
  63. None
  64. None
  65. Вставка

  66. Контент Интерфейс — — 66

  67. Хороший интерфейс как прогресс-бар. 67

  68. Рыжий кот Рыжий кот Мой кот самый лучший Тегом <img

    src="cat.jpg" alt=" "> <figure> <img src="cat.jpg" alt=" "> <figcaption> </figcaption> </figure> Идеально для контентных картинок. 01. 02. 03. 04. 68
  69. cat@2x.webp 2x cat.webp 1x cat@2x.jpg 2x cat.jpg Тегом: плюшки <picture>

    <source type="image/webp" srcset=" "> <img srcset=" " src=" " alt="Рыжий кот"> </picture> 01. 02. 03. 04. 05. 06. 07. 69
  70. cat@3x.jpg 3x cat@2x.jpg 2x cat.jpg Тегом: плюшки <img srcset=" "

    srcset=" " src=" " alt="Рыжий кот"> Для ретины достаточно атрибута srcset . 01. 02. 03. 04. 70
  71. background-image Фоном button { : url(icon.png); } 01. 02. 03.

    71
  72. min-resolution: 2dppx icon@2x.png Фоном: плюшки @media ( ) { button

    { background-image: url( ); } } Не забудьте про Autoprefixer -webkit-min-device-pixel-ratio . 01. 02. 03. 04. 05. 72
  73. background-image: url(icon.webp) icon.webp Фоном: облом @supports ( ) { button

    { background-image: url( ); } } Другой формат в стилях просто не подсунуть, см. Modernizr. 01. 02. 03. 04. 05. 73
  74. © Matt Groening

  75. background-size Всегда фоном! div.picture { background-image: url(picture.png); : cover; }

    01. 02. 03. 04. 75
  76. object-fit object-position Лучше тегом img, video { : cover; :

    25% 0; } 01. 02. 03. 04. 76
  77. item-curator__image Нет, правда <div class=" " style="background-image: url('5535.jpg')"> </div> 01.

    02. 03. 77
  78. a::before content Стилями { : url(icon.png); } Вставляет оформление в

    контент стилями. 01. 02. 03. 78
  79. burger Меню burger__line burger__line burger__line Инлайном <svg class=" " viewBox="0

    0 12 10" aria-label=" "> <rect class=" " x="0" y="0"/> <rect class=" " x="0" y="4"/> <rect class=" " x="0" y="8"/> </svg> Видно из стилей, удобно менять цвета. 01. 02. 03. 04. 05. 79
  80. #4b86c2 #32b332 Инлайном .burger { fill: ; } .burger:hover {

    fill: ; } 01. 02. 03. 04. 05. 06. 07. 80
  81. Меню #burger Спрайтом <svg width="120" height="100" viewBox="0 0 12 10"

    aria-label=" "> <use xlink:href=" "></use> </svg> Видно из стилей, удобно менять цвета. 01. 02. 03. 04. 81
  82. Меню sprite.svg#burger Внешним спрайтом <svg width="120" height="100" aria-label=" "> <use

    xlink:href=" "></use> </svg> К сожалению, стили уже не пробьются внутрь. Но оно вам точно нужно? 01. 02. 03. 04. 82
  83. xmlns burger 0 0 12 10 Внешним спрайтом <svg ="http://www.w3.org/2000/svg">

    <symbol id=" " viewBox=" "> <rect width="12" height="2" x="0" y="0"/> <rect width="12" height="2" x="0" y="4"/> <rect width="12" height="2" x="0" y="8"/> </symbol> </svg> 01. 02. 03. 04. 05. 06. 07. 83
  84. data:image/png;base64 Base64 button { background-image: url(' ,iVBORw0K EUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7EAAAOxAGV AAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyA MAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAE

    ABBkAAAgyAAAQJABLJBGFFAIAgAwAAQQYAAIIMAAAEGQA…'); } 01. 02. 03. 84
  85. data:image/svg+xml URL-кодирование button { background-image: url(' ,%3Csvg xmlns ='http://www.w3.org/2000/svg' viewBox='0

    0 12 10' fill='%234b86c2'%3E%3Crect width='12' height='2' x='0' y='0'/%3E%3Crect width='12' height='2' x='0' y='4'/%3E%3Crect width='12' height='2' x='0' y…'); } 01. 02. 03. 85
  86. DVD+RW

  87. Внешние ресурсы попадают в кэш Критические ресурсы нужны лёгкие 1.

    2. 87
  88. Загрузка

  89. lazyload="on" Ленивая загрузка <img src="picture.jpg" > on — откладывает запрос

    до контента off — запрашивает сразу же auto — как решит браузер Feature-Policy: lazyload 'self'(auto|off|force) — — — 89
  90. importance="low" preload Приоритет загрузки <img src="picture.jpg" > high — повышает

    приоритет загрузки low — понижает приоритет загрузки Если очень-очень нужно, то осторожно можно: <link rel=" " href="picture.jpg" as="image"> — — 90
  91. async="on" Неблокирующий рендеринг <img src="picture.jpg" > on — ждёт, когда

    у браузера будет возможность off — декодирует сразу, блокируя основной поток — — 91
  92. new Image() onload decode() Загрузка скриптом const img = ;

    img.src = 'picture.png'; img. = () => { // Вставка img }; img. .then(() => { // Вставка img }); Пока только в Chrome, см. MDN и ждите счастья. 01. 02. 01. 02. 03. 01. 02. 03. 92
  93. new Image() decode() Проверка поддержки const img = ; img.src

    = 'picture.webp'; img. .then(() => { console.info('WebP'); }).catch(() => { console.warn('Извини'); }); 01. 02. 03. 04. 05. 06. 07. 93
  94. Спасибо!

  95. @pepelsbey

  96. Ссылки The anatomy of responsive images The origin of the

    IMG tag Imagery on the Web The joy of optimizing images Converting images to WebP Новый кодек AV1 WebP Docs: getting started The CSS Paint API High efficiency image file format Responsive images: Use cases Use Imagemin to compress images — — — — — — — — — — — 96
  97. sokr.me/eif