Budget by role, not by one global number
A single hero illustration can justify a hundred and fifty kilobytes because the visitor is waiting for exactly that one image. A thumbnail in a grid of twenty cannot, because twenty of them is what the visitor actually downloads. Decide the budget from how many of that kind of image appear on the page together.
A workable starting point: heroes up to a hundred and fifty kilobytes, in-article illustrations around eighty, thumbnails under twenty. Then measure the page total, which is the number that matters to a visitor.
Serve WebP
WebP reaches the same visual quality as JPEG in appreciably less space and is supported by every current browser. For a site rebuilding its images, switching format is usually a larger saving than tuning quality settings, and it requires no visible compromise.
Keep PNG for logos, icons and anything with transparency or crisp text, where lossless encoding is both smaller and sharper than a lossy format would be.
Do not serve more pixels than you display
The most common waste on the web is a four thousand pixel photograph displayed in a eight hundred pixel column. The browser downloads all of it and then throws most of it away. Resize to roughly twice the displayed width, which covers high density screens, and stop there.
Questions
- How much can compressing images actually improve load time?
- On an image-heavy page, dramatically. Images routinely account for the majority of transferred bytes, so halving their weight roughly halves the time to a fully rendered page on a slow connection. It is usually the largest single improvement available and needs no change to how the site is built.
- Is WebP safe to use for all visitors now?
- Yes for browsers in current use. Every actively maintained browser displays WebP, and has done for several years. If you must support genuinely ancient clients, serve JPEG as a fallback through a picture element rather than abandoning WebP for everyone else.
- Should I compress images that a CMS will process anyway?
- Yes, because most systems resize without meaningfully re-compressing, and some store your original at full weight and serve it directly for the largest display size. Uploading a sensibly sized file means whatever the system does afterwards starts from a good place instead of a forty megapixel one.
- What else should I do once the pictures are optimised?
- Give every element explicit width and height attributes so the browser reserves the correct space and the text stops jumping about as things arrive. Load anything below the initial view lazily. Between them, those two changes plus properly sized files address most of what makes an image heavy page feel unpleasant to read.