Image optimisation for page speed: the practical version
On most small websites, images are the largest single cause of slow pages — and the easiest to fix without touching code.
Resize before you compress
Compression cannot save an image that is four times larger than its display size. Decide the maximum displayed width, export at about twice that for high-density screens, and stop there.
Pick the format by content, not by habit
Photographs compress best as WebP or JPEG. Flat graphics, screenshots and anything with text or transparency belong in PNG or WebP. Converting a photo to PNG can triple its size for no visible gain.
Compress to a budget, not to a slider position
Set a target: hero images under 300 KB, in-content images under 150 KB, thumbnails under 40 KB. Compress until you hit the budget, then check the result at full size before accepting it.
Verify on a real page
Load the published page and confirm the largest element renders quickly on a phone-like connection. Also add width and height attributes so the layout does not jump while images load.
Frequently asked questions
Keep reading
Building your first website: the checklist that keeps it shippable
A practical website-building checklist: structure, content, images, metadata, performance and launch checks — with a free tool for every step.
Read postFree SEO tool review: what each type is actually good for
An honest review of free SEO tool categories — meta tag, sitemap, keyword, backlink and speed tools — what each one measures reliably and where free data stops.
Read post