Картинки как коробки. Что же там внутри?

Картинки и видео — это «чёрные ящики», внутри которых лежит много интересного и непонятного. Но можно заглянуть внутрь некоторых форматов, всё там поменять и посмотреть, что из этого получится. При помощи эксперимента разберёмся, как превращать простые картинки в «эффективные картинки» с метриками, а затем на практике рассмотрим инструменты, которые могут делать это за нас.

Transcript

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