Показываем картинки пользователю:
подробное руководство

Никита Дубко

• Software Engineer в iTechArt Group;
• адепт философии Pure CSS Images;
• соорганизатор митапов MinskCSS и MinskJS.

Lighthouse

Путь изображения

1. Сохранение на сервере
2. Отправка на клиент по запросу
3. Декодирование и отображение в браузере
4. «Сохранить как...»

Сохранение
на сервере

Форматы изображений

• BMP, TIFF, TGA, ICO
• JPEG, JPEG 2000, JPEG XR
• PNG, APNG
• GIF
• WebP
• SVG
• FLIF, BPG, HEIF

Растровая графика

JPEG

Joint Photographic Experts Group
jpeg.org

Конвейер JPEG

1. Преобразование RGB в YUV
2. Разбиение матриц YUV на матрицы 8x8
3. Дискретное косинусоидальное преобразование 🤓
4. Квантование (сжатие)
5. Зигзаг-сканирование
6. RLE-свертывание (AAABBBCCC -> 3A3B3C)
7. Сжатие по Хаффману

Baseline JPEG

Progressive JPEG

Особенности progressive JPEG

• Изображение сразу видно целиком
• Меньше по размеру (в среднем)

• Не всегда понятно, когда загрузилось до конца
• Сильнее нагружает CPU из-за нескольких этапов декодирования

Используют прогрессивный JPEG

• Twitter
• Facebook
• Pinterest
• Yelp

Субдискретизация (chroma subsampling)

4:4:4 (1x1) Без субдискретизации

4:2:2 (2x1) Горизонтальная

Субдискретизация (chroma subsampling)

4:4:4 (1x1) Без субдискретизации

4:2:0 (2x2) Горизонтальная и вертикальная

Инструменты

• jpegtran
• tjko/jpegoptim
• mozilla/mozjpeg
• google/guetzli
• danielgtaylor/jpeg-archive
• imageoptim/imageoptim

Измерение искажений

• SSIM (индекс структурного сходства)
  IonicaBizau/img-ssim
• Butteraugli (психовизуальное подобие)
  google/butteraugli

Guetzli

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');


gulp.task('images', () => 
    gulp.src('images/*.jpg')
        .pipe(imagemin([
            imagemin.jpegtran({ progressive: true }),
        ]))
        .pipe(gulp.dest('dist'))
);

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminGuetzli = require('imagemin-guetzli');


gulp.task('guetzli', () => 
    gulp.src('src/*.jpg')
        .pipe(imagemin([ imageminGuetzli({ quality: 85 }) ]))
        .pipe(gulp.dest('dist'))
);

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

gulp.task('mozjpeg', () =>
    gulp.src('src/*.jpg')
        .pipe(imagemin([
            imageminMozjpeg({
                progressive: true,
                quality: 85,
                sample: ['2x1']
            })
        ]))
        .pipe(gulp.dest('dist'))
);

Лайфхак 2: Комбинация сжатий

gulp.task('jpegcombo', () =>
    gulp.src('src/*.jpg')
        .pipe(imagemin([ imageminGuetzli({ quality: 95 }) ]))
        .pipe(imagemin([
            imageminMozjpeg({
                progressive: true,
                quality: 85,
            })
        ]))
        .pipe(gulp.dest('dist'))
);

Лайфхак 3: EXIF

const shell = require('gulp-shell');

gulp.task('exif', () =>
    gulp.src('dist/*.jpg', { read: false })
        .pipe(shell([
            'exiftool -P -overwrite_original -all= <%=file.path%>'
        ]))
);

*.jp2 — JPEG2000
*.jxr — JPEG-XR

GIF

Graphics Interchange Format

Особенности GIF

• 256-цветовая палитра;
• 1 цвет палитры можно объявить прозрачным;
• сжатие без потерь (LZW);
• поддержка анимации.

GIF -> MP4

GIF -> WebM

<img src="kitty.gif" width="400" height="300">

⬇️

<video width="400" height="300"
       autoplay loop muted playsinline>
    <source src="kitty.webm" type="video/webm">
    <source src="kitty.mp4" type="video/mp4">
    <img src="kitty.gif" width="400" height="300">
</video>

Gifsicle

const gulp = require('gulp');
        const imagemin = require('gulp-imagemin');
        const imageminGifsicle = require('imagemin-gifsicle');
        

        gulp.task('gifsicle', () => 
            gulp.src('src/*.gif')
                .pipe(imagemin([ imageminGifsicle() ]))
                .pipe(gulp.dest('dist'))
        );

PNG

Portable Network Graphics
«PNG is Not GIF»

Особенности PNG

• спроектирован для замены GIF и TIFF;
• максимальное количество цветов — 2⁴⁸;
• поддержка альфа-канала;
• возможность гамма-коррекции и цветовой коррекции (ICC);
• сжатие без потерь (Deflate);
• возможность расширения формата (APNG).

tinypng.com

Инструменты

• pngquant
• OptiPNG

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminPngquant = require('imagemin-pngquant');


gulp.task('pngquant', () => 
    gulp.src('src/*.png')
        .pipe(imagemin([ imageminPngquant({ quality: 85 }) ]))
        .pipe(gulp.dest('dist'))
);

WebP

Особенности WebP

• разрабатывается Google;
• основан на алгоритмах видеокодеков VP8 и VP9;
• поддерживает альфа-канал (прозрачность);
• требует больше ресурсов для декодирования;
• 21 апреля 2018 вышла версия 1.0.0.

Используют WebP

• Google
• Netflix
• Amazon
• Ebay
• Yahoo

const imageminWebp = require('imagemin-webp');


gulp.task('webp', () => 
    gulp.src('src/*.{jpg,png}')
        .pipe(imagemin([
             imageminWebp({
                 quality: 85,
                 preset: 'photo'
             })]))
        .pipe(gulp.dest('dist'))
);

Векторная графика

SVG

Scalable Vector Graphics
w3.org/Graphics/SVG

Особенности SVG

• векторная графика;
• подмножество XML;
• совместим с CSS;
• открытый стандарт;
• позволяет встраивание растровой графики.

<svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="greencircle" cx="50" cy="50" r="50" fill="green" />
</svg>

Инструменты

• svg/svgo
• jakearchibald.github.io/svgomg
• gzip
• google/brotli
• google/zopfli

const imageminSvgo = require('imagemin-svgo');


gulp.task('svgo', () => 
    gulp.src('src/*.svg')
        .pipe(imagemin([
             imageminSvgo({
                 convertColors: true,
             })]))
        .pipe(gulp.dest('dist'))
);

sprite.svg

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 100 100" id="greencircle">
        <circle cx="50" cy="50" r="50" fill="green" />
    </symbol>
    <symbol viewBox="0 0 100 100" id="redsquare">
        <rect x="0" y="0" width="100" height="100" fill="red" />
    </symbol>
</svg>

index.html

<html>
<body>
    <svg class="icon icon--circle" width="100">
        <use xlink:href="sprite.svg#greencircle" />
    </svg>
    <svg class="icon icon--square" width="100">
        <use xlink:href="sprite.svg#redsquare" />
    </svg>
</body>
</html>

const svgSprite = require('gulp-svg-sprite');
gulp.task('svgSprite', () =>
    gulp.src('src/icons/*.svg')
        .pipe(svgSprite({
            mode: {
                symbol: { sprite: "../sprite.svg" }
            }
        }))
        .pipe(gulp.dest('dist'))
);
        

Советы

• храните исходные изображения в PNG или TIFF;
• выбирайте правильный формат в зависимости от изображения;
• автоматизируйте сохранение в разных форматах;
• подберите подходящие параметры сжатия.

Отправка клиенту
по запросу

JPG; 25 КБ

Server-side content-type negotiation

GET /some.jpg HTTP/1.1
Host: ...
Connection: keep-alive
User-Agent: ...
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ru-RU;q=0.8,ru;q=0.7

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

HTTP Cache

1. ETag: W/"3b952-1635db68e52"
2. Cache-Control: public, max-age=31536000

localStorage

• можно хранить только строки;
• общий размер — до 5 МБ.

Service Workers

if ('serviceWorker' in navigator) {
    const sw = navigator.serviceWorker;
    sw.register('sw.js')
        .then(() => sw.ready.then((worker) => {
            worker.sync.register({
                minRequiredNetwork: 'network-online'
            });
        }));
}

importScripts('https://storage.googleapis.com/.../workbox-sw.js');
workbox.routing.registerRoute(
    /\.(?:png|gif|jpg|jpeg|svg)$/,
    workbox.strategies.cacheFirst({
        cacheName: 'images',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 60,
                maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
            }),
        ],
    }),
);

Network Type

let isSlow = true;
const connection = navigator.connection;
if (connection) {
    // 'slow-2g', '2g', '3g' или '4g'
    if (connection.effectiveType !== 'slow-2g') {
        isSlow = false;
    }
}

Декодирование и отображение в браузере

Отображение

1. декодирование;
2. изменение размеров;
3. отрисовка.

Не заставляйте браузер обрабатывать лишние пиксели!

2008

<img src="rit.jpg" alt="Привет, РИТ!" width="20" height="18" />

2018

<picture>
    <source type="image/webp" media="(min-width: 1150px)"
            srcset="rit-desktop@1x.webp 1x, rit-desktop@2x.webp 2x">
    <source type="image/webp"
            srcset="rit-mobile@1x.webp 1x, rit-mobile@2x.webp 2x">
    <source media="(min-width: 1150px)"
            srcset="rit-desktop@1x.jpg 1x, rit-desktop@2x.jpg 2x">
    <img src="rit-mobile@1x.jpg" srcset="rit-mobile@2x.jpg 2x"
            alt="Привет, РИТ!" width="20" height="18">
</picture>

<picture>
    <source type="image/webp" media="(min-width: 1150px)"
            srcset="rit-desktop@1x.webp 1x, rit-desktop@2x.webp 2x">
    <source type="image/webp"
            srcset="rit-mobile@1x.webp 1x, rit-mobile@2x.webp 2x">
    <source media="(min-width: 1150px)"
            srcset="rit-desktop@1x.jpg 1x, rit-desktop@2x.jpg 2x">
    <img src="rit-mobile@1x.jpg" srcset="rit-mobile@2x.jpg 2x"
            alt="Привет, РИТ!" width="20" height="18">
</picture>

<img srcset="rit-320w.jpg 320w,
             rit-480w.jpg 480w,
             rit-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="rit-800w.jpg" alt="Привет, РИТ!">

1. srcset — задаем каждому размеру свое изображение;
2. sizes — вычисляем размер, который нужно применить;
3. выбираем из srcset самое подходящее по размеру изображение.

scottjehl/picturefill

2008

.rit {
    background-image: url('img/rit.jpg');
}

2018

.rit {
    background-image: url('img/rit-mobile.jpg');
}

@media (min-width: 1050px) {
    .rit {
        background-image: url('img/rit-desktop.jpg');
    }
}

.rit {
    background-image: url('img/rit@1x.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
    .rit {
        background-image: url('img/rit@2x.jpg');
    }
}

.rit {
    background-image: image-set(url('rit@1x.jpg') 1x,
                                url('rit@2x.jpg') 2x);
}

filamentgroup/imaging-heap

Lazy Loading

• samdutton/simpl
• aFarkas/lazysizes
• w3c/IntersectionObserver

<img src="placeholder.jpg"
     data-src="image.jpg" />

const observer = new IntersectionObserver(handler, {
    rootMargin: '0px',
    threshold: 0.1,
});

const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
    observer.observe(img);
});

function handler(entries, observer) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadImage(entry.target);
            observer.unobserve(entry.target);
        }
    });
}

function loadImage(image) {
    const src = image.dataset.src;
    fetchImage(src).then(() => { image.src = src; });
}

function fetchImage(url) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.src = url;
        image.onload = resolve;
        image.onerror = reject;
    });
}

Placeholder — техники

• Общий placeholder
• Фоновый цвет
• LQIP
• LQIP + размытие
• SQIP
• Geometrize (fogleman/primitive)

@geometrizer

Предзагрузка

<link rel="preload" as="image" href="important.png">

Доступность

• для информативных изображений — краткая информация в alt;
• для декоративных изображений:
  • alt="";
  • role="presentation";
  • aria-hidden="true".

weblind.ru

aardrian/pen/wjWyvg

Защита от роботов #1

robots.txt

User-agent: Googlebot-Image
Disallow: /images/secret.jpg 

Защита от роботов #2

HTTP Headers

<IfModule mod_headers.c>
  <FilesMatch "images/*\.jpg$">
    Header append X-Robots-Tag "noindex"
  </FilesMatch>
</IfModule>

Приемчики 🚀

PNG -> JPEG + SVG-маска

PNG; 203 КБ

JPEG + SVG; 75 КБ

<svg width="300" height="300" viewBox="0 0 300 300">
    <defs>
        <clipPath id="octocat">
            <path fill="#000000" d="..."/>
        </clipPath>
    </defs>
    <image clip-path="url(#octocat)"
           width="300" height="300"
           xlink:href="dojocat.jpg" />
</svg>
        

399 КБ

349 КБ

.uncontrasted {
    filter: contrast(1.15);
}

Compressive Images

q=80; w=350px; 19 КБ

q=0; w=700px; 8 КБ

Советы

• Выбирайте правильный формат хранения ваших изображений.
• Автоматизируйте сжатие.
• Не отправляйте на клиент то, что можно не отправлять.
• Адаптируйте и ретинизируйте картинки.
• Тестируйте сайты на медленном соединении.
• Думайте про UX, а не только про DX.

Материалы

• Essential Image Optimization — Addy Osmani
• Ссылка на ссылки

Видео

• Оптимизация графики на практике — Тимофей Чаптыков
• New Adventures in Responsive Web Design — Виталий Фридман

Спасибо за внимание!

mefody.github.io/talks/images-delivery/
@dark_mefody
n.a.dubko@gmail.com