Support article
How to Optimize Images for the Web Without Losing Quality
Optimize your website images: format, weight, dimensions, WebP, lazy loading and free tools to reduce size without losing quality.
Introduction
Images are almost always the heaviest element on a website. A single unoptimized photo can weigh more than the entire rest of the page. That’s why optimizing images is the improvement with the most impact on load speed.
In this article you’ll see how to reduce image weight without them looking worse, which formats to use, and which tools help.
Why images slow down your website
Every image a visitor loads is a file their browser has to download. If the image weighs 3 MB, the visitor has to download 3 MB before seeing it. And if you have 20 images per page, that’s 60 MB.
Consequences:
- The website takes a long time to load.
- You consume bandwidth, especially from mobile visitors.
- Google penalizes you in SEO (speed is a ranking factor).
- The visitor abandons before it loads.
The good news: an optimized image can weigh 10 times less and look practically the same.
Basic optimization rules
1. Resize before uploading
Don’t upload a 4000×3000 pixel photo if it will be displayed at 800×600 on the website. Resize the image to the size it will be shown at.
| Use | Recommended size |
|---|---|
| Article featured image | 1200×800 px |
| Full-width banner | 1920×600 px |
| Product thumbnail | 600×600 px |
| Icon | 128×128 px |
If you upload an image larger than what’s displayed, the browser scales it, but still downloads the large file. Always resize.
2. Choose the right format
| Format | What it’s for | Weight |
|---|---|---|
| WebP | Photos and graphics (modern format) | Very low |
| AVIF | Photos (even more modern format) | Even lower |
| JPEG | Photos | Low |
| PNG | Images with transparency | High |
| GIF | Simple animations | Medium |
Recommendation: use WebP whenever you can. It’s compatible with all modern browsers and weighs much less than JPEG or PNG with the same quality.
If you use WordPress, optimization plugins (like LiteSpeed Cache, Smush or ShortPixel) automatically convert images to WebP.
3. Compress without overdoing it
Compression reduces weight by removing data the eye doesn’t perceive. There are two levels:
- Lossy compression: reduces weight more, but loses a bit of quality. Recommended for most cases.
- Lossless compression: doesn’t lose quality, but reduces weight less.
For the web, moderate lossy compression (quality 80-85) is usually enough. The eye barely notices the difference, but the weight drops a lot.
4. Use lazy loading
Lazy loading (deferred loading) makes images load only when the visitor scrolls and reaches them. This way, images off-screen don’t slow down the initial load.
WordPress includes native lazy loading since version 5.5. Plugins like LiteSpeed Cache also add it.
Tools to optimize images
Free online
| Tool | What for | Notes |
|---|---|---|
| Squoosh (Google) | Convert and compress | Excellent, free |
| TinyPNG / TinyJPG | Compress PNG and JPEG | Free up to 20 images |
| Compressor.io | Compress various formats | Free |
| Optimizilla | Compress JPEG and PNG | Free |
For WordPress (plugins)
| Plugin | Feature | Price |
|---|---|---|
| LiteSpeed Cache | Optimization + WebP | Free (LiteSpeed server) |
| Smush | Compression and resizing | Free and paid |
| ShortPixel | Compression and WebP/AVIF | Free (quota) and paid |
| Imagify | Compression and WebP | Free (quota) and paid |
For desktop
| Tool | Platform | Notes |
|---|---|---|
| FileOptimizer | Windows | Free, very complete |
| ImageOptim | Mac | Free |
| GIMP | All | Free editor, exports optimized |
| Photoshop | All | ”Save for web” reduces weight |
How to optimize images step by step
Step 1: Resize
Open the image in your editor (GIMP, Photoshop or an online tool) and reduce it to the needed size. Don’t upload images larger than 2000 pixels wide, except in very specific cases (full-screen banners).
Step 2: Compress
Pass it through a compression tool like Squoosh or TinyPNG. If you use JPEG, lower the quality to 80-85. If you use PNG, let the preview guide you.
Step 3: Convert to WebP
If your website supports it (most WordPress and modern websites do), convert the image to WebP. It’ll weigh less with the same quality.
Step 4: Upload and verify
Upload the image to your website. Check with PageSpeed Insights that it no longer appears in the “optimize images” list.
Useful tips
- Optimize before uploading, not after. If you upload huge images and rely on a plugin to reduce them, you consume server resources.
- Set a maximum size. Set a limit (for example 1920 pixels wide) for all images you upload.
- Beware of large PNG logos and screenshots. Large PNGs are very heavy. Use SVG for logos and JPEG/WebP for photos.
- Review old images. If your website is years old, it probably has unoptimized images. A plugin can compress them in bulk.
- Don’t forget the
altattribute. In addition to optimizing weight, describe the image with alternative text for SEO and accessibility.
Common problems
Images look pixelated after compressing
You compressed too much. Raise the quality or use lossless compression.
WebP format doesn’t show in old browsers
WebP is compatible with all modern browsers. For very old ones (IE11), use a plugin that serves a JPEG fallback.
SVGs don’t show or give a security error
Some CMS (like WordPress) don’t allow SVG upload for security. Use an SVG plugin or upload logos as optimized PNG.
I have thousands of old unoptimized images
Use a bulk optimization plugin (like Smush or ShortPixel) that compresses all existing images in bulk. It takes time, but runs on its own.
My website is still slow after optimizing images
Review other factors: cache, JavaScript, plugins, server. Images are usually 50% of the problem, but not 100%.
Frequently asked questions
How much should an image weigh for the web?
As a general rule, an optimized web image shouldn’t weigh more than 200 KB. Full-screen images can weigh up to 500 KB; thumbnails, less than 50 KB.
WebP or JPEG?
WebP, whenever your website supports it. It weighs less with the same quality.
Can I optimize images already on my website?
Yes. WordPress plugins (Smush, ShortPixel) can optimize already uploaded images in bulk.
Is PNG or JPEG better?
It depends. JPEG for photos (more compression); PNG for images with transparency or few colors (logos, icons). WebP for both.
Does lazy loading affect SEO?
No, quite the opposite. Google recommends it. Just make sure important images (like the main one) load without lazy loading.
Lightweight images, fast website
Optimizing images is the most profitable improvement you can make to your website. It’s free, fast and has a huge impact on speed. With the right tools and basic rules (resize, compress, use WebP, lazy loading), your website will load much faster.
If after optimizing your website is still slow, the problem may be hosting. At miHosting we use NVMe SSD and LiteSpeed that offer very low server response time, improving your Core Web Vitals. Open a ticket from your client panel and we’ll help you diagnose.