How big should the image sizes be?
I've been working on a site and I wanted to check how fast is my site loading with DevTool's Network option and it got nearly 40 seconds, so I've done some optimizations and it takes like 4 seconds for fast 3G now, which is still slow I guess, so I would like to ask how much KB is convenient for an image? The image in the photo is 134 KB. Is it too much or should I look for other options to speed up my site? Image's original size is 491x600.
4 Replies
According to Google (and the W3C) a target Largest Contentful Paint of 2.5s or less is "good" and 4s or more is "needs improvement".
https://web.dev/lcp/
But since your 4s is for 3G, I think that what "needs improvement" is the network. 4s for 3G isn't horrible at all.
As beck said, testing on 3g now probably isn't the most relevant, though of course it does depend a bit on who your taret audience is, there will be some demographics that might still have terrible connections.
I would say that 134kb is pretty big for an image of that size though! I'd look into optimizing it, myself. There are tools that can automate the process, but if you don't have a lot of images, you can manually do it with https://squoosh.app/ as well. This is kind of fun because you can play with the settings and see how it impacts things (from image format to how aggressive the compression is).
Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
You don't mention the format but if it isn't already, you may want to look at converting it to a webp (other formats are available).
Also, if you are not already doing so, you can also add a preload link in your header for your main image to help the load time.
Thanks everyone, converting image to webp decreased the size of images really well and I used preload to assure my main image is loaded very fast.