On the median mobile home page in 2025, images accounted for 911 KB of the 2.56 MB total. That is more than JavaScript, more than fonts, more than everything else combined on a typical page. According to the HTTP Archive 2025 Web Almanac, images are the single largest resource type by bytes on both mobile and desktop.
The images for a website are almost always the heaviest thing the browser has to download. And most of that weight is wasted. A 4000-pixel camera photo dropped into a 600-pixel slot. A PNG export where a compressed WebP would have been a third of the size. A hero image nobody ever told to shrink.
Here is the thing. You do not need a degree in compression to fix this. You need three numbers in your head and a habit of checking before you upload. This post is the version of image optimization I actually use on client sites, written for people who manage WordPress sites but do not want to read a codec spec.
Why Image Weight Is the Number That Moves Your Speed Score
Image weight matters because Google now scores your page on how fast the biggest thing finishes loading, and that biggest thing is usually an image. The metric is called Largest Contentful Paint, or LCP, and it is one of the three Core Web Vitals that Google uses as a page experience ranking signal.
According to web.dev, roughly 73% of mobile LCP elements are images. So when your hero photo is 2 MB, your LCP is slow, and a slow LCP drags your whole page experience score down with it. Google treats Core Web Vitals as a tiebreaker between pages of similar quality and authority, which means on a competitive search result, the lighter page wins.
The good news is the rest of the field is not doing this well either. According to the HTTP Archive 2025 data, only 62% of mobile pages pass a good LCP score, up from 44% in 2022. That leaves a lot of room to beat your competition by simply rightsizing your images before they ship. This is the same logic that drives most of on-page performance work on a WordPress site: cut the bytes the browser has to move.
The Three Numbers That Decide Whether an Image Hurts You
Every image you put on a site is really three decisions: how many pixels wide it is, what format it is saved in, and how hard it is compressed. Get those three right and the file shrinks on its own. Get them wrong and no plugin saves you.
Dimensions: Match the Pixels to the Slot
This is the one that wastes the most weight, and almost nobody checks it. A modern phone camera shoots photos around 4000 pixels wide. A full-width hero on most sites displays at about 1920 pixels on a large desktop and far less on a phone. If you upload the raw 4000-pixel file, the browser downloads four times the data it can ever show, then throws three quarters of it away.
The fix is to resize before upload. A full-width hero rarely needs to exceed 1920 pixels wide. A blog body image inside a content column rarely needs more than 1200. A thumbnail or logo needs a few hundred. Resizing a 4000-pixel photo down to 1600 before you ever touch WordPress can cut the file by 80% with no visible loss.
| Image role | Max width to upload | Why |
|---|---|---|
| Full-width hero | 1920px | Covers the widest common desktop viewport |
| Blog body image | 1200px | Fits a standard content column with room for retina |
| Two-column or card image | 800px | Half-width display rarely needs more |
| Thumbnail or logo | 400px | Small display slot, small file |
Format: WebP Is the Default Now
Format is the second lever, and in 2026 the answer is simple. Use WebP for photographs and most graphics. According to Google’s WebP compression study, WebP files run 25% to 34% smaller than JPEG at the same visual quality. Browser support is no longer a reason to hesitate, with WebP supported in roughly 95% to 97% of browsers in use worldwide.
WordPress has supported WebP uploads natively since version 5.8, so you can upload a WebP file straight into the media library and it just works. The catch is that WordPress does not convert your existing JPEGs and PNGs for you. For that you reach for a plugin that converts on upload and serves WebP with a fallback. PNG still has its place for graphics that need transparency or hard edges, like logos and screenshots of text, but for real photographs WebP wins almost every time.
One caveat, be sure if you convert to webp with a tool prior to uploading that it allows for compression. I use Snagit for image conversion/compression and it doesn’t allow webp compression, so I generally end up using jpg for my images.
Compression: Quality 75 to 85 Is the Sweet Spot
Compression is the dial that decides how aggressively detail gets thrown away. Set it too high and the file balloons. Set it too low and you get visible artifacts and blocky skies. For web photographs, a quality setting around 75 to 85 is the range where the file gets small but the eye cannot tell. Most people cannot see the difference between a quality-95 and a quality-80 JPEG on a screen, but the quality-80 version is often half the size.
You do not have to guess at this dial by hand for every image. A good optimization plugin applies a sensible quality target across your whole library and lets you tune it if a specific image looks soft. The point is that compression is real, it is free bytes, and most uploads leave it on the table.
The File Size Where Images Start Hurting Your Rankings
There is no single legal limit, but there are working thresholds I hold client images to. A full-width hero image should land under about 150 KB after compression and WebP conversion. A standard blog body image should sit comfortably under 100 KB. A thumbnail should be a few tens of KB at most.
Compare that to reality. The median mobile home page ships 911 KB of images and the median desktop home page ships over 1 MB, per the HTTP Archive 2025 numbers. If a single hero is eating 1 MB on its own, that one file is already heavier than the entire image budget of a well-built page. That is the gap between a page that passes Core Web Vitals and one that does not.
One more trap worth naming: lazy loading the wrong image. Lazy loading defers offscreen images so they load only when the visitor scrolls to them, which is great for everything below the fold. But the HTTP Archive found that 16% of mobile sites lazy-load their LCP image, the big one at the top of the page. Deferring the most important image on the page is the opposite of what you want. Your hero should load eagerly. Everything below it can wait.
Filenames and Alt Text: The Free SEO Most People Skip
Rightsizing is about speed. Naming is about being found. These are two separate jobs and you want both. A file called IMG_3847.jpg tells Google nothing. A file called blue-kitchen-remodel-colorado-springs.webp tells Google exactly what the image shows and what page it belongs to.
Rename your image files before you upload, using plain title case text (e.g., ‘Rightsizing Images for Performance’). When uploaded to the media library, WordPress will add hyphens in place of the spaces. Describe what is actually in the frame. This is the same discipline that powers content that actually gets found online, applied to your media library instead of your headings.
Then write real alt text. Alt text is the description screen readers announce to visually impaired visitors, and search engines read it to understand the image. According to Liquid Web, good alt text is descriptive but concise, includes a relevant keyword naturally, and avoids filler like “image of” or “picture of.” For purely decorative images, leave the alt attribute empty so screen readers skip them. Do not stuff keywords. Describe the picture as if you were telling someone who cannot see it what is there.
How I Set Up Images on a WordPress Site
Here is the workflow I run on client sites, in order. None of it is complicated. The discipline is in doing it every time instead of dragging the raw camera file straight into the media library.
- Resize the image to the largest width it will ever display, using the table above. A hero gets 1920px, a body image gets 1200px.
- Rename the file to title case words that describe the subject. No IMG_3847.
- Convert and compress to WebP at quality 75 to 85, either in an image editor before upload or with a conversion plugin on upload.
- Upload, then write descriptive alt text in the media library. Leave it empty only for decorative images.
- Let your hero image load eagerly and lazy-load everything below the fold.
For sites I am not babysitting upload by upload, I lean on an automation plugin to handle steps 3 and a sane default for compression across the whole library. ShortPixel, Imagify, and WP-Optimize all convert to WebP on upload and bulk-optimize existing media. Pick one, set the quality target, and let it run. After that, the only manual habit you need to keep is resizing oversized originals and writing good alt text.
If you want to see where you stand right now, run your homepage through a speed test and look at the LCP number and the list of largest resources. A pile of free browser-based tools will show you exactly which image is the heaviest thing on the page, which is usually the one worth fixing first.
Three Things People Get Wrong About Image Optimization
“My optimization plugin handles everything”
A plugin compresses and converts, but it cannot fix dimensions you got wrong at upload. If you hand it a 4000-pixel file for a 600-pixel slot, it makes a smaller version of a file that is still four times too big in pixels. Resizing is the one step the plugin cannot do for you, because it does not know how wide the image will actually display.
“PNG looks sharper, so I use it for photos”
PNG is lossless, which sounds better but means it does not compress photographs well at all. A photo saved as PNG can be five to ten times larger than the same photo as WebP, with no visible quality gain on a screen. Save PNG for logos, icons, and screenshots of text where hard edges and transparency matter. Use WebP for anything that looks like a photograph.
“Image weight does not really affect SEO”
It does, just indirectly. Google does not rank you on file size directly. It ranks partly on Core Web Vitals, and your heaviest image usually decides your LCP, which is the hardest of the three vitals to pass. So a 2 MB hero does not get penalized for being 2 MB. It gets penalized for making your LCP slow, and that is a real ranking input.
The One Habit That Fixes Most of This
If you remember one thing, make it this: resize before you upload. Dimensions are the single biggest source of wasted weight in the images for a website, and they are the one thing no plugin can fix after the fact. Get the pixels right, convert to WebP, compress to quality 80, and name the file like a human. Do that every time and your media library stops being the anchor dragging your speed score down.
Run a speed test on your homepage this week and find your heaviest image. There is a very good chance it is a hero photo nobody ever resized. Fix that one file and you will see the LCP number move, often by a full second or more.
0 Comments