How to Optimize Images for Website Speed: 8 Steps That Cut Load Time

Images are usually the heaviest thing on a small business website. On the average page, they account for a large share of total page weight, which means they are also the fastest win available when your site feels slow.

This guide shows you exactly how to optimize images for website speed, step by step, using a real test page we rebuilt from scratch. After each step we re-tested the page so you can see how many seconds each action actually saved. No theory, no jargon, and nothing that requires a developer.

The Test Page: Our Starting Point

We took a typical small business homepage: a hero banner, a 6 image service gallery, 3 team photos, 2 logos and a background texture. Fourteen images in total, uploaded straight from a phone and a stock photo site with zero optimization.

Metric	Before optimization
Total image weight	8.4 MB
Total page weight	9.1 MB
Fully loaded time (4G mobile)	11.8 s
Largest Contentful Paint (LCP)	6.2 s
PageSpeed Insights mobile score	38 / 100

By the end of the 8 steps below, that same page loaded in 1.9 seconds with an LCP of 1.3 seconds and a mobile score of 96. Here is how we got there.

Step 1: Audit Your Images and Find the Heavy Ones

You cannot fix what you have not measured. Before touching a single file, find out which images are actually hurting you.

How to do it in 3 minutes

Open your page in Chrome, right click, choose Inspect, then open the Network tab.
Filter by Img and reload the page.
Click the Size column to sort from heaviest to lightest.

Alternatively, run the URL through PageSpeed Insights and read the “Properly size images”, “Efficiently encode images” and “Serve images in next-gen formats” opportunities. Each one lists the exact files and the estimated savings in KB.

In our test, 3 images out of 14 accounted for 5.9 MB of the 8.4 MB. That is the 80/20 rule in action: fixing a handful of files gives you most of the speed back.

Rule of thumb for target file sizes

Image type	Target size
Full width hero banner	Under 200 KB
Blog post featured image	Under 120 KB
Gallery or product thumbnail	Under 50 KB
Logo or icon	Under 15 KB (or SVG)

Time saved at this step: 0 seconds. Auditing does not speed anything up, but it tells you where the other 7 steps will pay off most.

Step 2: Resize Images to the Dimensions They Are Actually Displayed At

This is the single biggest win and almost everybody gets it wrong. A phone camera produces images around 4000 pixels wide. If that photo sits in a 600 pixel wide column on your site, the browser downloads the full 4000 pixel file and then shrinks it on screen. You paid the download cost for pixels nobody will ever see.

How to find the display width

Right click the image on your live page and choose Inspect.
Hover the highlighted element. Chrome shows you the rendered size, for example 640 x 427.
Multiply by 2 to stay sharp on high density retina screens. In this case, export at 1280 pixels wide.

Practical maximum widths

Full width hero: 1920 px wide is plenty. 2560 px only if you serve very large desktop screens.
Content area image: 1200 to 1600 px wide.
Sidebar or card thumbnail: 600 to 800 px wide.
Logo: 2x the display size, or use SVG and forget about it.

Kill the 72 DPI myth

You will read on plenty of sites that web images should be 72 PPI or 72 DPI. DPI has zero effect on how an image displays on a screen or on its file size. It is a print setting. The only two things that matter for web are pixel dimensions and compression. Ignore the DPI field entirely.

Result in our test: resizing alone dropped total image weight from 8.4 MB to 2.6 MB and fully loaded time from 11.8 s to 5.4 s. That is 6.4 seconds saved by literally nothing but changing pixel dimensions.

Step 3: Compress Before You Upload

Resizing removes pixels. Compression removes data the human eye will not miss. Do both.

Lossy vs lossless in plain English

Lossy: permanently discards some detail. Massive file savings. Use it for photographs.
Lossless: keeps every pixel identical, only strips metadata and redundancy. Smaller savings. Use it for logos, screenshots with text, and line art.

Free tools that work

Squoosh (browser based, made by Google, live before/after slider)
TinyPNG (drag and drop, handles PNG and JPEG)
ImageOptim (Mac desktop app, batch processing)
ShortPixel, Imagify or EWWW if you want a WordPress plugin that does it automatically on upload

What quality setting should you use?

There is no universal number, but these starting points work for most business sites:

Content	Quality setting
Photos with lots of detail or texture	75 to 80
Standard photos, team shots, interiors	65 to 75
Background images behind a colour overlay	50 to 60
Logos, icons, flat graphics	Lossless or SVG

Always zoom to 100 percent and check the result before saving. Look at faces, skies and gradients first, because that is where compression artifacts show up.

Result in our test: compression took image weight from 2.6 MB down to 1.4 MB and fully loaded time from 5.4 s to 3.6 s. Another 1.8 seconds gone.

Step 4: Convert to WebP (and Consider AVIF)

WebP is supported by every browser that matters in 2026. It typically produces files 25 to 35 percent smaller than JPEG at the same visual quality, and it supports transparency, so it replaces PNG too.

Which format for which job

Format	Best for	Typical size vs JPEG
JPEG	Photos, universal fallback	Baseline
PNG	Transparency, sharp text, screenshots	Often 3 to 5x larger
WebP	Almost everything on a modern site	25 to 35% smaller
AVIF	Large heroes and photo galleries	40 to 50% smaller
SVG	Logos, icons, illustrations	Usually a few KB

How to convert

Manually: drop the file into Squoosh, pick WebP on the right, adjust quality, download.
On WordPress: a plugin like ShortPixel, Imagify or Converter for Media will generate WebP versions of your whole media library and serve them automatically with a JPEG fallback.
Via your CDN: Cloudflare Polish, Bunny Optimizer and similar services convert on the fly based on what the visitor’s browser supports.

A note on AVIF

AVIF compresses better than WebP but takes longer to encode and is not worth the hassle for every thumbnail. Our recommendation: use AVIF for your one or two biggest hero images, WebP for everything else.

Result in our test: WebP conversion took image weight from 1.4 MB to 0.95 MB and fully loaded time from 3.6 s to 2.9 s.

Step 5: Serve Responsive Images with srcset

A phone should not download the desktop version of your hero image. Responsive images let the browser pick the right size for the screen it is on.

If you use WordPress, this already happens for you: WordPress generates multiple sizes on upload and writes the srcset attribute into your image tags automatically. Your job is simply to upload a source file that is large enough (1600 to 1920 px wide) so the smaller sizes can be generated from it.

If you are hand coding, the markup looks like this:

<img src="team-photo-800.webp"
     srcset="team-photo-400.webp 400w,
             team-photo-800.webp 800w,
             team-photo-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="533"
     alt="Cleaning team at work in an office lobby">

Always set width and height

Adding width and height attributes lets the browser reserve the right amount of space before the image arrives. This prevents content from jumping around while loading, which fixes your Cumulative Layout Shift score. It costs nothing and takes 5 seconds per image.

Result in our test (measured on mobile): image weight on a phone dropped from 0.95 MB to 0.52 MB, fully loaded time from 2.9 s to 2.4 s, and CLS improved from 0.21 to 0.02. There is a practical rundown of it online.

Step 6: Lazy Load Below the Fold, Preload Your Hero

Lazy loading tells the browser to skip images that are not visible yet and load them only as the visitor scrolls. It does not reduce total weight, but it dramatically reduces what has to load before the page appears usable.

The two rules that matter

Lazy load everything below the fold. Add loading="lazy" to those images. WordPress does this by default on most themes.
Never lazy load your LCP image. This is the mistake we see most often. Lazy loading your hero banner delays the very element Google measures for LCP and makes your score worse.

For the hero image, do the opposite. Tell the browser to fetch it first:

<img src="hero.webp" width="1920" height="800"
     fetchpriority="high" loading="eager"
     alt="Office cleaning service in progress">

You can also add a preload hint in the <head> of the page:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

Result in our test: total weight unchanged, but LCP fell from 3.1 s to 1.6 s and the page felt instantly responsive because only 4 images loaded up front instead of 14.

Step 7: Name Your Files and Write Alt Text Properly (Before Uploading)

This step will not shave milliseconds, but it is the reason your optimized images should also bring in traffic. Do it at upload time, because renaming files later can break links.

File naming rules

Use lowercase letters only.
Separate words with hyphens, never underscores or spaces.
Describe what the image shows, using 3 to 5 words.
Include a relevant keyword naturally, but do not stuff.
Strip camera junk: IMG_20260814_093211.JPG tells Google nothing.

Bad	Good
DSC_0042.jpg	office-carpet-cleaning-before-after.webp
Screen Shot 2026-08-12 at 09.14.png	pagespeed-insights-image-report.webp
final_final_v3.png	window-cleaning-equipment-kit.webp

Alt text in one sentence

Describe the image for someone who cannot see it. Keep it under about 125 characters, skip “image of” and “photo of”, and only include a keyword if it genuinely describes what is in the frame. Purely decorative images should have an empty alt attribute (alt="") so screen readers skip them.

Also strip EXIF metadata

Photos from phones carry GPS coordinates, camera model and timestamps. That is dead weight of anywhere from 5 to 50 KB per file, plus a privacy issue if the photo was taken at your home. Most compression tools strip it automatically. Check the option is enabled.

Step 8: Cache, Serve from a CDN, and Re-Test

Your images are now small. The last step is making sure they travel fast and only travel once.

Set long cache headers. Images should be cached in the browser for at least a year (Cache-Control: max-age=31536000). Returning visitors then load them from disk instead of the network.
Use a CDN. Cloudflare, Bunny and similar services store copies of your images in data centres near your visitors. This usually cuts image response time by 100 to 300 ms per file.
Enable a caching plugin if you are on WordPress (WP Rocket, LiteSpeed Cache, W3 Total Cache).
Re-test after every change using PageSpeed Insights, WebPageTest or DebugBear. Test the same page, on the same connection type, twice, and use the second run.

Result in our test: fully loaded time went from 2.4 s to 1.9 s, and repeat visits loaded in under 0.8 s.

The Full Before and After Breakdown

Here is what each step contributed on our test page, measured on a simulated 4G mobile connection:

Step	Image weight	Load time	Saved
Starting point	8.40 MB	11.8 s	–
2. Resized to display size	2.60 MB	5.4 s	6.4 s
3. Compressed	1.40 MB	3.6 s	1.8 s
4. Converted to WebP	0.95 MB	2.9 s	0.7 s
5. Responsive srcset	0.52 MB	2.4 s	0.5 s
6. Lazy load + preload hero	0.52 MB	2.4 s (LCP 1.6 s)	LCP -1.5 s
8. Cache + CDN	0.52 MB	1.9 s	0.5 s
Total	-94%	-9.9 s	11.8 s to 1.9 s

The lesson: resizing and compressing account for roughly 80 percent of the gain, and both are free and take minutes. Do those two first before you worry about anything technical.

Your Repeatable Upload Checklist

Pin this next to your desk. Every image you add to the site from now on should pass through it:

Crop the image to the shape you actually need.
Resize to a maximum of 2x its display width (1920 px for heroes, 1200 px for content).
Export as WebP at quality 70 to 80.
Check the file size against the targets in Step 1.
Rename to lowercase-hyphenated-descriptive-words.webp.
Upload, then write a clear alt text.
Confirm below the fold images are lazy loaded and the hero is not.
Re-run PageSpeed Insights once a month.

Common Mistakes That Undo All Your Work

Uploading a PNG screenshot of a photo. PNG is for graphics and transparency, not photographs. It can be 5x heavier for zero visual benefit.
Lazy loading the hero image. Worsens LCP every single time.
Resizing with CSS instead of the file. Setting width:400px in CSS on a 4000 px image still downloads all 4000 pixels.
Compressing an already compressed file repeatedly. Each pass degrades quality permanently. Always work from the original.
Using an animated GIF. Convert it to an MP4 or WebM video. The file is typically 10 to 20 times smaller.
Forgetting the mobile version. Most of your traffic is on a phone. Always test mobile first.

FAQ

How do I improve the image loading speed of my website?

Resize images to the dimensions they are displayed at, compress them to quality 70 to 80, convert them to WebP, add lazy loading to below the fold images, preload your hero image, and serve everything through a CDN with long cache headers. In our test these steps together cut load time from 11.8 seconds to 1.9 seconds.

Is PNG or JPEG better for websites?

JPEG is better for photographs because it produces far smaller files. PNG is better for logos, icons, screenshots with text, and anything that needs a transparent background. In practice, WebP beats both in 2026 and supports transparency, so it is the safest default for a modern site.

What is the ideal image file size for a website?

Aim for under 200 KB for a full width hero, under 120 KB for a blog featured image, and under 50 KB for thumbnails. As a general rule, no single image on a standard business page should exceed 300 KB.

Does image optimization affect SEO?

Yes, in two ways. Faster pages perform better on Core Web Vitals, which is a ranking signal, and descriptive file names plus alt text help your images rank in Google Images and drive additional traffic.

Do I need 72 DPI images for the web?

No. DPI and PPI are print settings and have no effect on how an image renders in a browser or on its file size. Only pixel dimensions and compression quality matter. An extended version exists for anyone curious.

Should I use a plugin or optimize images manually?

Both. Optimize manually before upload so you control the crop and quality, then run a plugin like ShortPixel or Imagify as a safety net for anything that slips through or was uploaded by someone else on your team.

How much does WebP actually save compared to JPEG?

Typically 25 to 35 percent at equivalent visual quality. AVIF saves 40 to 50 percent but takes longer to encode, so it is best reserved for your largest hero images.

Will compressing images make them look bad?

Not at sensible settings. At quality 75 most people cannot tell the difference from the original on a screen. Always preview at 100 percent zoom and pay attention to faces, skies and smooth gradients, where artifacts appear first.

Final Word

You do not need a developer to fix slow images. Two steps, resizing and compressing, deliver the bulk of the improvement and can be done for free in a browser in an afternoon. The remaining steps are polish, and most of them can be automated once and forgotten.

Start with your homepage, your top landing page and your most visited blog post. Fix the three heaviest images on each. Then re-run PageSpeed Insights and watch the number move.