0
One of the main problems faced in Google’s Lighthouse is the issue of CLS. In my customers this is something that happens very often.
I know that to fix CLS the best alternative is to set the size in the images using the attributes width and height, however, my clients make use of several images (registered by themselves) that have different sizes/ proportions which ends up making it impossible to set the sizes in the tag <img>
An alternative I found was to use the data-sizes="auto" which is native to the Lazysizes(plugin that use to make lazyload), but without much success by the fact of not fully solve the problem.
In some articles I saw a suggestion to use Aspect-ratio, where it would make use of attributes width and height used in tag <img>, but as quoted I do not have this information available
img {
aspect-ratio: attr(width) / attr(height);
}
I would like to know if there is any alternative to solve this problem
I think the question is good, just need to elaborate a [mcve]. On the subject, I find it interesting, despite my clear vision on understanding that many "techniques" are means to circumvent problems that should not even exist, but I have already talked much of the many mistakes that the world front-end decided to adopt as solutions to then have to create other solutions to solve the problem before ... yet rather discuss about web-Vitals it seems necessary. I will leave +1, but I hope to provide a reproducible minimum code, we are waiting.
– Guilherme Nascimento