CSS backdrop-filter, filter blur, SVG filters. Размытие части изображения. Варианты?

Question

[SuperToster]

Привет!
Захотелось на досуге запилить вот такой баннер с Рагнаром, справа и слева от баннера тот же фон, но с размытием.



Пятиминутное решение получилось вот таким: https://jsfiddle.net/hLoj6s1a/
Но вспомнилось, что поговаривают о страшной-ужасной нагрузке которую создаёт CSS filter blur.
Погуглив ещё варианты, нашёл кроме filter blur ещё SVG filters и backdrop-filter.

caniuse.com о них говорит следующее:



Интересуют несколько моментов и ваши мысли на темы:
- ресурсоёмкость способов;
- кроссбраузерность;
- возможно более элегантное решение в разметке.

Comments

[Kovalsky]

SVG вроде пока лучший вариант, например как здесь.

Answer 1

[ой всё]

есть такой сайт enjourney.ru
они для вертикальных картинок делают похожее размытие, но не фильтрами css, а готовой размытой картинкой, которую скорее всего сделали при загрузке фоток на сервер, и весит она почти в 10 раз меньше чем оригинал
сам css фильтр считают медленным

Comments

[SuperToster]

Ну такое.. Каждая функция php для размытия, грузит процессор. Лишние запросы (две картинки вместо одной).

[ой всё]

SuperToster, так это происходит один раз при загрузке фото на сервер, а не каждый раз на клиенте для двух десятков фоток

[SuperToster]

ой всё, я понимаю. О лишних запросах - имеется в виду, вы будете отдавать пользователю две картинки вместо одной как в примере который я сделал https://jsfiddle.net/hLoj6s1a/.

[ой всё]

SuperToster, это печально, но причиняет куда меньше проблем на клиенте :)
но это же ваши юзеры, а не мои ))

[SuperToster]

ой всё, да юзеров нету. Прост задача не тривиальная, а по сему интересная. Думал тут получится её обмусолить подробно и со всех сторон. Но.. Кроме вас, активности ни какой )

Значит придётся во все тяжкие, да своими силами )

Сделаю ещё с SVG filters. Потом потестю в сравнении с filter effects.

[ой всё]

SuperToster, это только подтверждает, что задача не имеет никакой ценности
своими силами всегда лучше

[SuperToster]

ой всё, утверждение, что интересная задача не имеет никакой ценности равно утверждению, что никакой опыт не имеет ценности.

[ой всё]

SuperToster, демагогия не имеет вообще никакой ценности, даже если вам кажется иначе

[SuperToster]

ой всё, вам кажется, что вы знаете, что кажется другим, на самом деле это не так. Слово демагогия настоятельно советую посмотреть в большом современном толковом словаре. Как минимум, чтобы не выглядеть глупо пользуясь "умными" словами ни к месту.

[ой всё]

SuperToster, о боги, какие тут все нервные

[SuperToster]

ой всё,
Как то не к месту возглас про нервозность общественности (я понял так из "тут" и "все"). Или это камень в мой огород? Могу в таком случае поинтересоваться, в чём же она выражается?