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

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

Вадим Макеев, HTML Academy

Ситуация

DUMP

Как так вышло, DUMP?
© Fox Searchlight Pictures

Графика

  • Контент
  • Интерфейс

Контент

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

Интерфейс

  • Оформление, дизайн
  • Как код, только нет
  • Создаётся с кодом
  • Живёт кодом
  • Иногда и правда код

Фрай

© Matt Groening

Форматы

Векторные

ЦветаПрозрачностьАнимация
SVGМногоДаДа

SVG — это программируемая графика, как Canvas.

Растровые

ЦветаПрозрачностьАнимация
GIF256ДаДа
PNG256 и большеДа, альфаДа *
JPEGМногоНетНет
WebP256 и большеДа, альфаДа
HEICМногоДа, альфаДа

Анимация

© The Walt Disney Company

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

Видео

<video autoplay loop muted>    <source type="video/webm" src="bolt.webm">    <source type="video/mp4" src="bolt.mp4"></video>
$ ffmpeg -i bolt.gif -movflags faststart -pix_fmt yuv420p -crf 0 bolt.mp4

Если очень нужно

<picture>    <source type="image/webp" srcset="bolt.webp">    <img src="bolt.gif" alt="Болт кривляется"></picture>
$ gif2webp bolt.gif -o bolt.webp

AV1

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

GIF

Анимированные песочные часыКадры анимации песочных часов

Создание

Редакторы

PhotoshopIllustratorAffinitySketchFigmaCSS

Дедпул в образе Боба Росса
© 20th Century Fox
  • CSS-графика
  • Ручной SVG
  • Canvas
  • CSS Paint API

CSS-графика

<div class="burger">    <div class="burger__line burger__line--1"></div>    <div class="burger__line burger__line--2"></div>    <div class="burger__line burger__line--3"></div></div>

CSS-графика

.burger {    position: relative;    width: 12px;    height: 10px;}
.burger__line {    position: absolute;    left: 0;    width: 12px;    height: 2px;    background-color: #4b86c2;}

CSS-графика

.burger__line--1 {    top: 0;}.burger__line--2 {    top: 4px;}
.burger__line--1 {    top: 8px;}

CSS-графика получше

.burger {    width: 12px; height: 10px;    background-image: repeating-linear-gradient(        #4b86c2, #4b86c2 2px,        #fff 2px, #fff 4px    );}

Ручной SVG

<svg width="120" viewBox="0 0 12 10" fill="#4b86c2">    <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"/></svg>

Canvas

Canvas

Скучающий Фрай
© Matt Groening

CSS Paint API

div {    --burger-color: #4b86c2;    background-image: url('burger.png');    background-image: paint(burger);}
CSS.paintWorklet.addModule('burger.js');

CSS Paint API

class Shape {    static get inputProperties() {        return ['--burger-color'];    }    paint(context, geometry, properties) {  }}registerPaint('burger', Shape);

CSS Paint API

const color = properties.get(    '--burger-color');context.fillStyle = color;context.fillRect(0, 0, 120, 20);context.fillRect(0, 40, 120, 20);context.fillRect(0, 80, 120, 20);

CSS Paint API

div:hover {    --burger-color: #32b332;}

CSS Paint API

Фрай размахивает пачкой денег
© Matt Groening

Экспорт

Иконка PhotoshopPhotoshop: Save for webPhotoshop: Экспорт документаPhotoshop: Выбор слояPhotoshop: Экспорт слояPhotoshop: Экспорт группыИконка IllustratorIllustrator: Сбор ассетовIllustrator: Экспорт ассетовIllustrator: Копирование кодаAvocodeZeplinSketchFigmaSketch: Экспорт и настройкиSketch: Плагин SVGO в настройках

Заглядывайте в SVG

<desc>Created using Figma</desc>
<path d="m269.246984 855.728762 78.364445-47.425016
    c15.118222 26.804825 28.871111 49.483175 61.858539
    49.483175 31.620064 0 51.555556-12.368864 51.5555
    56-60.481016v-327.192381h96.229587v328.553651c0
    99.669333-58.422857 145.03619-143.660698…"/>

Заглядывайте в SVG

<svg><image xlink:href="data:image/png;base64,iVBORw0KGgo
AAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7EAAAOxAGV
Kw4bAAAIXUlEQVR4nO3WMQEAIAzAsIF/z+ACjiYKenbNzBkAIGX/DgAA3
jMAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyA
AAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwA
AQQYAAIIMAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAE
GQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQA…"/></svg>

Экспорт

PNGPNG 8JPGSVG
Photoshop8521553596130
Affinity155585610793602
Sketch56393836525
Figma21797797153
Руки111111114498

Оптимизация

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

ImageOptimTinyPNGSVGOMGSquoosh

Вставка

  • Контент
  • Интерфейс

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

Тегом

<img src="cat.jpg" alt="Рыжий кот">
<figure>    <img src="cat.jpg" alt="Рыжий кот">    <figcaption>Мой кот самый лучший</figcaption></figure>

Идеально для контентных картинок.

Тегом: плюшки

<picture>    <source type="image/webp"         srcset="cat@2x.webp 2x                 cat.webp 1x">    <img srcset="cat@2x.jpg 2x"            src="cat.jpg" alt="Рыжий кот"></picture>

Тегом: плюшки

<img srcset="cat@3x.jpg 3x"     srcset="cat@2x.jpg 2x"        src="cat.jpg"     alt="Рыжий кот">

Для ретины достаточно атрибута srcset.

Фоном

button {    background-image: url(icon.png);}

Фоном: плюшки

@media (min-resolution: 2dppx) {    button {        background-image: url(icon@2x.png);    }}

Не забудьте про Autoprefixer -webkit-min-device-pixel-ratio.

Фоном: облом

@supports (background-image: url(icon.webp)) {    button {        background-image: url(icon.webp);    }}

Другой формат в стилях просто не подсунуть, см. Modernizr.

© Matt Groening

Всегда фоном!

div.picture {    background-image: url(picture.png);    background-size: cover;}

Лучше тегом

img, video {    object-fit: cover;    object-position: 25% 0;}

Стилями

a::before {    content: url(icon.png);}

Вставляет оформление в контент стилями.

Инлайном

<svg class="burger" viewBox="0 0 12 10" aria-label="Меню">    <rect class="burger__line" x="0" y="0"/>    <rect class="burger__line" x="0" y="4"/>    <rect class="burger__line" x="0" y="8"/></svg>

Видно из стилей, удобно менять цвета.

Инлайном

.burger {    fill: #4b86c2;}.burger:hover {    fill: #32b332;}

Спрайтом

<svg width="120" height="100"    viewBox="0 0 12 10" aria-label="Меню">    <use xlink:href="#burger"></use></svg>

Видно из стилей, удобно менять цвета.

Внешним спрайтом

<svg width="120" height="100"     aria-label="Меню">    <use xlink:href="sprite.svg#burger"></use></svg>

К сожалению, стили уже не пробьются внутрь. Но оно вам точно нужно?

Внешним спрайтом

<svg xmlns="http://www.w3.org/2000/svg">    <symbol id="burger" viewBox="0 0 12 10">        <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>

Base64

button {    background-image: url('data:image/png;base64,iVBORw0K
        EUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7EAAAOxAGV
        AAgyAAAQJABAIAgAwAAQQYAAIIMAAAEGQAACDIAABBkAAAgyA
        MAAAEGQAACDIAABBkAAAgyAAAQJABAIAgAwAAQQYAAIIMAAAE
        ABBkAAAgyAAAQJABLJBGFFAIAgAwAAQQYAAIIMAAAEGQA…');}

URL-кодирование

button {    background-image: url('data:image/svg+xml,%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…');}

DVD+RW

DVD-диск

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

Загрузка

Ленивая загрузка

<img src="picture.jpg" loading="lazy">
  • lazy — подходит для ленивой загрузки
  • eager — не подходит, загрузить сразу
  • auto — браузер сам решит, как загружать

Приоритет загрузки

<img src="picture.jpg" importance="low">
  • high — повышает приоритет загрузки
  • low — понижает приоритет загрузки

Если очень-очень нужно, то осторожно можно:

<link rel="preload" href="picture.jpg" as="image">

Неблокирующий рендеринг

<img src="picture.jpg" async="on">
  • on — ждёт, когда у браузера будет возможность
  • off — декодирует сразу, блокируя основной поток

Загрузка скриптом

const img = new Image();img.src = 'picture.png';
img.onload = () => {    // Вставка img};        
img.decode().then(() => {     // Вставка img});

Пока только в Chrome, см. MDN и ждите счастья.

Проверка поддержки

const img = new Image();img.src = 'picture.webp';img.decode().then(() => {    console.info('WebP');}).catch(() => {    console.warn('Извини');});
Милдред звонит по телефону
© Fox Searchlight Pictures

Спасибо!

Ссылки

@pepelsbey

Добавить комментарий

You may also like