A few months ago, a client in Ludhiana sent us a message that started with, “Our site feels slow, but the hosting company says everything’s fine.” We opened the homepage in PageSpeed Insights and found the culprit in about thirty seconds: a hero banner uploaded straight from a photographer’s camera, weighing 4.8 MB. The whole page carried 11 MB of images, most of them displayed at a fraction of their original size.
That story isn’t unusual. In our experience, oversized images are one of the most common reasons a business website drags, and one of the easiest to fix. You don’t need a developer for most of it. You need a process.
Why images matter more than you’d think
Images are usually the heaviest assets on a page. The web.dev guide to Largest Contentful Paint notes that the largest visible element, very often an image, determines how quickly a page feels loaded. Google uses Largest Contentful Paint (LCP) as one of its Core Web Vitals, and it recommends aiming for 2.5 seconds or less.
Speed affects real people first and search engines second. A visitor on a mid-range phone with a patchy 4G connection won’t wait around for a 5 MB banner. Faster pages tend to keep more visitors, and Google has said that page experience is one signal among many in how it evaluates pages. We can’t promise that compressing images will lift your rankings, and nobody honestly can. What we can say is that it removes a very common obstacle.
Step 1: Resize before you upload
This is where most of the damage happens. A phone photo might be 4000 pixels wide. Your blog content area might display it at 800 pixels. The browser downloads all 4000 and then shrinks it on screen, which wastes bandwidth for no visual benefit.
A simple rule of thumb: export images at roughly the largest size they’ll appear, then allow up to double that for sharp display on high-density screens. For example:
- Full-width hero banners: around 1600 to 2000 pixels wide is plenty for most layouts.
- Blog post images: 800 to 1200 pixels wide.
- Product thumbnails: 400 to 600 pixels wide.
- Logos and icons: use SVG where possible, since they scale without losing quality and are usually tiny files.
Free tools like Squoosh, GIMP, or even the built-in editor on your computer can handle resizing. If you’re uploading dozens of images, a batch tool will save hours.
Step 2: Choose the right format
Format choice can cut file size dramatically without visible quality loss. Here’s the short version we give clients:
- JPEG works for photographs and is supported everywhere, but it’s no longer the most efficient option.
- PNG suits graphics that need sharp edges or transparency, such as screenshots. Avoid it for photos, because the files get huge.
- WebP typically produces noticeably smaller files than JPEG or PNG at similar quality, and all current major browsers support it.
- AVIF can compress even further and is now widely supported, though encoding is slower and some older tools don’t handle it well.
For most small business sites, converting to WebP is the practical sweet spot. If you’re on WordPress, many optimization plugins can do the conversion automatically and serve a fallback to the rare browser that needs it. Check the plugin’s current compatibility notes before installing, and test on a staging copy first if you can.
Step 3: Compress sensibly
Compression comes in two flavors. Lossless compression trims invisible data and keeps the image identical. Lossy compression discards some detail to save more space. For photographs, a lossy quality setting somewhere around 75 to 85 percent usually looks indistinguishable from the original to the human eye while shrinking the file considerably.
Don’t just take our number for it. Compress one image at a few settings, look at them side by side at normal viewing size, and pick the lowest setting where you can’t tell the difference. Product photos for a jewellery store may need a higher setting than a background texture, for instance.
Step 4: Lazy-load what’s below the fold
There’s no reason to download an image the visitor hasn’t scrolled to yet. Modern browsers support native lazy loading with a single attribute: loading="lazy" on the image tag. WordPress adds this by default to most images now, but themes and page builders sometimes override it, so it’s worth checking.
One important exception: never lazy-load your main above-the-fold image. If your hero image is the LCP element, delaying it makes the page feel slower, not faster. We’ve seen this mistake on sites where a plugin applied lazy loading to every image blindly.
Step 5: Set width and height attributes
Have you ever started reading a page and watched the text jump down as an image popped in above it? That’s layout shift, and it’s measured by another Core Web Vital called Cumulative Layout Shift. The fix is simple: include width and height attributes on your image tags so the browser can reserve the right space before the file arrives. Most modern themes handle this, but custom-coded sections often don’t.
Don’t forget alt text and file names
Optimization isn’t only about weight. Descriptive alt text helps visitors using screen readers and gives search engines context about the image. Write it the way you’d describe the image to someone over the phone: “Owner packing a handmade leather wallet in a Ludhiana workshop” beats “wallet” and certainly beats a string of keywords. Similarly, a file name like leather-wallet-packing.jpg is more useful than IMG_4837.jpg.
Quick answers
How big should an image file be?
There’s no single magic number, but as a loose guideline many sites aim to keep individual content images under about 200 KB and hero images under 300 to 400 KB. Treat these as starting points and judge by how the page actually performs.
Will compressing images hurt quality?
Not noticeably if you do it carefully. Start with moderate settings and compare against the original. Keep your original files stored somewhere safe so you can re-export later.
How do I check whether images are slowing my site?
Run your key pages through PageSpeed Insights. Look for opportunities like “Properly size images,” “Serve images in next-gen formats,” and “Defer offscreen images,” and check your Largest Contentful Paint element. The Core Web Vitals report in Google Search Console also shows how real visitors experience your pages over time.
A simple routine to keep it fixed
Image bloat creeps back in when new content gets uploaded without a process. We suggest writing a one-page checklist for whoever updates the site: resize to the right dimensions, export as WebP or compressed JPEG, add alt text, then upload. Spot-check with PageSpeed Insights after big content updates. Ten minutes of discipline per page beats a painful clean-up every year.
Image optimization won’t fix every performance problem, since slow hosting, heavy scripts, and bloated plugins all play their part. But it’s often the cheapest win available, and it improves the experience for every visitor, whatever the search results end up doing.
Written by the team at Technowave Global Solutions, a web design, development, and SEO agency based in Ludhiana, India, working with clients since 2010. Last updated October 2026.