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