Возвращение ножа и паровоза

Вадим Макеев, Opera Software

Возвращение
ножа и паровоза

Графика

Растровая

GIF скоро стукнет 30, PNG и JPG — 20 лет.
SVG ещё молодой, всего 15 лет.
WebP всего 3 года и 40% поддержки.
Динамический растр Canvas и его 83%.

Важность правильного выбора формата сложно переоценить.

SVG

Шаблон

			<svg xmlns="http://www.w3.org/2000/svg">
			    <rect
			        x="100" y="100"
			        width="550" height="550"
			        fill="red" stroke="black"
			    />
			</svg>

Мощъ SVG

WebP

MIF Magic Image Format

Редакторы

Не надо

Фотошоп

Жаба

Раньше за пакет: 60 000 ⃏
Ежемесячно: 5 000 ⃏
Сейчас: 1 500 ⃏

sRGB

Скетч 2000 ₶

Утилиты

xScope

Color
Snapper

CSS Hat

Enigma64

Slicy

Оптимизация

Умная и тупая

Умная оптимизация

Оптимизация JPEG в 3 частях.
Оптимизация PNG в 4 частях.
Комбинаторика.

imgo

svgo

borschik

Compass

Спрайты?

dataURI

SPDY

Рисуем стилями

			E {
			    clip: rect(…);
			    box-shadow:
			        0 0 0 10px #FFF, 0 0 0 20px #000;
			    border-radius: 12px;
			    border-image: url(shadow.png) 199 187 repeat;
			    }

border-image

Рисуем стилями

			E {
			    border: solid 0 transparent;
			    border-width: 199px 187px;
			    -webkit-border-image: url(shadow.png) 199 187 repeat;
			    -o-border-image: url(shadow.png) 199 187 repeat;
			    border-image: url(shadow.png) 199 187 repeat;
			    }