What a media placeholder is and how to implement it?
Tags: javascript, html, css
Published: 2022-07-29 19:52:06

---
title: What a media placeholder is and how to implement it?
published: true
description: Media Placeholder is a (stub, empty place) for video or photo. And your media file will load in place of this stub. In this article, we will look at how to make simple placeholders with colored backgrounds and then with blurred photos on the background.
tags: js, html, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9mcq30rqnd2tf1n6e22.jpg
# Use a ratio of 100:42 for best results.
---

A media placeholder is a dummy _(placeholder)_ for a video or image. Your media file will be loaded instead of this stub. In this article, we will consider the ways how to create a simple placeholder with a background color, and then with a blurry background image.

## What is it for?

The lack of media placeholder, while reading your article from mobile devices with a slow Internet connection, can become a real problem. Users can start reading, but at a certain moment the image which will break the entire layout of the site will load, and the read text will sharply be moved down.

![Example of breaking text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emtu9azjmuwc3x0dgenk.gif)

> To analyze how your page loads with a slow internet connection, use Chrome dev tools. `Network tab` -> `Throttling` and set `Slow 3G`. So you can simulate a slow internet connection.

![Chrome dev tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8qlrfdfw3zwnq1pmmfj.png)

If you use the image not in the `<img>` tag, you can implement the placeholder just by setting two image URLs for the CSS: `background-image`, At the first place, a small image which will be loaded first, then the original large image:

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

However, you should remember that, since the images are not inserted via the `<img>` tag, it affects the semantics. Your images will not be properly indexed by search engines.

## Implementation

Let's look at the most popular placeholder implementation. To create a media placeholder, we need to create a block element with the same dimensions as the image to be uploaded later. So, we could see this element first, and then load the image without disturbing the overall layout and without moving the text. This is a kind of “spacer”,  into which the picture will be loaded. To make such a wrapper is very simple:

```html
<div class="placeholder">
  <img src="url" />
</div>
```

```css
.placeholder {
  width: 600px;
  height: 300px;
  background-color: darkseagreen;
}
```

But on real websites, it is often necessary to make an image occupy all the entire available width, but retain its proportions regardless of screen resolution. So that, when viewed on devices with different resolutions, the image should occupy a certain width and, based on the width, be proportionally stretched to the desired height. An example:

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obp5578o0vf73y37otsk.gif)

Please note, that no matter what width the image takes, it will always maintain its aspect ratio and have the desired height.  That is why all you need to know to implement this technique is the aspect ratio of your image.

Stretch blocks can be easily implemented using CSS. You need to set relative position to the wrapper block, absolute position to image and use property: `padding-bottom: height/width`

For example, if your photo has a width of **900px** and a height of **600px**, then use this ratio: 3:2 = 2/3 = 66.66%

Another examples: 
4:3 = 3/4 = 75% (800px × 600px)
1:1 = 1/1 = 100% _(Square image e.g. 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;
}
```

You could also use CSS property `calc`: **padding-bottom: calc(width/height)**

As a result, we will have something like this:

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo1av8bu5aybpnyhqby2.gif)

> I intentionally made a smooth animation. In real conditions, the picture is usually loaded not smoothly.

The image and its parent block are stretched and shrink to any width and at the same time, they always have the height we need.

But of course, it would be much nicer to see a preview image before the original big picture will be loaded.

> Important thing. The preview image placeholder has to be very small-sized and has to has the same aspect ratio as the original big image.

The smaller the image size, the faster it will be loaded. An example of this article small image weighs 822 bytes and has size: 28px × 19px. It's enough to make a nice background preview while the user waiting for a big image. It looks like this:

![Blured result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct8g62anxk9r1svhitbq.gif)

```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 of the small image" class="small-img">
    <img src="url of the big image" class="big-img">
  </picture>
</body>
```

In example we blurred photo by CSS property `filter: blur(10px)`. The value of blur property can be any unit, for example, it can be percent. The larger the value, the greater the blur. Negative numbers are not allowed. CSS property `filter` is badly supported by browsers, however, this task justifies using this property because users with the old browser just will see not blurred preview images.

> You also need to remember that these styles for the wrapper should be loaded very first. So It’s appropriate to use a style distribution method known as `critical` CSS. I.e, the most important styles, that are responsible for the first rendering of the page layout, will not be loaded in a separate file. They should be inserted inside the `<head>` tag.

Also, small gotchas were detected during implementation. When applying the `filter: blur()` its blur extends beyond the boundaries of the block. It looks like this:

![Blured bug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v1eddw4zuzlao4sy8ui.gif)

To fix it you could simply set `overflow: hidden` to the wrapper block. You can also come across a solution by adding negative margins. For example, `margin: -10px`. The value of the margin should be equal to the blur width.

> Of course, the best solution would be to use back-end libraries to automatically generate small preview images with the same aspect ratio.

And don't forget about progressive images. In most cases, you can use just them.