diff --git a/people/prorokky/index.md b/people/prorokky/index.md
new file mode 100644
index 0000000000..ad38607dee
--- /dev/null
+++ b/people/prorokky/index.md
@@ -0,0 +1,4 @@
+---
+name: 'Владислав Гапонов'
+url: https://github.com/prorokky
+---
diff --git a/recipes/lazy-load-with-preview/demos/lazy-load/images/lazy-frog-large.jpg b/recipes/lazy-load-with-preview/demos/lazy-load/images/lazy-frog-large.jpg
new file mode 100644
index 0000000000..2ba49b7b22
Binary files /dev/null and b/recipes/lazy-load-with-preview/demos/lazy-load/images/lazy-frog-large.jpg differ
diff --git a/recipes/lazy-load-with-preview/demos/lazy-load/images/lazy-frog-small.jpg b/recipes/lazy-load-with-preview/demos/lazy-load/images/lazy-frog-small.jpg
new file mode 100644
index 0000000000..48aae13fb5
Binary files /dev/null and b/recipes/lazy-load-with-preview/demos/lazy-load/images/lazy-frog-small.jpg differ
diff --git a/recipes/lazy-load-with-preview/demos/lazy-load/index.html b/recipes/lazy-load-with-preview/demos/lazy-load/index.html
new file mode 100644
index 0000000000..26a547072c
--- /dev/null
+++ b/recipes/lazy-load-with-preview/demos/lazy-load/index.html
@@ -0,0 +1,53 @@
+
+
+
+ Ленивая загрузка — Ленивая загрузка изображений с цветным превью — Дока
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/recipes/lazy-load-with-preview/index.md b/recipes/lazy-load-with-preview/index.md
new file mode 100644
index 0000000000..eaccc14384
--- /dev/null
+++ b/recipes/lazy-load-with-preview/index.md
@@ -0,0 +1,90 @@
+---
+title: "Ленивая загрузка картинок с цветным превью"
+description: "Как добавить цветное превью при ленивой загрузке изображения."
+authors:
+ - prorokky
+related:
+ - js/intersection-observer
+ - html/img
+ - css/background-color
+tags:
+ - article
+---
+
+## Задача
+
+_Ленивая загрузка (lazy loadnig)_ — это асинхронная загрузка картинок на веб-странице. Это означает, что картинки загружаются после полной загрузки страницы или когда они появляются в видимой части окна браузера. Следовательно, если пользователь не будет прокручивать экран, то изображения, размещённые за пределами экрана, не будут загружаться.
+
+Иногда хочется, чтобы изображение появлялось не внезапно, а чтобы пользователь заранее знал, что оно там будет благодаря превью.
+
+Ленивую загрузку часто используют на сайтах с большим количеством изображений. Таким образом можно экономить трафик на сайт и повысить производительность.
+
+При большом количестве изображений на сайте можно настроить приоритет их загрузки. Для этого можно использовать атрибут `fetch-priority` в теге [``](/html/img/). Всего у атрибута есть 3 значения:
+
+1. `high` – высокий приоритет относительно других изображений.
+1. `low` – низкий приоритет относительно других изображений.
+1. `auto` – приоритет по умолчанию, который указывает на отсутствие предпочтения приоритета выборки. В таком случае браузер сам решает, что лучше для пользователя.
+
+Также стоит помнить о том, что не стоит использовать атрибут `loading` если картинку гарантированно находится в области видимости.
+
+Ленивую загрузку можно реализовать несколькими способами:
+
+1. Атрибут `loading` в теге [``](/html/img/).
+1. [Intersection Observer API](/js/intersection-observer/).
+1. Использовать прогрессивные изображения.
+
+_Прогрессивные изображения (progressive images)_ – метод, позволяющий постепенно загружать изображения, начиная с низкого разрешения и улучшая его качество постепенно.
+
+Ниже разберём решение с использованием progressive images.
+
+## Готовое решение
+
+
+
+## Разбор решения
+
+Используем атрибут [`data-src`](/html/data-attributes/), чтобы хранить ссылку на полное изображение, и атрибут `src`, чтобы установить начальное изображение низкого разрешения, которое будет быстро загружено.
+
+### Разметка
+
+```html
+
+```
+
+### Стили
+
+Стоит добавить картинке размеры. Это позволит при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения.
+
+Для блюра изображения в низком качестве добавлено свойство [`filter`](/css/filter/).
+
+```css
+.lazy-image {
+ width: 300px;
+ height: 250px;
+ background-repeat: no-repeat;
+ background-size: cover;
+ filter: blur(20px);
+}
+```
+
+### Скрипт
+
+Код на JavaScript ожидает события [`DOMContentLoaded`](/js/event-domcontentloaded/), чтобы убедиться, что весь [DOM](/js/dom/) уже готов к обработке. Затем создаётся объект `Image` для загрузки изображения низкого разрешения (`lowResImage`). Когда это изображение загружено, мы изменяем атрибут `src` основного изображения (`progressiveImage`) на ссылку на полное изображение, которое будет загружено вместо низкого разрешения и убираем блюр.
+```javascript
+document.addEventListener('DOMContentLoaded', function() {
+ const progressiveImage = document.getElementById('progressive-image')
+
+ const lowResImage = new Image()
+ lowResImage.src = progressiveImage.src
+ lowResImage.onload = function() {
+ progressiveImage.src = progressiveImage.getAttribute('data-src')
+ progressiveImage.style.filter = 'none'
+ }
+})
+```