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

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

Transcript

1. Делайте
   из слона
   муху
   

   View Slide

2. :nth-fest(3n)
   2013 ∙ 2016 ∙ 2019…
   

   View Slide

3. View Slide

4. View Slide

5. youtube.com/pepelsbey
   

   View Slide

6. Ситуация
   

   View Slide

7. View Slide

8. 23 контентных
   картинки на 1,4 МБ
   Заняло 1 минуту
   сделать 900 КБ
   —
   —
   8
   

   View Slide

9. © Fox Searchlight Pictures
   

   View Slide

10. Графика
    

    View Slide

11. Контент
    Интерфейс
    —
    —
    11
    

    View Slide

12. Контент
    Содержимое страницы
    Создаётся после
    Копируется, сохраняется
    Живёт отдельно от кода
    Нужна пользователям
    Интерфейс
    Оформление, дизайн
    Как код, только нет
    Создаётся с кодом
    Живёт кодом
    Иногда и правда код
    —
    —
    —
    —
    —
    —
    —
    —
    —
    —
    © Matt Groening
    12
    

    View Slide

13. Форматы
    13
    

    View Slide

14. View Slide

15. Векторные
    Цвета Прозрачность Анимация
    SVG Много Да Да
    SVG — это программируемая графика, как Canvas.
    15
    

    View Slide

16. Растровые
    Цвета Прозрачность Анимация
    GIF 256 Да Да
    PNG 256 и больше Да, альфа Да *
    JPEG Много Нет Нет
    WebP 256 и больше Да, альфа Да
    HEIC Много Да, альфа Да
    16
    

    View Slide

17. Гифка — это жанр,
    а не формат графики.
    17
    

    View Slide

18. Анимация
    18
    

    View Slide

19. © The Walt Disney Company
    

    View Slide

20. video/webm bolt.webm
    video/mp4 bolt.mp4
    Видео
    
    
    
    
    $ ffmpeg -i bolt.gif -movflags faststart -pix_fmt yuv420p -crf
    01.
    02.
    03.
    04.
    20
    

    View Slide

21. image/webp bolt.webp
    bolt.gif
    Если очень нужно
    
    
    
    
    $ gif2webp bolt.gif -o bolt.webp
    01.
    02.
    03.
    04.
    21
    

    View Slide

22. Новый кодек AV1, Андрей Ситник
    

    View Slide

23. GIF
    

    View Slide

24. Создание
    

    View Slide

25. Редакторы
    25
    

    View Slide

26. View Slide

27. © 20th Century Fox
    

    View Slide

28. CSS-графика
    Ручной SVG
    Canvas
    CSS Paint API
    —
    —
    —
    —
    28
    

    View Slide

29. burger
    burger__line
    burger__line
    burger__line
    CSS-графика
    
    
    
    
    
    01.
    02.
    03.
    04.
    05.
    29
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. 0 0 12 10
    0
    4
    8
    Ручной SVG
    
    
    
    
    
    01.
    02.
    03.
    04.
    05.
    33
    

    View Slide

34. Canvas
    34
    

    View Slide

35. Canvas
    © Matt Groening
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

39. #32b332
    CSS Paint API
    div:hover {
    --burger-color: ;
    }
    01.
    02.
    03.
    39
    

    View Slide

40. CSS Paint API
    © Matt Groening
    

    View Slide

41. Экспорт
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. data:image/png;base64
    Заглядывайте в SVG
    
    56
    

    View Slide

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
    

    View Slide

58. © Fox Searchlight Pictures
    

    View Slide

59. Оптимизация
    

    View Slide

60. Экспортируйте
    где угодно
    Сжимайте
    инструментами
    1.
    2.
    60
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. Вставка
    

    View Slide

66. Контент
    Интерфейс
    —
    —
    66
    

    View Slide

67. Хороший интерфейс
    как прогресс-бар.
    67
    

    View Slide

68. Рыжий кот
    Рыжий кот
    Мой кот самый лучший
    Тегом
    
    
    
    
    
    Идеально для контентных картинок.
    01.
    02.
    03.
    04.
    68
    

    View Slide

69. cat@2x.webp 2x
    cat.webp 1x
    cat@2x.jpg 2x
    cat.jpg
    Тегом: плюшки
    
    srcset="
    ">
    src=" " alt="Рыжий кот">
    
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    69
    

    View Slide

70. cat@3x.jpg 3x
    cat@2x.jpg 2x
    cat.jpg
    Тегом: плюшки
    srcset=" "
    src=" "
    alt="Рыжий кот">
    Для ретины достаточно атрибута srcset .
    01.
    02.
    03.
    04.
    70
    

    View Slide

71. background-image
    Фоном
    button {
    : url(icon.png);
    }
    01.
    02.
    03.
    71
    

    View Slide

72. min-resolution: 2dppx
    icon@2x.png
    Фоном: плюшки
    @media ( ) {
    button {
    background-image: url( );
    }
    }
    Не забудьте про Autoprefixer -webkit-min-device-pixel-ratio .
    01.
    02.
    03.
    04.
    05.
    72
    

    View Slide

73. background-image: url(icon.webp)
    icon.webp
    Фоном: облом
    @supports ( ) {
    button {
    background-image: url( );
    }
    }
    Другой формат в стилях просто не подсунуть, см. Modernizr.
    01.
    02.
    03.
    04.
    05.
    73
    

    View Slide

74. © Matt Groening
    

    View Slide

75. background-size
    Всегда фоном!
    div.picture {
    background-image: url(picture.png);
    : cover;
    }
    01.
    02.
    03.
    04.
    75
    

    View Slide

76. object-fit
    object-position
    Лучше тегом
    img, video {
    : cover;
    : 25% 0;
    }
    01.
    02.
    03.
    04.
    76
    

    View Slide

77. item-curator__image
    Нет, правда
    style="background-image: url('5535.jpg')">
    
    01.
    02.
    03.
    77
    

    View Slide

78. a::before
    content
    Стилями
    {
    : url(icon.png);
    }
    Вставляет оформление в контент стилями.
    01.
    02.
    03.
    78
    

    View Slide

79. burger Меню
    burger__line
    burger__line
    burger__line
    Инлайном
    
    
    
    
    
    Видно из стилей, удобно менять цвета.
    01.
    02.
    03.
    04.
    05.
    79
    

    View Slide

80. #4b86c2
    #32b332
    Инлайном
    .burger {
    fill: ;
    }
    .burger:hover {
    fill: ;
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    80
    

    View Slide

81. Меню
    #burger
    Спрайтом
    viewBox="0 0 12 10" aria-label=" ">
    
    
    Видно из стилей, удобно менять цвета.
    01.
    02.
    03.
    04.
    81
    

    View Slide

82. Меню
    sprite.svg#burger
    Внешним спрайтом
    aria-label=" ">
    
    
    К сожалению, стили уже не пробьются внутрь. Но оно вам точно нужно?
    01.
    02.
    03.
    04.
    82
    

    View Slide

83. xmlns
    burger 0 0 12 10
    Внешним спрайтом
    
    
    
    
    
    
    
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    83
    

    View Slide

84. data:image/png;base64
    Base64
    button {
    background-image: url(' ,iVBORw0K
    EUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7EAAAOxAGV
    AAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyA
    MAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAE
    ABBkAAAgyAAAQJABLJBGFFAIAgAwAAQQYAAIIMAAAEGQA…');
    }
    01.
    02.
    03.
    84
    

    View Slide

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
    

    View Slide

86. DVD+RW
    

    View Slide

87. Внешние ресурсы
    попадают в кэш
    Критические ресурсы
    нужны лёгкие
    1.
    2.
    87
    

    View Slide

88. Загрузка
    

    View Slide

89. lazyload="on"
    Ленивая загрузка
    
    on — откладывает запрос до контента
    off — запрашивает сразу же
    auto — как решит браузер
    Feature-Policy: lazyload 'self'(auto|off|force)
    —
    —
    —
    89
    

    View Slide

90. importance="low"
    preload
    Приоритет загрузки
    
    high — повышает приоритет загрузки
    low — понижает приоритет загрузки
    Если очень-очень нужно, то осторожно можно:
    
    —
    —
    90
    

    View Slide

91. async="on"
    Неблокирующий рендеринг
    
    on — ждёт, когда у браузера будет возможность
    off — декодирует сразу, блокируя основной поток
    —
    —
    91
    

    View Slide

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
    

    View Slide

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
    

    View Slide

94. Спасибо!
    

    View Slide

95. @pepelsbey
    

    View Slide

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
    

    View Slide

97. sokr.me/eif
    

    View Slide