How to Compress Images for a Faster Website (LCP & WebP Guide)

To make a website faster with images, do three things in order: resize each image to the largest size it is actually displayed at, convert it to a modern format like WebP, and compress it to the lowest quality that still looks good. On most pages this cuts image weight dramatically and directly improves Largest Contentful Paint (LCP), the Core Web Vitals metric most affected by images.

Why images matter for Core Web Vitals

Google's Core Web Vitals are three measurements of real user experience:

Google recommends checking these at the 75th percentile of page loads, separately for mobile and desktop (source: web.dev/vitals).

On many pages the LCP element is an image: a hero banner, a product photo or a featured blog image. A 3 MB photo straight from a camera can take seconds to download on a mobile connection, which pushes LCP past 2.5 seconds on its own. Images without set dimensions also cause layout shifts, which hurts CLS.

Step 1: Resize to the display size

The biggest saving usually comes from dimensions, not compression. A phone photo might be 4000 x 3000 pixels, but a blog column is often around 700 to 900 pixels wide.

• Find the widest size the image is shown at on your layout.
• For sharp screens, allow about 2x that width. An image shown at 800 px wide can be exported at around 1600 px.
• Resize with resize image before doing anything else.

Halving the width and height cuts the pixel count to a quarter, so the file shrinks a lot before you even touch quality.

Step 2: Pick the right format

• WebP is a good default for photos and graphics. Google's WebP documentation reports lossy WebP files are 25 to 34 percent smaller than comparable JPEGs and lossless WebP files are about 26 percent smaller than PNGs. Convert with JPG to WebP or PNG to WebP.
• JPG is still fine for photos if you cannot use WebP. Compress it with compress JPEG.
• PNG is for images that need sharp edges and transparency, like logos and screenshots with text. It is a poor choice for photos because files get large.
• SVG is best for icons and simple logos, since it is vector and stays tiny.

Step 3: Compress

Open compress image and lower the quality until you can just about see a difference, then step back up a little. For photos, a quality setting somewhere in the 70s to low 80s is a common starting point for JPG and WebP, but trust your eyes on the actual image. Compression runs in your browser, so you can try several settings without uploading anything.

Size targets (rules of thumb, not official limits)

Google does not publish a KB limit for images. These are practical starting points many developers use:

• Full-width hero image: aim for the low hundreds of KB at most.
• In-article images: often well under 150 KB.
• Thumbnails and cards: tens of KB.
• Icons and logos: a few KB, ideally SVG.

Then measure. What matters is the LCP your real visitors get, not hitting a particular number.

Step 4: Load images the right way

Compression is half the work. How the page asks for images matters too:

• Do not lazy-load the hero image. Native lazy loading (loading="lazy") is great for images further down the page, but applying it to the LCP image delays it.
• Prioritise the LCP image. Setting fetchpriority="high" on the main image tells the browser to fetch it early.
• Always set width and height attributes (or a CSS aspect ratio). The browser can then reserve space and the layout will not jump, which protects CLS.
• Serve responsive sizes with srcset and sizes, so phones download a smaller file than desktops.
• Use a CDN or caching so repeat visitors do not download the same image again.

How to check your results

1. Run the page through PageSpeed Insights. It shows field data (real users) when available and lab data otherwise.
2. Look at which element is the LCP element. If it is an image, check its file size and whether it was discovered late.
3. Check the "Properly size images" and "Serve images in modern formats" suggestions in the report.
4. Fix, redeploy, and test again. Field data takes time to update because it is collected from real visits over weeks.

Common mistakes

• Uploading camera originals. A 4000 px, multi-MB file shown in a 800 px column wastes bandwidth on every visit.
• Using PNG for photos. PNG is lossless and photos end up several times heavier than a JPG or WebP.
• Lazy-loading everything. Including the hero image, which slows LCP.
• Leaving out width and height. Content jumps as images load, raising CLS.
• Over-compressing. Visible blocky artefacts on product photos can cost more in trust than they save in speed. Compress until just before quality drops.
• Background images in CSS for the main visual. The browser finds them later than a normal image tag, which can delay LCP.
• Only testing on fast Wi-Fi. Test on a mid-range phone or with network throttling, because that is where heavy images hurt.

A quick workflow for every new image

1. Resize to about 2x its displayed width.
2. Convert to WebP.
3. Compress to the lowest quality that still looks clean.
4. Add width and height, and lazy-load it only if it is below the fold.

Follow this for each image you publish and your pages stay fast without any extra plugins.

Questions