Love Frontend
Сообщество
фронтенд разработчиков
EN

Что такое Media Placeholder и как его сделать на сайте? [en]

Дата публикации: 30.06.2019

Media Placeholder – это заглушка (заполнитель) для видео или изображения. На место этой заглушки загрузится ваш медиа файл. В данной статье мы рассмотрим как сделать простой заполнитель с фоновым цветом, а потом с размытым изображением на фоне. Для чего это нужно?

При чтении вашей статьи с мобильных устройств при медленном интернет соединении, отсутствие media placeholder'а может стать настоящей проблемой.

Пользователь может начать читать текст, но в определённый момент загрузится изображение, которое сломает весь макет сайта и читаемый текст резко провалится вниз.

анимация загрузки статьи анимация загрузки статьи

Чтобы проанализировать как грузится ваша страница при медленном интернет соединении, воспользуйтесь Chrome dev tools. Вкладка Network -> Throttling и поставьте Slow 3G. Так можно сэмулировать медленный интернет на десктопе.

скриншот dev tools скриншот dev tools

Если вы используете изображение не в теге <img>, то можно реализовать заполнитель просто прописав два url изображения в CSS свойстве background-image, сначала маленькое фото, которое будет грузиться в первую очередь, потом оригинальную большую фотографию:

CSS#image {
background-image: url("small-image.png"), url("big-image.png");
}

Однако следует помнить, так как изображения вставлены не через тег <img>, то это сказывается на семантике. Ваши изображения не будут должным образом индексироваться поисковиками.

Давайте рассмотрим наиболее распространённый вариант реализации заполнителя.

И так, для создания media placeholder'а нам нужно создать блочный элемент, который будет иметь те же размеры что и загруженное позже изображение. Чтобы мы увидели сначала этот элемент, а потом в него спокойно подгрузилась картинка и не ломала общий макет и не двигала текст. Это своего рода «распорка заглушка», внутрь которой загрузится картинка. Сделать такой «блок-обёртку» очень просто.

HTML<div class="placeholder">
<img src="{{ url }}" />
</div>
CSS.placeholder {
width: 600px;
height: 300px;
background-color: darkseagreen;
}

Но на сайтах часто необходимо сделать так, чтобы изображение занимало всю доступную ширину, но сохраняло свои пропорции не зависимо от разрешения экрана. То есть при просмотре на устройствах с разным разрешением, картинка должна занимать определённую область по ширине и исходя из ширины пропорционально растягиваться до нужной высоты. Пример наглядно продемонстрирован в следующем анимированном блоке:

Обратите внимание, что не важно какую ширину займёт изображение, оно всегда будет сохранять своё соотношение сторон и иметь нужную высоту. И как раз всё что нужно знать для осуществления этого приёма – это соотношение сторон вашего изображения.

Растягивающийся блок можно легко реализовать средствами CSS. Нужно присвоить блоку обёртке относительное позиционирование, изображению абсолютное и воспользоваться свойством: padding-bottom: {{ высота / ширина }}

Например, если у вас фотография имеет ширину 900px и высоту 600px, то это соотношение 3:2 = 2 / 3 = 66.66%.

4:3 = 3 / 4 = 75% (800px × 600px)

1:1 = 1 / 1 = 100% (Квадратное изображение, например 500px × 500px)

Можете воспользоваться калькулятором и вбить сюда ширину и высоту, чтобы узнать какой должен быть отступ у родительского блока

CSS .placeholder {
position: relative;
width: 100%;
height: 0;
padding-bottom: 66.66%;
background-color: darkseagreen
}

.placeholder img {
position: absolute;
width: 100%;
top: 0;
left: 0;
}

Можно также использовать CSS свойство calc: padding-bottom: calc(ширина / высота)

В результате у нас получится нечто подобное:

Я специально сделал плавную анимацию, в реальных условиях картинка обычно грузится отрывками, не плавно.

Изображение и его родительский блок растягиваются и сжимаются до любой ширины и при этом всегда имеют нужную нам высоту.

Но конечно, было бы гораздо приятнее видеть до загрузки изображения его превью (уменьшенный вариант изображения). Очень важный момент, задняя картинка заполнитель должна иметь очень маленький размер, но с таким же соотношением сторон, как и оригинальная большая картинка. Чем меньшим будет размер изображения, тем лучше, потому что на сайте оно должно подгрузиться моментально. В примере для этой статьи маленькое изображение имеет размеры: 28px × 19px и весит всего 822 байта. Этого вполне хватает, чтобы сделать приятный фон, пока пользователь ожидает загрузки оригинальной картинки. Выглядит это так:

html<head>
<style>
.placeholder {
display: block;
position: relative;
width: 100%;
height: 0;
padding-bottom: 66.66%;
}
.placeholder img {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.placeholder .small-img {
background-size: cover;
filter: blur(10px);
}
</style>
</head>
<body>
<picture class="placeholder">
<img src="{{ url маленькой картинки }}" class="small-img">
<img src="{{ url большой картинки }}" class="big-img">
</picture>
</body>

В примере, мы размыли изображение с помощью CSS, задав свойство filter: blur(10px). Значение размытия можно задавать любыми единицами измерения, можно в процентах, чем больше значение, тем соответственно больше размытие. Отрицательное значение подставлять нельзя. Свойство CSS filter плохо поддерживается браузерами, однако данная задача оправдывает применение этого свойства, так как пользователи со старыми браузерами просто увидят не размытое изображение.

Также нужно помнить, что эти стили для блока-обёртки должны подгрузиться самыми первыми, поэтому тут уместно использовать такой способ распределения стилей, который известен как critical CSS. То есть самые важные стили, которые отвечают за первую прорисовку каркаса страницы не грузятся в отдельном файле, они должны вставляться прямо внутри тега <head>.

Также при работе был выявлен небольшой нюанс. При применении свойства filter: blur() его размытие выходит за границы блока, выглядит это так:

В качестве решения была принята простая мера, установить у родителя обёртки, то есть у блока с классом placeholder свойство overflow: hidden. Также можно встретить решение, когда добавляют отрицательные отступы margin: -10px величина должна быть равна размытию.

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

Изображение (made by Pexels) из примера было взято с сайта Pixabay

Оставьте свой e-mail чтобы получать уведомления о свежих статьях.