Placeholders

An element with the placeholder attribute acts as a placeholder for its parent. Placeholders are displayed immediately for an element, before the element has been downloaded or initialized. When the actual element is ready, the placeholder is hidden, and the element content is displayed.

Thus, placeholders can be used to stand in place of a slower-to-load element. You might use this, for instance, to display a fast-loading, low-resolution image in place of a video or high-resolution image. The latter is the same trick that sites such as Medium (medium.com) and Facebook use to deliver a quick page-loading experience. They show a small, low-resolution image that has been blown up to the size of the actual banner image. The user gets to see the proper page layout almost immediately, with a blurred version of the main feature image. This is swapped out when the high-resolution version is ready.

Let's implement this for our article's main feature image. First, prepare the small placeholder version of the image. Open the original image, in our case /ch3/img/feature.jpg, in an image editor application or online service, and resize it to 40 pixels wide. Save the image as feature-tiny.jpg.

After running it through an optimizer, your placeholder image should be down to around 200-300 B in size. This will load quickly even on slow networks.

Now we need to write the AMP-HTML. To set an element as a placeholder, we just need to add the placeholder attribute. So, to add a placeholder for our feature image, we could use this code (/ch3/placeholder.html):

<amp-img src = "img/feature.jpg"  
      srcset = "img/feature-1200.jpg 1200w,
                img/feature-lrg.jpg 1080w,
                img/feature-med.jpg 768w,
                img/feature.jpg 320w"
       width = "768"
      height = "305"
      layout = "responsive" 
      noloading>
  <amp-img placeholder
           src = "img/feature-tiny.jpg"
         width = "768"
        height = "305"  
        layout = "responsive">
  </amp-img>
</amp-img>

Yes, we're using an amp-img placeholder for an amp-img! In general, though, you might be more likely to use placeholders for videos or other large elements.

We've also added a noloading attribute to the feature image element. AMP displays a loading indicator by default for components like amp-img. Adding the noloading attribute hides this indicator. The idea here is that since we are using a placeholder image anyway, we don't really need the loading indicator, so we disable it.

We can confirm the placeholder is working for poor connections in the developer tools:

We can simulate a slow connection in Chrome's DevTools as shown in the previous image (or indeed you can set your own mobile device to use 2G). You should see that the placeholder image, feature-tiny.jpg, is loaded and displayed very quickly, and is eventually replaced with the full-resolution image.