Heavy images are the single most common cause of slow websites. The average web page is now around 2 megabytes, and roughly half of that weight is images. Cut that in half and your site loads twice as fast — which Google notices, and so do your visitors. Here's a practical, in-order checklist for getting image weight under control on a website or blog.
Step 1: Resize before you compress
This is the step most people skip, and it's the biggest win. There's no point serving a 4032-pixel-wide phone photo to a layout that's 1200 pixels wide — you're just throwing bandwidth away. Resize the image so its longest edge matches the largest size you'll actually display, with a little headroom for high-DPI screens (about 2× the layout size is usually enough).
Sensible defaults for most sites:
- Hero / featured image: 1920px on the long edge
- In-content image: 1280px on the long edge
- Thumbnail: 600px on the long edge
Step 2: Pick the right format
WebP is the right default for almost any image on a modern website. It's 25–35% smaller than the JPG equivalent for photos and often smaller than PNG for graphics, and it's supported in every browser released since 2020. JPG is still fine where compatibility matters; PNG is still right for crisp graphics with transparency. We go deeper into this in our format comparison.
Step 3: Compress with the right settings
For photos, save at quality 75–85. Anything higher is overkill for the web; anything lower starts to show artefacts. For PNGs of graphics, run them through a lossless optimiser like pngquant or ImageOptim — easy 30–50% wins with no visible change.
Our free online image compressor does steps 1 and 3 in one go: it resizes the long edge to 1920px and re-encodes at sensible web defaults. For a one-off file or a small site, that's often all you need.
Step 4: Strip metadata
Camera EXIF, ICC profiles, embedded thumbnails — they can add hundreds of kilobytes per image and almost no website actually uses them. Most online compressors strip metadata by default. Just be aware that this also removes location data from photos, which is often a privacy plus.
Step 5: Use modern delivery techniques
Lazy loading
Add loading="lazy" to images below the fold. The browser will skip downloading them until the user scrolls close. This is one line of HTML and can cut initial page weight by 50%+ on long pages.
Width and height attributes
Always set width and height attributes (or an aspect-ratio CSS rule). The browser uses them to reserve space and avoid layout shift, which directly improves your Cumulative Layout Shift (CLS) score.
Responsive images
The srcset attribute lets the browser pick the best size for the user's device. Serve a 600px version to phones, a 1200px version to laptops, a 1920px version to desktops. Most CMS platforms handle this automatically these days.
Step 6: Use a CDN with image optimisation
Cloudflare, Bunny, ImageKit and Vercel all offer image optimisation as part of their CDN — you upload one source file and they automatically resize, convert to WebP/AVIF, and cache aggressively. On any site with more than a handful of pages, this is worth setting up. It also takes a lot of the manual work above off your plate.
How to actually do it for an existing site
- Run a PageSpeed Insights test on your slowest page. Look at the "Image elements do not have explicit width and height" and "Properly size images" opportunities.
- Identify your three or four biggest offenders. Usually a handful of images account for most of the weight.
- Resize and recompress those first. Drop them into our image compressor or run them through a desktop optimiser.
- Set up automatic optimisation going forward — either a CMS plug-in (most have one) or a CDN-level image service.
- Re-run PageSpeed Insights and watch your LCP score drop.
The realistic outcome
For most blogs and content sites, applying steps 1–4 to existing content takes a few hours and cuts page weight by 60–80%. Adding steps 5–6 keeps things tidy as new content is added. The net result: faster pages, better Core Web Vitals, lower bounce rate, and visitors who don't leave because they're tired of waiting.