Images are the heaviest thing on almost every website. On the median page, they account for more bytes than scripts, fonts, and stylesheets combined, and on 68 percent of mobile pages the single largest element a visitor waits for is an image. Which means that if your site feels slow, the first place to look is not your host or your plugins. It is what you uploaded.
The good news is that website image optimization is one of the few performance problems a business owner can fix without a developer. It comes down to three decisions — how big, what format, how compressed — and each one has a defensible answer you can apply in about ten minutes per image.
The one number that causes most of the damage
A photo straight off a phone or a camera is somewhere between 3,000 and 6,000 pixels wide. The widest any image on your website is ever displayed is about 2,000 pixels, and that is a full-bleed hero on a large desktop monitor. A photo inside a blog post is displayed at roughly 800 pixels. A team headshot might be 400.
Upload the camera file and you have sent a visitor five times the data they can see. The HTTP Archive’s 2024 survey of millions of sites found that about half of all pages serve images larger than the screen can display — the single most common image mistake on the web, and the easiest to stop making.
Resize before you upload. These widths cover nearly every case:
- Full-width hero or banner: 2000 pixels wide
- In-post or in-page photo: 1200 pixels wide
- Blog featured image / card thumbnail: 1200 pixels wide
- Headshot or logo in a sidebar: 600 pixels wide
- Icon or small badge: 200 pixels wide
WordPress generates smaller copies of whatever you give it and hands the right one to each device. That is genuinely useful — but it keeps your original too, and some themes and page builders reach for it anyway.
Which image format should you use?
Use WebP for photographs and SVG for logos and icons. Those two cover almost everything on a small-business website. JPEG remains a perfectly good fallback for photos, and PNG is worth keeping only when you need a transparent background and SVG is not an option.
WebP is a photo format Google released to replace JPEG. Its own compression study put WebP files 25 to 34 percent smaller than JPEGs of equivalent quality, and every browser still shipping updates supports it. WordPress has accepted WebP uploads since version 5.8 in 2021, so you can simply use it.
One caveat worth stating plainly: WordPress does not convert your existing JPEGs to WebP on its own. If someone told you “WordPress handles that now,” they are thinking of a feature that never shipped in core. Converting an old library takes a plugin or a host that does it for you.
AVIF is the newer format and smaller again — commonly 40 to 50 percent under JPEG — but it was still on only about one percent of mobile images in 2024. Use it on a large hero where the savings are biggest, with a WebP fallback. Do not hand-convert a hundred product shots to it yet.
SVG is the odd one out, and the most underused. It is not a picture of your logo, it is the instructions for drawing it, so it stays sharp at any size and usually weighs less than a thumbnail. Your logo should be an SVG on your website. If all you have is a PNG, that is a sign your logo files are incomplete.
How much compression is too much
Compression quality is a slider from 0 to 100 in every image tool. For web photos, 75 to 85 is the working range. Below about 70 you start seeing mush in gradients — skies, shadows, out-of-focus backgrounds. Above 90 you are adding file size a visitor cannot perceive.
Target weights, once an image is correctly sized and in a modern format:
- Hero image: under 200 KB
- In-post photo: under 100 KB
- Thumbnail: under 30 KB
For comparison, the median image on the web in 2024 was 12 KB, and the median page’s single largest image was 135 KB. If your hero is 1.8 MB, you are not near the middle of the pack. You are an outlier your visitors are paying for.
Check one thing with your own eyes before you accept a compressed file: look at the largest area of flat, subtle color in the frame. Compression artifacts show up there first, long before they appear in detailed areas. If the sky still looks like sky, you are fine.
Where quality still has to win
There is a category of business where the image is the product, and the arithmetic changes. Jewelry is the clearest example — on a site like deBella Fine Gems & Jewelry Arts, where close-up stone photography is doing the selling, compressing a gem until the facets go soft costs more than the half second it saves. The same is true for fine art, textiles, prepared food, and anything where surface and texture are the reason someone buys.
The resolution is not to abandon the rules. It is to spend the budget where it earns something: compress the hero and the thumbnails hard, let the detail shots run at a higher quality, and make sure nothing below the first screenful loads until the visitor scrolls toward it. A product gallery can carry thirty high-quality images and still load fast, as long as only the first two or three are fetched up front.
The lazy-loading mistake almost everyone makes
Lazy loading tells the browser not to download an image until the visitor scrolls near it. WordPress does this automatically now, and roughly a third of all websites use it. It is the right default for everything below the fold.
It is exactly the wrong thing for the image at the top of the page. Lazy-loading your hero tells the browser to wait before fetching the one image the visitor is actively staring at, which delays the moment the page looks finished. The 2024 data found this on 9.5 percent of pages — about one site in ten slowing itself down with a technique meant to speed it up.
If you use a page builder or an image plugin with a lazy-load setting, find its “skip the first image” or “exclude above-the-fold images” option and turn it on. It is usually one checkbox.
How do I know if my images are actually a problem?
Run your homepage through Google’s PageSpeed Insights and look at one metric: Largest Contentful Paint. Google considers 2.5 seconds or less good, 2.5 to 4 seconds in need of improvement, and over 4 seconds poor. If your score is poor and the element it names is an image, you have found your problem and its solution in the same line. The report will tell you which file, how big it is, and how much smaller it could be — no guessing required.
Test on mobile, not desktop. Google’s ranking signals use the mobile measurement, and so does most of your traffic.
A thirty-minute website image cleanup
- Run PageSpeed Insights on your three most-visited pages. Note the image each one names as its largest element.
- Download those three images, resize them to the widths above, save as WebP at quality 80, and re-upload.
- Confirm your hero image is not being lazy loaded.
- Replace any PNG logo with an SVG.
- Sort your media library by file size and look at the top twenty. Anything over 500 KB that is not a detail shot gets the same treatment.
That list will not make a slow site fast on its own — hosting, plugins, and theme code all have a say. But it addresses the largest share of the weight on most small-business websites, and it costs nothing but an afternoon.
Patrick Iverson is a brand strategist and web developer in Santa Fe, New Mexico, who has run an independent practice here since 2001 and built on WordPress since 2003. Getting images right is part of how I approach custom WordPress development — built in during the project, not bolted on after the complaints start. If you have run the test and the numbers do not make sense, send me the report and I will read it with you.
