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

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

Transcript

1. Делайте из слона муху
2. :nth-fest(3n) 2013 ∙ 2016 ∙ 2019…
5. youtube.com/pepelsbey
6. Ситуация
8. 23 контентных картинки на 1,4 МБ Заняло 1 минуту сделать 900 КБ — — 8
9. © Fox Searchlight Pictures
10. Графика
11. Контент Интерфейс — — 11
12. Контент Содержимое страницы Создаётся после Копируется, сохраняется Живёт отдельно от кода Нужна пользователям Интерфейс Оформление, дизайн Как код, только нет Создаётся с кодом Живёт кодом Иногда и правда код — — — — — — — — — — © Matt Groening 12
13. Форматы 13
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
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. Экспорт
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
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