Slide 1
Slide 1 text
Прекрасный мир
графики
1
Slide 2
Slide 2 text
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
4
Slide 5
Slide 5 text
Итак, прекрасный мир
графики
5
Slide 6
Slide 6 text
Графика
Иллюстрирует
Развлекает
Добавляет немного добра на
страничку
6
Slide 7
Slide 7 text
Это может быть
Картинка
Видяшка Взрывающийся вертолёт
7
Slide 8
Slide 8 text
Для десктопа
~50% контента это изображения
8
Slide 9
Slide 9 text
Это самая яркая часть нашей страницы
9
Slide 10
Slide 10 text
Мы с дизайнерами
решаем одну задачу
10
Slide 11
Slide 11 text
Для кого?
11
Slide 12
Slide 12 text
Человек
Использует глаза и мозг
Злопамятное существо
Любит когда 60fps
Не любит ждать
12
Slide 13
Slide 13 text
Зачем ?
13
Slide 14
Slide 14 text
14
Slide 15
Slide 15 text
15
Slide 16
Slide 16 text
Изображения
16
Slide 17
Slide 17 text
17
Использовать
экспортированное из
макета
Использовать что дадут
Попросить исходник
Провести эксперимент
Slide 18
Slide 18 text
Инструменты для экспериментов
svgo (svgoomg- web-версия)
optipng, cwebp, cjpeg aka mozjpeg, ImageMagic, libvips
imagemin, sharp
squoosh
ffmpeg
imageoptim
18
Slide 19
Slide 19 text
SVG
PNG
JPEG
WEBP
19
Pастр
Вектор
Slide 20
Slide 20 text
pазмер контейнера devicePixelRatio
20
Каким должен быть размер растрового изображения?
Slide 21
Slide 21 text
Чтобы везде работало
21
Slide 22
Slide 22 text
Когда SVG заходят хорошо
22
Часть изображения можно
представить как набор
геометрических примитивов
Есть интерактивность
Нужно цеплять маркеры к фону
Нужно много размеров
Slide 23
Slide 23 text
23
Со временем в голове сформируется нужная связь и
потребность в экспериментах снизится
Slide 24
Slide 24 text
Эксперимент
24
Slide 25
Slide 25 text
Берем тестовую картинку
unicorn.svg - 12kB
После svgo - 5.1kB (57.5%)
gzip - 2.7kB (77%)
webP@2x - 4.7kB (60.8%)
webP - 2.2kB (81.7%)
25
Slide 26
Slide 26 text
Тестовый единорог внутри
26
Slide 27
Slide 27 text
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
27
Slide 28
Slide 28 text
28
M - начало пути
L - линия (V, H)
C - кривая (S, Q, T)
A - дуга
Z - замыкаем путь
Slide 29
Slide 29 text
SVG можно морфить
flubber отлично морфит
29
Slide 30
Slide 30 text
JavaScript - анимации
JS - анимации выполняются в том
же “потоке” что и основной JS
requestAnimationFrame —
обязательно нужно использовать,
но он никогда не сработает если
основной поток занят
У нас всего 16.666667 ms :)
30
Slide 31
Slide 31 text
31
Slide 32
Slide 32 text
Пример с печенькой
Slide 33
Slide 33 text
width and height
33
Original w/o width & height width=30vh
Slide 34
Slide 34 text
viewBox
overflow: visible
34
viewBox: 0 0 100 120
width: 90px
Slide 35
Slide 35 text
preserveAspectRatio
none
35
meet slice
Slide 36
Slide 36 text
Округление важно
36
d="M146.215 46.605c5.233…" d="M146.2 46.6c5.2…”
Slide 37
Slide 37 text
Насколько округлять?
37
Надо учитывать: container size, devicePixelRatio, inner
transformations.
Начитать можно с :
1 знак - контейнер совпадает с размером svg, 2 знака —
контейнер в 10 раз больше …etc
Slide 38
Slide 38 text
Печенька с друзьями
38
Slide 39
Slide 39 text
Печенька с друзьями
39
Slide 40
Slide 40 text
Печенька с друзьями
40
Slide 41
Slide 41 text
Сюрпризы внутри SVG
41
Slide 42
Slide 42 text
Сюрпризы внутри SVG
42
Slide 43
Slide 43 text
Как инлайнить SVG
import React from "react";
import Logo from "./logo.svg";
const App = () => ;
export default App;
43
сreate-react-app использует
https:/
/github.com/smooth-code/svgr
Slide 44
Slide 44 text
Мы инлайним SVG чтобы с ними было
yдобно работать
44
Slide 45
Slide 45 text
Шевелящийся контент
45
Slide 46
Slide 46 text
Видео
46
Slide 47
Slide 47 text
ffmpeg - наш классный и универсальный инструмент
47
Slide 48
Slide 48 text
Контейнеры
webm
mp4
48
Slide 49
Slide 49 text
Видео кодеки
VP8
VP9
AV1
H.264
H.265
49
Slide 50
Slide 50 text
Используйте эффективный кодек
50
evl.ms/blog/better-web-video-with-av1-codec
Slide 51
Slide 51 text
Избегайте страшных звуков :)
51
Slide 52
Slide 52 text
Анимированные картинки
APNG
WebP
GIF
52
Slide 53
Slide 53 text
SVG — анимации
53
Slide 54
Slide 54 text
54
Slide 55
Slide 55 text
Есть куча прикольных анимирующихся
CSS свойств
55
Slide 56
Slide 56 text
Анимируй - трансформируй (transform)
56
.animated {
transform: ... ;
}
Все что делает
transform: (translate,
rotate, scale, skew)
можно описать при
помощи матрицы
Slide 57
Slide 57 text
57
.transformed {
transform: matrix3d(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
}
Slide 58
Slide 58 text
Фильтры
58
Slide 59
Slide 59 text
Clip-path
59
Slide 60
Slide 60 text
stroke-dasharray
60
Slide 61
Slide 61 text
Как анимировать
• CSS animation API (плохая поддержка)
• Можно костыльнуть через @keyframe
61
Slide 62
Slide 62 text
62
Slide 63
Slide 63 text
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);
Slide 64
Slide 64 text
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);
Slide 65
Slide 65 text
Что еще прикольного можно
делать?
65
Slide 66
Slide 66 text
Generative art
66
Slide 67
Slide 67 text
67
Slide 68
Slide 68 text
Процессинг и трансформация изображений
• Обрезать картинку
• Обнаружить предмет
• Применить затейливый фильтр (cместить цвета, etc)
• Что-нибудь измерить
68
При помощи можно:
Slide 69
Slide 69 text
Пиксель измеряющий
69
Slide 70
Slide 70 text
Все работает быстро
70
Slide 71
Slide 71 text
WebGL
71
Slide 72
Slide 72 text
72
56ms x6 slowdown
Slide 73
Slide 73 text
Почему спецеэффекты в web - редкость?
Низкая конверсия
Никто не верит в свои силы
Нам лень :)
73
Slide 74
Slide 74 text
Путь к успеху
Добавьте осознанности к
процессу
Используйте правильные
инструменты
Сравнивайте результаты
Не бойтесь экспериментировать
Почитайте спец. литературу :)
74
Slide 75
Slide 75 text
75
evl.ms/blog/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques