Image Optimization 101: Smaller Files, Sharper Pages
Open your browser's network tab on almost any website and you'll see the same story: images account for the majority of the page weight. They're also the easiest win in web performance. You don't need to refactor your codebase — you just need to stop serving images that are bigger than they need to be.
Page speed isn't vanity. It's a confirmed Google ranking factor through Core Web Vitals, and the largest image on screen is usually what determines your Largest Contentful Paint (LCP) score. Here's how to fix images properly, in order.
Step 1: Resize before you upload
The most common mistake is serving a 4000px photo straight from a phone camera into an 800px slot. The browser downloads all those wasted pixels and then shrinks them. Resize the image to the largest size it will actually display first — use our free image resizer. This one step often cuts file size by 80% or more.
Step 2: Compress without visible loss
After resizing, compress. Most photos can drop 40–70% in size with no perceptible quality loss, because JPEG and WebP discard detail the eye barely registers. Our image compressor lets you dial in the quality-versus-size trade-off and preview the result before downloading.
Step 3: Use modern formats
WebP delivers the same visual quality as JPEG and PNG at a fraction of the size, and it's supported by every modern browser. Google's own WebP documentation reports 25–35% savings over comparable JPEGs. Convert your files with JPG to WebP or PNG to WebP. If you ever need to go back, WebP to JPG handles that too.
Step 4: Choose the right format for the job
- Photographs: WebP or JPEG — great compression for complex images.
- Logos, icons, line art: SVG or PNG — sharp edges, transparency, small for simple graphics.
- Anything with text: avoid JPEG, which blurs sharp edges; use PNG or WebP.
Step 5: Help the browser load smartly
Add width and height attributes so the browser reserves space and avoids layout shift (the CLS metric). Use loading="lazy" on below-the-fold images so they only load when needed, and let your most important above-the-fold image load eagerly. Google's image best practices also stress descriptive alt text — good for accessibility and for ranking in Google Images.
Step 6: Serve responsive sizes
A phone and a 27-inch monitor shouldn't download the same image. The srcset attribute lets the browser pick the most appropriate size for each screen, so mobile users aren't punished with desktop-sized files. Even a simple two-or-three-size srcset can dramatically cut data on the devices where it matters most. If your CMS or framework offers responsive images, turn the feature on — it's one of the highest-impact options available.
Step 7: Measure the win
Don't guess — verify. Run your page through the page speed checker before and after to see the real-world improvement in load time and Core Web Vitals. Pay particular attention to Largest Contentful Paint (LCP): if your hero image was the bottleneck, you'll see it drop immediately.
A quick before-and-after workflow
- Resize the image to its real display size.
- Compress it and eyeball the quality.
- Convert to WebP.
- Add width, height, alt, and lazy-loading.
- Re-test the page and confirm the LCP improvement.
Run that loop on your three or four heaviest images and you'll capture the vast majority of the available speed gains.
Don't forget image SEO
Optimised images don't just load faster — they can bring in traffic of their own. Descriptive file names ("blue-running-shoes.webp" beats "IMG_4821.webp") and meaningful alt text help you rank in Google Images, and they make your site accessible to screen-reader users. Picking the right format matters here too; our guide to JPG vs PNG vs WebP vs SVG breaks down exactly when to use each.
Bottom line
Resize, compress, convert to WebP, set dimensions, lazy-load, and serve responsive sizes. Do those things and most sites will see their largest performance gain for the least effort — faster pages, happier visitors, better accessibility, and a measurable nudge in rankings.
