Placeholder generation for the hero image

This tutorial was contributed by Harshith

An image placeholder is a background color over the space, on which an actual image will be loaded.

How Quintype handles image placeholder?

  • Wrap ResponsiveImage component with figure tag.
  • Based on aspect ratio of the image, provide padding-top for the figure tag using styleName/className.
  • Use a generic styleName/className to the figure tag to provide required background- color.


<figure className="qt-image-16x9" styleName="placeholder">
.qt-image-16x9 {
  padding-top: 56.25%;
  margin: 0;
  position: relative;
  overflow: hidden;

  & img {
    position: absolute;
    top: 0;
    left: 0;

.placeholder {
  background-color: lightgrey;

If your app is cloned from malibu-advanced, we provide a toggle to enable placeholder, pass enable_placeholder from /app/config/publisher.yml in black knight under publisher, which accepts a boolean value.


  • We can delay the load of the image generating script to increase LCP and load the placeholder for a particular interval.(Doing this might have negative impact on SEO)
  • If your app is cloned from malibu-advanced, pass placeholder_delay from /app/config/publisher.yml in black knight under publisher with the required interval. Eg: placeholder_delay: 3, in this example there will be a delay of 3 seconds post that, we will be loading the required script.