How to Avoid Common Image Optimization Mistakes on Your Website

A 3MB product photo loads just fine on your dev machine. Fast connection, no lag, looks great. Then a real user hits it on mobile, and your Core Web Vitals tank.
You probably already have a compression plugin running. Maybe you’ve even converted your library to WebP. And PageSpeed still complains.
That’s because the plugin handles one piece of the puzzle. The rest, format decisions, sizing logic, what happens to your theme images and slider assets, falls through the cracks. These are the mistakes that actually slow sites down, and they’re easy to miss.
Why the default WordPress setup doesn’t solve it
Most image optimization plugins handle one part of the problem: compression. That’s important, but it’s only one piece of the puzzle.
This is where most setups fall short, not because the tools are bad, but because they’re only solving part of the problem.
What they don’t handle by default is how images are sized, which formats are delivered, or what happens to images outside your media library. These gaps are where most performance issues come from.
Image optimization isn’t just about compression, it’s about how your entire image pipeline is handled.
10 mistakes worth fixing
1. Uploading massive source files
A 4000×3000px camera photo on a page with an 800px content area. The browser downloads the entire thing, renders a fraction of it, discards the rest. Wasted bandwidth.
Images are the Largest Contentful Paint (LCP) element on about 70% of web pages. Anything above 2.5 seconds and bounce rates spike.
Resize before you upload. Content area is 800px? Keep uploads under 1600px (2x for retina). ShortPixel Image Optimizer does this on upload if you’d rather automate it.
2. Wrong format for the job
PNG for a photograph balloons the file, 5–10x bigger than JPEG for the same shot. JPEG for a transparent logo? That just breaks.
JPEG for photos. PNG when you need transparency or sharp text. SVG for icons and vector stuff. WebP and AVIF as delivery formats, they compress better and browser support is solid at this point (97%+ for WebP, 92%+ for AVIF).
Pick the right source format, then let a plugin handle the delivery conversion. Choosing between image file formats like JPEG, PNG, WebP, and AVIF has a direct impact on file size and performance.
3. Not delivering next-gen formats
Even if your source files are set up right, serving plain JPEG to every visitor leaves free performance on the table. WebP cuts 45–65% off JPEG file sizes. AVIF goes further — 60–80%. The differences between AVIF and WebP in terms of compression and browser support can significantly affect how much performance you gain.
ShortPixel Image Optimizer converts and serves the right format per browser automatically. No <picture> tags to manage yourself.
4. Inconsistent compression
One person exports from Photoshop at quality 85. Someone else uses Squoosh at 60. An intern uploads raw files on a Tuesday afternoon. Without a single pipeline handling everything, your media library becomes a patchwork.
One tool, one setting, applied to everything. ShortPixel’s Glossy mode works well as a default, good balance between quality and size. Set it once and never worry about it again.
5. Compressing the same image twice
You optimize in Photoshop before uploading. Then your plugin compresses it again. Two rounds of lossy compression. Quality drops noticeably. File size barely moves.
The tell: images look degraded after optimization, but savings are under 10%.
Upload clean originals. Let one tool compress. If you prefer doing it before upload, turn off server-side compression so they don’t stack.
6. Ignoring responsive images
A 1200px image served to a 375px phone screen. Mobile users, typically 55–70% of traffic, download 3–4x more data than needed.
WordPress adds srcset by default. But themes break it. Page builders override it. CSS backgrounds skip it entirely.
Open DevTools on a mobile viewport. Check what’s actually loading. ShortPixel Adaptive Images serves the right size per device across the board, CSS backgrounds included.
7. Lazy loading your hero image
Lazy loading below the fold saves bandwidth. Lazy loading the hero banner at the top of the page? That kills LCP.
With loading=”lazy” on a hero image, the browser waits for JavaScript before it even starts the download. Google’s own docs flag this as a problem.
First 1–3 visible images: loading=”eager” or just drop the lazy attribute. Throw in fetchpriority=”high” on the main hero. Lazy load everything else.
8. Missing the images your plugin never sees
Your optimization plugin processes what’s in the Media Library. Theme backgrounds, slider assets, hardcoded favicons, those sit somewhere else. Uncompressed. Often the heaviest files on the page.
Filter the DevTools Network tab by images. Anything loading outside /wp-content/uploads/ is probably untouched. ShortPixel Image Optimizer supports custom media folders and can optimize all these images automatically.
9. No width or height on images
Without width and height attributes, the browser reserves zero space while the image loads. Content jumps. Buttons shift. Users tap the wrong thing.
Google calls this Cumulative Layout Shift (CLS). Anything above 0.1 is a bad score, and missing image dimensions are a top cause.
Set dimensions on every <img>. WordPress does it for block editor images, but theme files and dynamic content usually skip it. Add max-width: 100%; height: auto; in CSS to keep things responsive.
10. Skipping file names and alt text
“IMG_4523.jpg” with blank alt text gives Google nothing to work with. Same for screen readers, zero context.
Rename before uploading. “red-running-shoes-nike.jpg” beats “IMG_4523.jpg” every time. Write alt text that describes the image in context, keep it under 125 characters, and avoid keyword stuffing, issues related to alt text, titles, and captions in image SEO are still common and often overlooked.
ShortPixel Image Optimizer’s AI Image SEO feature can generate your SEO data such as ALT Tags, Captions and Descriptions automatically!
Run through this before you publish or when auditing older content:
Quick checklist
- Resize source images to display size (2x for retina)
- Right source format: JPEG, PNG, SVG
- WebP/AVIF delivered to supported browsers
- Single compression pipeline, no double processing
- srcset and sizes working properly on mobile
- Lazy loading below the fold only
- Theme images, sliders, CSS backgrounds covered
- Width and height on every <img>
- Descriptive filenames
- Alt text everywhere
How ShortPixel fits in
Most of these ten items aren’t one-off fixes. They’re workflow gaps that get worse as your site grows. You can resize one image manually. Doing that consistently across a thousand posts while publishing new content weekly, that breaks down fast.
ShortPixel Image Optimizer handles the upload side: the best image compression, auto-resize, format conversion to WebP and AVIF, next-gen format delivery locally or via CDN and even AI Image SEO. Everything bundled into a single plugin.
Set it up once. Everything after that, old uploads, new ones, runs on its own.
FAQs
What’s the biggest image optimization mistake?
Oversized source files. Most common issue, biggest LCP hit.
Should I compress before uploading?
Better to upload originals and let one plugin handle it. Avoids double compression.
WebP or AVIF?
Both. WebP has wider support (97%+). AVIF compresses ~15–20% better but covers fewer browsers (~92%). Serve AVIF where possible, WebP as fallback.
Does lazy loading hurt SEO?
Only when you lazy-load above-the-fold images. Everything below the fold, go for it.
Start with whatever drags your LCP down the most. Measure before and after. Then move to the next thing on the list.
Try ShortPixel on WordPress for free!
Easily optimize your pictures and cut down pixels fast using ShortPixel Image Optimizer.