Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

C27317d1ebe4e4a01504acab9d87fe61?s=128

Polina Gurtovaya

February 29, 2020
Tweet

Transcript

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

  2. 2

  3. 3

  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 Чтобы эффективно оптимизировать изображения, надо их понимать

  13. 9

  14. Как устроен PNG контейнер 10

  15. 11 const reader = new FileReader(); reader.current.readAsArrayBuffer(file); reader.onload = event

    => console.log( splitToChunks(event.target.result) ); Разбираем PNG-файл
  16. 12

  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 От чего зависит размер картинки?
  22. 18

  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, но алгоритм сжатия зависит

    от кодека
  37. 33

  38. Что лежит внутри WebP? 34

  39. 35 Хватит теории! Давайте посмотрим на картинки

  40. 36 На что способны современные форматы? Сжимаем картинку 1000 x

    1000 px до 15КБ
  41. 37

  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

  53. 49

  54. 50

  55. 51 Инструменты оптимизации

  56. 52 Дизайнер

  57. 53 Оптимизируем “на лету” imgproxy.net

  58. 54

  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