Уменьшение объёма изображения с помощью растра и SVG

Зак Лезерман поделился опытом оптимизации тяжёлого изображения — "Vector? Raster? Why Not Both!".

У Зака возникла проблема — SVG с иллюстрацией для сайта занимало 10Мб. Он попробовал экспортировать SVG в разные растровые форматы, наилучший результат был у AVIF — 168Кб. Для дальнейшего уменьшения объёма Зак разделил иллюстрацию на две части — фон и передний план. На фоне находится градиент с простыми геометрическими фигурами, поэтому в SVG он занимает всего 4Кб. На переднем находятся сложные фигуры и фотографии, поэтому для него больше подходит растровый формат, Зак выбрал webp (74Кб). Эти два изображения были скомбинированы в одно с помощью CSS. В итоге объём изображения был уменьшен с 10Мб до 78Кб.

Статья небольшая, но полезная. Рекомендую почитать.

#performance

https://www.zachleat.com/web/vector-raster-split/