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

CodeFest 2019. Вадим Макеев (HTML Academy) — Де...

CodeFest
April 07, 2019

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

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

CodeFest

April 07, 2019
Tweet

More Decks by CodeFest

Other Decks in Technology

Transcript

  1. Контент Содержимое страницы Создаётся после Копируется, сохраняется Живёт отдельно от

    кода Нужна пользователям Интерфейс Оформление, дизайн Как код, только нет Создаётся с кодом Живёт кодом Иногда и правда код — — — — — — — — — — © Matt Groening 12
  2. Векторные Цвета Прозрачность Анимация SVG Много Да Да SVG —

    это программируемая графика, как Canvas. 15
  3. Растровые Цвета Прозрачность Анимация GIF 256 Да Да PNG 256

    и больше Да, альфа Да * JPEG Много Нет Нет WebP 256 и больше Да, альфа Да HEIC Много Да, альфа Да 16
  4. video/webm bolt.webm video/mp4 bolt.mp4 Видео <video autoplay loop muted> <source

    type=" " src=" "> <source type=" " src=" "> </video> $ ffmpeg -i bolt.gif -movflags faststart -pix_fmt yuv420p -crf 01. 02. 03. 04. 20
  5. image/webp bolt.webp bolt.gif Если очень нужно <picture> <source type=" "

    srcset=" "> <img src=" " alt="Болт кривляется"> </picture> $ gif2webp bolt.gif -o bolt.webp 01. 02. 03. 04. 21
  6. GIF

  7. burger burger__line burger__line burger__line CSS-графика <div class=" "> <div class="

    burger__line--1"></div> <div class=" burger__line--2"></div> <div class=" burger__line--3"></div> </div> 01. 02. 03. 04. 05. 29
  8. .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
  9. 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
  10. 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
  11. 0 0 12 10 0 4 8 Ручной SVG <svg

    width="120" viewBox=" " fill="#4b86c2"> <rect width="12" height="2" x="0" y=" "/> <rect width="12" height="2" x="0" y=" "/> <rect width="12" height="2" x="0" y=" "/> </svg> 01. 02. 03. 04. 05. 33
  12. #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
  13. 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
  14. --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
  15. data:image/png;base64 Заглядывайте в SVG <svg><image xlink:href=" ,iVBORw0KGgo AAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7EAAAOxAGV Kw4bAAAIXUlEQVR4nO3WMQEAIAzAsIF/z+ACjiYKenbNzBkAIGX/DgAA3 jMAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyA

    AAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwA AQQYAAIIMAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAE GQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQA…"/></svg> 56
  16. Экспорт 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
  17. Рыжий кот Рыжий кот Мой кот самый лучший Тегом <img

    src="cat.jpg" alt=" "> <figure> <img src="cat.jpg" alt=" "> <figcaption> </figcaption> </figure> Идеально для контентных картинок. 01. 02. 03. 04. 68
  18. [email protected] 2x cat.webp 1x [email protected] 2x cat.jpg Тегом: плюшки <picture>

    <source type="image/webp" srcset=" "> <img srcset=" " src=" " alt="Рыжий кот"> </picture> 01. 02. 03. 04. 05. 06. 07. 69
  19. [email protected] 3x [email protected] 2x cat.jpg Тегом: плюшки <img srcset=" "

    srcset=" " src=" " alt="Рыжий кот"> Для ретины достаточно атрибута srcset . 01. 02. 03. 04. 70
  20. min-resolution: 2dppx [email protected] Фоном: плюшки @media ( ) { button

    { background-image: url( ); } } Не забудьте про Autoprefixer -webkit-min-device-pixel-ratio . 01. 02. 03. 04. 05. 72
  21. background-image: url(icon.webp) icon.webp Фоном: облом @supports ( ) { button

    { background-image: url( ); } } Другой формат в стилях просто не подсунуть, см. Modernizr. 01. 02. 03. 04. 05. 73
  22. burger Меню burger__line burger__line burger__line Инлайном <svg class=" " viewBox="0

    0 12 10" aria-label=" "> <rect class=" " x="0" y="0"/> <rect class=" " x="0" y="4"/> <rect class=" " x="0" y="8"/> </svg> Видно из стилей, удобно менять цвета. 01. 02. 03. 04. 05. 79
  23. Меню #burger Спрайтом <svg width="120" height="100" viewBox="0 0 12 10"

    aria-label=" "> <use xlink:href=" "></use> </svg> Видно из стилей, удобно менять цвета. 01. 02. 03. 04. 81
  24. Меню sprite.svg#burger Внешним спрайтом <svg width="120" height="100" aria-label=" "> <use

    xlink:href=" "></use> </svg> К сожалению, стили уже не пробьются внутрь. Но оно вам точно нужно? 01. 02. 03. 04. 82
  25. xmlns burger 0 0 12 10 Внешним спрайтом <svg ="http://www.w3.org/2000/svg">

    <symbol id=" " viewBox=" "> <rect width="12" height="2" x="0" y="0"/> <rect width="12" height="2" x="0" y="4"/> <rect width="12" height="2" x="0" y="8"/> </symbol> </svg> 01. 02. 03. 04. 05. 06. 07. 83
  26. 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
  27. lazyload="on" Ленивая загрузка <img src="picture.jpg" > on — откладывает запрос

    до контента off — запрашивает сразу же auto — как решит браузер Feature-Policy: lazyload 'self'(auto|off|force) — — — 89
  28. importance="low" preload Приоритет загрузки <img src="picture.jpg" > high — повышает

    приоритет загрузки low — понижает приоритет загрузки Если очень-очень нужно, то осторожно можно: <link rel=" " href="picture.jpg" as="image"> — — 90
  29. async="on" Неблокирующий рендеринг <img src="picture.jpg" > on — ждёт, когда

    у браузера будет возможность off — декодирует сразу, блокируя основной поток — — 91
  30. 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
  31. 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
  32. Ссылки 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