How to Reduce Image Size for Your Website (Without Losing Quality)
How to reduce image size for your website without making photos look worse — resize to the size actually shown, compress, switch to WebP or AVIF, and lazy load the rest.
Common signs of this issue
- You want to reduce image size for your website because pages with photos load slowly, especially on phones.
- PageSpeed Insights lists "Properly size images", "Serve images in next-gen formats", or "Efficiently encode images" (newer versions group these as "Improve image delivery").
- Your photos come straight from a phone or camera and are several megabytes each.
- The homepage banner or slider takes a visible moment to appear after the rest of the page.
- Your hosting account is filling up, and the media library or uploads folder is the biggest thing in it.
- You tried compressing images before and they came out blurry, blotchy, or with odd colors.
Safe checks you can do yourself
None of these require sharing passwords with anyone.
- Find your heaviest images first. Run your homepage through PageSpeed Insights (pagespeed.web.dev) and open the image-related suggestions — they list the exact files and how much could be saved. Fix the biggest few before touching anything else.
- Check the pixel dimensions of a problem image against the size it is actually shown. A photo 4,000 pixels wide displayed in a 1,200-pixel-wide column is carrying more than ten times the pixels it needs. Resizing is usually the single biggest saving, and it costs no visible quality.
- Resize before you upload. As a rough guide, full-width banners rarely need to be wider than about 1,600 to 2,400 pixels, content images about 800 to 1,200, and thumbnails a few hundred. Your theme may use different sizes, so treat these as starting points, not rules.
- Compress with a free tool you can see the result in. Squoosh (squoosh.app, runs in your browser) shows a before-and-after slider so you can lower quality until you just start to notice a difference, then back off a notch. TinyPNG, ImageOptim on Mac, and the export options in most photo editors do similar jobs.
- Pick the right format. Photos: WebP or AVIF, or JPEG if you must. Logos, icons, and screenshots with flat colors: PNG, WebP, or SVG for true vector logos. A photo saved as PNG is one of the most common reasons for a 3 MB image that should be 200 KB.
- Aim for sensible targets rather than a magic number. Many sites do well with large hero images somewhere around 100 to 300 KB and ordinary content images under about 150 KB, but a detailed product photo may justify more. If it looks good and PageSpeed stops flagging it, it is small enough.
- Check that lazy loading is on for images further down the page (most modern themes and WordPress itself add
loading="lazy"automatically). Make sure the main image at the top is not lazy loaded — delaying it makes the page feel slower, not faster. - On WordPress, consider one well-reviewed image optimization plugin rather than several. Options such as ShortPixel, Imagify, EWWW Image Optimizer, Smush, or the image features built into some caching plugins can compress existing uploads and serve WebP. Pricing and free limits change often, so check the current plan before bulk-processing thousands of files.
- After changes, clear any caching plugin or CDN cache and re-test in PageSpeed Insights, then look at the page on your phone to confirm nothing went blurry or broke.
What this usually means
Image size has two separate parts, and people often only fix one. Dimensions are how many pixels wide and tall the image is. File size is how many kilobytes it takes to download. A photo straight from a modern phone can be 4,000 or more pixels wide and several megabytes, when the page only ever shows it at a fraction of that. Shrinking the dimensions to match reality, then compressing, typically cuts file size dramatically with no difference a visitor could see.
Format matters almost as much. WebP is supported by every current mainstream browser and is usually noticeably smaller than a JPEG of similar quality. AVIF can be smaller still and is now widely supported, though it is slower to create and a few older devices and tools handle it poorly — which is why many plugins serve AVIF or WebP with a JPEG fallback. For most small business sites, WebP alone captures most of the benefit. Real savings vary by image, so test rather than trusting a headline percentage.
Heavy images show up in speed scores because they slow down Largest Contentful Paint — often the hero image is literally the largest thing on the page. That is why image work is usually the quickest real improvement on a slow site. It is not the whole story, though: if your pages are still slow after images are handled, the cause is more likely hosting, too many scripts, or a heavy theme, covered in website loads slowly and Core Web Vitals failing.
What not to do
- Don't upload photos straight off your phone or camera and rely on the website to shrink them. Resize first.
- Don't crank compression to the lowest quality setting to hit a number. Blotchy product or team photos cost more trust than they save in speed.
- Don't install two or three image optimization plugins at once. They can double-process files, fight over WebP delivery, and cause broken images.
- Don't bulk-optimize your whole media library without a recent backup. Some plugins overwrite originals, and that cannot be undone without one.
- Don't lazy load the main banner or logo at the top of the page. It delays the very thing visitors see first.
- Don't raise the upload size limit just to fit giant originals. Making the images smaller is the real fix.
When to get help
If you have already resized and compressed the obvious images and PageSpeed still flags image delivery, the cause is often in the theme or page builder — background images set in CSS that plugins cannot reach, sliders loading every slide up front, or a theme that ignores the smaller sizes WordPress creates. It is also worth handing off if your media library holds thousands of files and you are nervous about a bulk process on a live site, or if optimization left images broken or missing. Someone experienced will back up first, test on a copy, and fix delivery at the theme level, which is where the stubborn savings hide.
Glenn, who runs WebsiteSelfHelp, speeds up slow small business sites, and images are usually where he starts. Ask for a speed review, share the page that feels slowest, and you will get a plain answer on how much is images and how much is something else — no passwords needed to begin.
Not sure what to do next?
Answer a few short questions and we'll point you to the safest next step — DIY, a freelancer, or a direct review. No passwords required.
Frequently asked questions
How do I reduce image size for my website without losing quality?
Resize the image to roughly the largest size it is actually displayed at, then compress it with a tool that shows a before-and-after preview, such as Squoosh. Saving photos as WebP usually shrinks them further with no visible difference. Most of the saving comes from resizing, which loses nothing a visitor can see.
What is the best image size for a website?
There is no single answer, because it depends on how wide the image is shown. As a rough guide, full-width banners are often 1,600 to 2,400 pixels wide and ordinary content images 800 to 1,200. For file size, many sites aim for hero images in the low hundreds of kilobytes and smaller images well under that.
Should I use WebP or AVIF?
WebP is the safe, widely supported choice and gives most of the benefit. AVIF can be smaller, and current browsers support it, but it is slower to create and not every tool handles it well. Many plugins serve AVIF or WebP with a fallback, which gets you both without risk.
Will compressing images help my Google rankings?
Indirectly. Page experience is only one of many ranking factors, but lighter images improve load time and Core Web Vitals, and faster pages keep more visitors on the site. It will not make up for weak content, but it removes a real drag.
Do I need a plugin to optimize images in WordPress?
Not strictly. You can resize and compress before uploading and never need one. A plugin helps when you have a large existing library or several people uploading images, because it handles compression and WebP delivery automatically.
Why are my images blurry after compressing them?
Usually the quality setting was too low, or the image was resized smaller than the space it fills, so the browser stretches it. Re-export from the original at a slightly higher quality and at least the displayed width, or double it for sharp screens if the file stays reasonable.
What is lazy loading and should I use it?
Lazy loading tells the browser to wait on images further down the page until the visitor scrolls near them. It is usually on by default in modern WordPress and themes. Keep it on for lower images, but not for the main image at the top of the page.