I'm currently trying to improve the Lighthouse score for my website. The biggest problem that Lighthouse shows is that I don't use an explicit width and height for my images. The problem with this is that my images pretty much all have very different aspect ratios and with new images being added all the time there is no way to fix this manually. What options are there to deal with this problem?
You can still fix a size (both width and height) to the img
block and use the css property object-fit: contain;
to keep your aspect ratio within that fixed block size.
I know it's not always the best solution, sometimes we want the img block to have the exact size of the rendered image (in that case a fixed div as a parent and min/max values does the job, but I don't know if lighthouse still shows the warning)