"Properly size images" Lighthouse
Hey, I was wondering if there were guidelines on exactly how big/small images should be? I know that images shouldn't be too big/small compared to their rendered width/height, but I've always just guess until Lighthouse doesn't complain anymore. Is there a tool or article I can read on finding the perfect image width/height?
8 Replies
It's not an exact science since there are so many devices with different viewports. If you application has media query breakpoints, which most likely does, and should, use those as reference for your images.
Thanks! I have different sizes for desktop/tablet/phone typically.
I have a specific case where a small logo image would be using the same picture for all screen sizes. It's rendered as 160x160 width/height on all devices. The image itself is something like 300x300 and Lighthouse complains. I could just reduce it to 250x250 and I'm sure that would be fine, but I'd lose quality, so was wondering if there was something exact. But alas ðŸ˜
Thanks again!
Mmm well I don't know, I also do that when it's barely worth it having another image just to save a couple of Kbs... I guess lighthouse aims for perfection? 😄
There's probably a formula like if the display size is 75% of the actual size of the image or something, it will flag it as an issue.
I mean if you think about it you are using an image that's almost twice the size it needs to be. That's probably what is causing Lighthouse to yell at you.
Yea for sure 😂 good point
Looking into the Lighthouse docs there's a link to this article. It doesn't exactly explain how it works and I'm sure most of it you already know but maybe it helps:
https://developer.chrome.com/docs/lighthouse/
https://web.dev/serve-images-with-correct-dimensions/
Thank you so much I'll look through this stuff and let you know 🙂
Immediately found this https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/#how-lighthouse-calculates-oversized-images
Which is funny because I remember reading this a few weeks ago now 😂 but in practice that doesn't really help me haha
Ideally, your page should never serve images that are larger than the version that's rendered on the user's screen. Anything larger than that just results in wasted bytes and slows down page load time. I guess that's kind of a no brainer but I don't practice that 😂Oh I missed that actually, but makes sense.
But it's really hard to deliver the exact size needed in practice...so I wouldn't worry too much about it. Maybe only if affects ranking score by a lot
If the rendered size is at least 4KiB smaller than the actual size, then the image fails the audit.So that's the formula then. Learned something new!
Glad y'all figured this out, but just another thing to think about, if it's a logo, maybe consider using an SVG! Size is irrelevant and it's always perfectly clear