Представьте, что вам нужно загрузить большую фоновую картинку (например, в шапке страницы). И без этой картинки страница будет выглядеть плохо.
Можно залить область под картинкой подходящим цветом. Но это не всегда возможно.
Идея состоит в том, чтобы использовать уменьшенную копию картинки.
Если в проекте используется много растровых картинок, то наверняка используется какой-то инструмент для их ресайза и кадрирования. Например, что-нибудь на базе imagemagick.
Вы запрашиваете http://site.com/images/image.jpg?width=300&height=300 и получаете картинку image.jpg, уменьшенную до 300х300.
При этом на сервере в консоли выполняется что-то вроде:
convert image.jpg -resize 300x300 image-resized.jpg
Результат кэшируется и отдается клиенту.
Но можно пойти дальше.
Если уже есть инструмент для работы с картинками, можно его развить и добавить опцию размытия. Например:
convert image.jpg -resize 30x30 -blur 0x5 image-resized-and-blurred.jpg
Дополнительно можно попробовать уменьшение качества полученной картинки.
Зачем нужна такая картинка?
Получив уменьшенную в 10 раз (по ширине и высоте) копию картинки можно вывести ее вместо большой.
<img src="http://site.com/images/image.jpg?width=30&height=30&blur" width="300" height="300" alt="">
Поскольку картинки будет размыта, она будет выглядеть хорошо даже в увеличенном состоянии.
Весить такая картинка будет очень немного и отобразится почти мгновенно.
После полной загрузки сайта можно будет запросить полноразмерную картинку скриптом и подменить ее после полной загрузки. Сделать это тоже можно эффектно:
<header class="header">
<img class="image-original" data-src="http://site.com/images/image.jpg?width=300&height=300" width="300" height="300" alt="">
<img class="image-stub" src="http://site.com/images/image.jpg?width=30&height=30&blur" width="300" height="300" alt="">
</header>
.header {
position: relative;
}
.image-original {
opacity: 0;
}
.image-stub {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s;
}
.header_loaded .image-original {
opacity: 1;
}
.header_loaded .image-stub {
opacity: 0;
}
var img = new Image();
var src = document.querySelector('.image-original').getAttribute('data-src');
img.onload = function() {
document.querySelector('.image-original').setAttribute('src', src);
document.querySelector('.header').classList.add('header_loaded')
}
img.src = src;