Вт. Окт 26th, 2021

Вектор? Растр? Почему не оба?

От создателя: на этой неделе я столкнулся с увлекательным классом задач, для которых, оглядываясь обратно, можно было бы найти гораздо наилучшее решение. Существует ли оно?

Неувязка связана с hero-изображением в правой части домашней странички jamstackconf.com. Мы работаем с Figma в рекламной команде Netlify, и моя первая попытка экспортировать такое изображение была связана с неуввязками.

Вектор? Растр? Почему не оба?

Попытка 1: SVG

10.1 MB Уникальный экспорт из Figma в формате SVG

9.9 MB оптимизированный SVG с помощью SVGOMG

Сейчас я знаю, что эти размеры являются размерами несжатых файлов (до GZIP / Brotli), но я думаю, что вы согласиться с тем, что даже оптимизированные 9,9 МБ — это очень плохо даже для различных алгоритмов сжатия (9,9 МБ сжимается до 7,36 МБ) . Снутри SVG слишком много встроенных растровых изображений, чтоб получить хорошие результаты. Давайте переключимся на растр и поглядим, как далеко мы можем зайти.

Попытка 2: PNG

1.2 MB Уникальный экспорт из Figma в PNG.

Я не стал помещать главное изображение размером 1,2 МБ на главную область области просмотра. Давайте попробуем сделать некие базовые оптимизации. Здесь важно отметить, что нам необходимо сохранить прозрачность изображения. Если цвет фона поменяется, я не хочу повторно оптимизировать изображение. Это исключает преобразование в JPEG.

Вектор? Растр? Почему не оба?

IMAGEOPTIM

Вектор? Растр? Почему не оба?

831 KB оптимизированный PNG с помощью ImageOptim.

Меня впечатлила экономия ~ 400 КБ за счет 1-го перетаскивания в ImageOptim, но 831 все еще очень много.

SQUOOSH

Вектор? Растр? Почему не оба?

376 KB оптимизированный PNG с помощью Squoosh (уменьшенная гамма до 256 цветов).

Вариант с уменьшенной гаммой дает огромную экономию! Я немного поигрался с опциями формата AVIF в Squoosh, но не сумел превзойти размер файла PNG. (Обновление от 27 августа: обратите внимание на раздел «Попытка 4: AVIF» ниже).

Попытка 3: WEBP

Вектор? Растр? Почему не оба?

152 KB оптимизированный WebP с помощью Squoosh (без утрат, уменьшенная палитра до 256 цветов, демонстрация предлагает запасный PNG).

Вау, это вправду отличная экономия размера файла! Мы будем использовать <picture> для постепенного преобразования нашего PNG в WebP. Многие имеют возможность посчитать это «достаточно хорошим результатом», но вся сущность этого блога – в последнем трюке.

Попытка 4: AVIF

Джейк Арчибальд отдал хороший совет снова попробовать формат AVIF (в режиме Lossy) без уменьшения цветовой палитры. Я думаю, это была отменная подсказка! Уменьшенные параметры палитры сказались на изображении. Моя неофициальная цель тут заключалась в том, чтобы получить как можно больше свойства из формата AVIF при таком же размере файла, как и в версии с уменьшенной гаммой WebP.

Настройки Squoosh: Lossless (выкл.), Качество: 45, Subsample Chroma (выкл.), Effort: 6.

Вектор? Растр? Почему не оба?

Вариант фаворит: два отдельных слоя: SVG + AVIF / WEBP / PNG

Если мы отделим элементы, в которых отлично работают векторы (градиенты, линии и т. д.), и поместим их в SVG, а остальное поместим в растровый формат, мы сможем достигнуть еще большей экономии! Я выбрал легкий путь — я не вложил столько в векторный слой, сколько мог бы.

Вектор? Растр? Почему не оба?

Вектор? Растр? Почему не оба?

Используя растровый слой в качестве изображения фронтального плана и дополнительное векторное изображение в качестве CSS background-изображения, мы можем соединить их! Вы даже можете сбросить оптимизированный растр назад в SVG в виде URI встроенного в <image>, если желаете, но я не пошел по этому пути.

Вектор? Растр? Почему не оба?

Окончательные результаты

От 10,06 МБ до 78 КБ — экономия 9,9 МБ. Хорошо.

Вектор? Растр? Почему не оба?

Создатель: Zach Leatherman

Редакция: Команда webformyself.

Докладывает webformyself.com

от Admin

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *