Frontend-developer  @

Собираю монеты

...и плоты из пластиковых бутылок

Без сжатия

10%

≈ 92 kb

≈ 18 kb

10/10

сюжет изображения

размер

расстояние

размер экрана

разрешение и плотность пикселей

JPEG

полноцветные изображения, фотографии

PNG

прозрачность, сжатие без потерь (мелкие детали)

SVG

простые изображения без мелких деталей, вектор

GIF

мелкие изображения (иконки), мало цветов

Не для анимаций → mpeg4, webm

хотя...  https://gif.ski/

JPEG 2000

только сафари – 13 %

JPEG XR

только IE 9+ и Edge – 5%

WEBP

только на Blink: Chrome, Opera, UC, Samsung – 73%

Отличное сжатие: 25-34%

С потерями и без потерь

Прозрачность

Можно анимировать!

JPEG

≈ 92 kb

≈ 92 kb

JPEG

Lazy load

Resource Hints: Preload/prefetch

async="on"

Preload – 60%

Prefetch – 73%

<!-- загрузка изображения не блокирует остальной рендер страницы -->
<img async=on src="logo.png" />

<!-- приоритетная загрузка -->
<img async=off src="logo.png" />

<!-- браузер сам решает -->
<img src="logo.png" />

Выбирайте правильный формат

Автоматизируйте компрессию

Я использую ImageOptim + SVGO

Используйте адаптивные изображения

<picture>
    <source srcset="small.webp 384w,
                    medium.webp 768w,
                    large.webp 1152w"
            type="image/webp">
    <source srcset="small.jpg 384w,
                    medium.jpg 768w,
                    large.jpg 1152w"
            type="image/jpeg">
    <img src="small.jpg" alt="Descriptive alt text!">
</picture>

Квантификация: уменьшение количества цветов

Используйте JPEG:

• sRGB
• прогрессивные
• качеством <100%

Мои эксперименты

500 kb

105 kb

logo.png → logo-opt.png

все декоративные картинки – в бекграунд

все значимые – на странице, img, figure или svg

автоматизируй, но проверяй

меньше — лучше

Никогда не делайте текст картинкой

Не забывайте про alt=""

Если SVG или DIV — добавьте ему 

role="img" aria-label="alt text"

Скрывайте декоративные картинки от скринридеров

aria-hidden="true"

twitter.com/neonick