Slide 1
Slide 1 text
Картинки как коробки
Что же там внутри?
Slide 2
Slide 2 text
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
X
Slide 5
Slide 5 text
4
Ссылка на слайды и прочие
материалы будет в конце доклада
Slide 6
Slide 6 text
Просто loading
Slide 7
Slide 7 text
Lazy loading
Slide 8
Slide 8 text
Особенности lazy loading в Сhrome
Chrome откладывает загрузку
картинок, если они находятся на X px
от вьюпорта
X зависит от типа соединения
Slide 9
Slide 9 text
5
Зачем этот доклад?
Slide 10
Slide 10 text
6
+ «современные форматы»
Slide 11
Slide 11 text
7
Оптимизируем размер
$ vips resize cat.png cat-half.png 0.5
Slide 12
Slide 12 text
8
Чтобы эффективно
оптимизировать изображения,
надо их понимать
Slide 13
Slide 13 text
9
Slide 14
Slide 14 text
Как устроен PNG контейнер
10
Slide 15
Slide 15 text
11
const reader = new FileReader();
reader.current.readAsArrayBuffer(file);
reader.onload = event =>
console.log(
splitToChunks(event.target.result)
);
Разбираем PNG-файл
Slide 16
Slide 16 text
12
Slide 17
Slide 17 text
Что внутри IHDR ?
13
width height bitDepth
colorType
interlacing
Slide 18
Slide 18 text
Что внутри IDAT?
Filters (predictive coding)
Samples (channels / color
indexes)
14
Slide 19
Slide 19 text
Color type
True Color + alpha
True Color
GrayScale
IndexedColor
15
Slide 20
Slide 20 text
Interlaced PNG
16
interlacing — просто
иная сортировка
пикселей
Картинка грузится
постепенно, но весит
больше (почти всегда)
Slide 21
Slide 21 text
От того что на картинке
От энкодера
От параметров энкодера
… ну и от формата, ага
17
От чего зависит размер картинки?
Slide 22
Slide 22 text
18
Slide 23
Slide 23 text
19
Downsampling + blocks
Slide 24
Slide 24 text
Приключения маленького блока
20
128 -163 7 -27 -3 3 -8 -3
103 122 73 -1 -15 -17 0 6
148 20 -24 -44 -13 6 -6 -3
12 -36 -67 4 13 -5 2 -4
-41 -5 -1 -21 6 0 5 3
-40 -3 5 -2 5 7 -4 -1
-35 11 10 16 -1 -2 -2 -1
-7 -4 10 15 1 0 -5 -3
8 8 8 9 13 19 28 43
8 9 10 14 17 20 27 38
8 10 12 16 22 31 46 68
9 14 16 20 27 37 53 78
13 17 22 27 35 47 66 95
19 20 31 37 47 62 85 119
28 27 46 53 66 85 113 156
43 38 68 78 95 119 156 209
Slide 25
Slide 25 text
16 -19 1 -2 0 0 0 0
13 14 7 0 0 0 0 0
18 2 -1 -2 0 0 0 0
1 -2 -3 0 0 0 0 0
-2 0 0 0 0 0 0 0
-1 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 0
Приключения маленького блока
21
8 8 8 9 13 19 28 43
8 9 10 14 17 20 27 38
8 10 12 16 22 31 46 68
9 14 16 20 27 37 53 78
13 17 22 27 35 47 66 95
19 20 31 37 47 62 85 119
28 27 46 53 66 85 113 156
43 38 68 78 95 119 156 209
Slide 26
Slide 26 text
Пакуем
22
Slide 27
Slide 27 text
Progressive JPEG
23
Slide 28
Slide 28 text
JPEG 2000 (.jp2)
24
Эффективный
Может быть прозрачным
Умеет быть lossless
Slide 29
Slide 29 text
Внезапно про видео
25
Slide 30
Slide 30 text
26
Абстрактный кодек в
вакууме похож на JPEG
Slide 31
Slide 31 text
27
Downsampling + blocks
Размер блока зависит от
кодека
Блок можно разбивать на
дополнительные блоки
Максимальный размер
блока зависит от кодека
Slide 32
Slide 32 text
28
Prediction modes
Предсказываем пиксели
текущего блока по другим
блокам
Количество режимов
предсказания зависит от
кодека
Slide 33
Slide 33 text
29
Преобразуем блок
Похоже на JPEG, но
преобразования могут
быть другими.
Slide 34
Slide 34 text
30
Quantization (вносим потери)
Похоже на JPEG, но
табличек может быть
больше
Slide 35
Slide 35 text
31
Применяем фильтры
Чтобы избавиться от
артефактов сжатия
применяем фильтры
Для разных кодеков —
разные фильтры
Slide 36
Slide 36 text
32
Lossless compression
Похоже на JPEG, но
алгоритм сжатия
зависит от кодека
Slide 37
Slide 37 text
33
Slide 38
Slide 38 text
Что лежит внутри WebP?
34
Slide 39
Slide 39 text
35
Хватит теории! Давайте
посмотрим на картинки
Slide 40
Slide 40 text
36
На что способны современные форматы?
Сжимаем картинку
1000 x 1000 px до 15КБ
Slide 41
Slide 41 text
37
Slide 42
Slide 42 text
PNG vs. WebP
38
Slide 43
Slide 43 text
PNG vs. WebP (lossless)
39
Slide 44
Slide 44 text
PNG vs. SVG
40
Slide 45
Slide 45 text
JPEG vs. WebP
41
Slide 46
Slide 46 text
JPEG vs. WebP
42
Slide 47
Slide 47 text
JPEG vs. WebP
43
Slide 48
Slide 48 text
H.264 vs. WebP
44
Slide 49
Slide 49 text
AV1 vs. WebP
45
Slide 50
Slide 50 text
JPEG vs. WebP
46
Slide 51
Slide 51 text
Картинки могут тормозить?
47
Slide 52
Slide 52 text
Хорошие новости: image decode выполняется в
отдельном потоке
48
Slide 53
Slide 53 text
49
Slide 54
Slide 54 text
50
Slide 55
Slide 55 text
51
Инструменты оптимизации
Slide 56
Slide 56 text
52
Дизайнер
Slide 57
Slide 57 text
53
Оптимизируем “на лету”
imgproxy.net
Slide 58
Slide 58 text
54
Slide 59
Slide 59 text
55
https:/
/imgproxy.exmpl.com/AfrO.../rs:fill:300:400/g:sm/
pngo:0:1:256/plain/https:/
/exmpl.com/images/cat.jpg@png
Slide 60
Slide 60 text
56
Ручные
оптимизации
Slide 61
Slide 61 text
57
JS/Rust/Python/
Ruby/C++/
Haskell… App :)
Slide 62
Slide 62 text
58
Спасибо!
@polina_gurtovaya
@pgurtovaya
[email protected]
58
@evilmartians
@evilmartians_ru
evilmartians.com
github.com/HellSquirrel/image-internals-talk