A Faster Web

Smooth Out Low Quality Placeholders with SQIP

When lazyloading images, one question that often arises is, “What should we use as placeholders?” Ideally the placeholder would fill the same space as the real image so that when it is loaded, the layout of the page doesn’t reflow.

One technique (aside from using a generic placeholder) is to use Low Quality Image Placeholders (LQIP) to fill the space. Here, the placeholder is a really, really low-res version of the real image. It will be very small, and since it’s based on the same image as the original, it will give the user an idea of what the image will be.

And although this can, and does, work, one of the drawbacks is the quality of this low-res image. If we compress a rasterized image as much as we can, we could possibly get down to at or under 1K. But in doing so, the image also ends up looking very coarse, with plenty of compression artifacts.

Continue Reading →