Open Thibaultfq opened 3 years ago
👋 Hi @Thibaultfq !
Thanks for raising these - I understand where the questions are coming from.
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?
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;
}
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.
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?