Как сделать эффект размытого изображения без изображения?

Question

[Анастасия]

Здравствуйте. Как сделать вот такое:

https://dribbble.com/shots/15117313-Ren-Interactio...

Понятно, что можно взять просто картинку и кинуть на неё фильтр blur, однако это абсолютно не эффективно с точки зрения производительности. Поэтому возникает вопрос: можно ли как-нибудь сделать такое изображение и кидать на фон? Вариант с несколькими слоями градиентов я тоже исключаю, так как там тоже нагрузка будет.

Я задаю вопрос, потому что видела на каком-то сайте (не помню) эффект прелоадера, когда перед загрузкой изображения было оно же, но в размытом виде. Отсюда у меня вывод, что такой фон у них не был энергозатратным и не имел большой вес. Ну и в их случае точно отпадают градиенты, потому что не вариант собирать картинку с помощью linear-gradient (и других)

Answer 1

[VitalyChaikin]

backdrop-filter: blur(5px);

Comments

[Анастасия]

Зачем вы пишите бред? Прочтите внимательнее вопрос. Оба блюра используют видеоадаптер. В режиме энергоэффективности несколько таких изображений будут дико лагать. Удалите свой "ответ"

[VitalyChaikin]

Анастасия, пойду лучше - застрелюсь

Answer 2

[forspamonly2]

для таких прелоадеров с бэка отдают заинлайненые в data uri версии картинок в крайне маленьком разрешении (порядка 10 на 8 пикселов), которые на клиенте дополнительно сильно размазывают блюром чтобы не было видно пикселизацию.

Comments

[Анастасия]

у вас есть сайт для примера? Я просто видела такие сайты, а сейчас не могу найти. Я хочу сама пощупать на готовом живом (не из песочницы) примере

[forspamonly2]

навскидку, тот же медиум так делает. думаю если поискать, найдутся и статьи с готовым детальным анализом того, как оно там сделано.