documentation on LQIP

[Thibaultfq]

It is not clear to me where the LQIP is stored? I do not see any extra image files in my dist/ folder, although the plugin seems to be working based on what i see before images load.

Can this be documented better?

It is also unclear which image should best be feeded to this plugin. I have multiple versions of my images for responsive loading using src-set. Should i feed the best quality image or rather the lowest one with a reduced dimension? I assume this also had impact on the width and height attributes that can be set? Could there also be more documentation on those attributes?

[liamfiddler]

👋 Hi @Thibaultfq !

Thanks for raising these - I understand where the questions are coming from.

1. The LQIP is stored in the HTML img src attribute as a data URL. No additional files are output.
2. The plugin uses whichever image appears in the src attribute as the source for the LQIP.
3. The LQIP is so blurry & low resolution that it doesn't really matter whether you feed a high or low quality image.
4. Yes, the width and height attributes are based on the image in the src attribute, so if you're not using CSS to scale the image it's often best to use the higher resolution image.

I'll aim to update the documentation in the near future. If I add the above information to the readme do you think it would have addressed your queries?

[Thibaultfq]

Thanks for the info, this indeed clarifies my questions.

Only the height and width is still slightly unclear. Actually, none of my images has the exact correct size but are all slightly too large and smaller sizes will used because of the src-set attribute. So if i use too big width and height attributes, the image will downscale itself to the width of the containing parent (i'm using the same css for all images, see below), or not? Vice versa, I am now using undersized images as LQIP but these are however not upscaled, which is why i was confused in the first place. What effects does the width and height attributes have towards rendering, scaling-up/down, css, ...?

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

[liamfiddler]

There are a few different elements that make up this answer - apologies if some of these are already understood, I just want to make sure I cover all the bases.

The LQIP is always going to render at a low-resolution by design. The intent of a LQIP is not to be a perfect representation of the image - it is meant to be a blurry, pixellated placeholder that renders quickly. The LQIP is swapped out for the high-resolution image once it has fully loaded.

The CSS determines how the IMG element fills the space in your layout. The CSS you showed will make the image as wide as the parent container, and height: auto will automatically adjust to the natural height of the image...

But how does the browser know what height it should be?

That's where the width and height attributes come in! By adding these attributes to the IMG element the web browser can determine what the correct aspect ratio should be before the image has loaded, and can set the auto height appropriately. This has the benefit of preventing layout shift.

Then, once the browser knows how big a space the IMG element covers, it will choose the best-fit image from the srcset you've provided. This image is then loaded and replaces the LQIP.

The key thing to remember is when used in combination with CSS & srcset the width and height attributes don't directly influence which resolution image is loaded, only the aspect ratio of the image. More information about the importance of the width and height attributes can be found in this Smashing Magazine article.

TLDR; the LQIP is supposed to be low-resolution, the width and height attributes define the aspect ratio, CSS defines the space the image takes up in the page, and srcset defines which high-resolution image to load.