When Airbnb redesigned its website, one of the biggest wins didn’t come from adding new features but from optimizing its images. By compressing photos, choosing the right formats, and ensuring mobile-friendliness, the platform reduced page load times by over 40%. The result? Better rankings on Google, improved user experience, and a measurable increase in bookings.
That’s the power of image optimization for SEO. Images are more than just visual elements — they impact page speed, user engagement, search engine rankings, and even conversions. Let’s explore how you can do the same for your website.
Different Image Types Used on a Website
Websites use a mix of image types, each serving a unique purpose. Choosing the right format and size is essential for SEO.
| Image Type | Best Use Case | Recommended Format | SEO Notes |
| JPEG/JPG | Product photos, banners, lifestyle images | JPEG | Balanced quality & compression |
| PNG | Logos, graphics with transparency | PNG | Higher file size, but crisp visuals |
| WebP | Universal use | WebP | Small size, good quality, supported by most browsers |
| SVG | Icons, vector graphics, logos | SVG | Scales without losing quality, lightweight |
| GIF | Animations | GIF | Use sparingly; large in size |
Recommended Images Sizes for SEO (Desktop & Mobile)
Image sizes play a direct role in speed and SEO performance. Below are the recommended sizes for different website elements:
| Website Element | Desktop Recommended Size | Mobile Recommended Size | Format |
| Hero Banner | 1920 x 1080 px | 1080 x 720 px | JPEG/WebP |
| Product Images | 800 x 800 px | 400 x 400 px | JPEG/WebP |
| Thumbnails | 150 x 150 px | 100 x 100 px | JPEG/WebP |
| Logos | 250 x 100 px | 150 x 75 px | PNG/SVG |
| Background Images | 1920 x 1200 px | 1080 x 720 px | JPEG/WebP |
| Blog Images | 1200 x 630 px (OG image size) | 1080 x 566 px | JPEG/WebP |
Always use responsive images (srcset) so browsers automatically serve the right version depending on the device.
Optimizing Images in WordPress – Best Plugins & Practices
WordPress has a wide variety of image optimization plugins that make SEO-friendly compression, resizing, and lazy loading much easier. Here’s a comparison of the top plugins:
| Plugin | Features | Pricing | Free Version Available |
| Smush | Lossless compression, lazy load, bulk optimization, directory smush | Free + Pro ($6/month) | Yes |
| Imagify | Smart compression, WebP conversion, auto-resizing | Free (20 MB/month) + Pro ($4.99/month) | Yes |
| ShortPixel | Lossy/lossless compression, WebP/AVIF support, cloud optimization | $9.99/month (10000 images) | No |
| EWWW Image Optimizer | Unlimited image optimization, WebP, lazy load | $7/month | Yes |
| Optimole | Cloud-based optimization, automatic scaling, CDN delivery | Free + Pro ($19/month) | Yes |
| reSmush.it | Bulk optimization, API-based compression | Free | Yes |
| Kraken.io | Lossless/lossy compression, API integration | $5/month (500 MB) | No |
| WP Compress | Real-time image optimization, CDN, lazy loading | $5/month | No |
| TinyPNG (Compress JPEG & PNG Images) | Smart lossy compression, WebP support | Free (500 images/month) + Pro ($25/year) | Yes |
| Sirv | Dynamic image resizing, lazy loading, WebP/AVIF conversion | $19/month | No |
Best Practices for WordPress Image Optimization:
- Always enable lazy loading to improve Core Web Vitals.
- Serve WebP or AVIF images where supported.
- Resize images before uploading — don’t rely on WordPress to scale them down.
- Use a CDN-based plugin (like Optimole or WP Compress) for faster delivery.
Different Ways to Optimize Images in Shopify
Shopify doesn’t have as many plugin options as WordPress, but there are still several effective ways to optimize images for SEO:
- Use Shopify Apps for Image Optimization
- Crush.pics → Compression + SEO alt tags.
- TinyIMG SEO Image Optimizer → Smart compression + automatic metadata.
- Image Optimizer by SpurIT → Lossless compression + lazy load.
- Manually Optimize Before Uploading
- Resize to recommended sizes (e.g., 800 x 800 px for products).
- Save images in WebP or optimized JPEG.
- Leverage Shopify’s Built-in CDN
- Shopify automatically serves images through a CDN for speed.
- Use Descriptive Filenames & Alt Text
- Example: red-running-shoes-men.jpg instead of IMG_001.jpg.
Optimizing Images in Custom CMS Platforms
For businesses running on custom CMS systems (PHP, Laravel, React, etc.), image optimization often requires a mix of server-level tweaks and third-party integrations.
- Server-Side Optimization Tools:
- Use ImageMagick or GD Library for automatic resizing & compression.
- Enable mod_pagespeed (Apache) or ngx_pagespeed (Nginx).
- Third-Party APIs & Services:
- Cloudinary → Dynamic resizing, WebP conversion, image CDN.
- Imgix → Real-time resizing, cropping, CDN delivery.
- Custom Lazy Loading Implementation
- Add loading=”lazy” in <img> tags for faster rendering.
Recommended Image Sizes for SEO (Desktop & Mobile)
Choosing the right image size is crucial for both user experience and search engine optimization. Images that are too large slow down your site, while images that are too small look pixelated and unprofessional. Below is a table with the recommended image sizes for desktop and mobile, along with ideal file sizes:
| Image Type | Recommended Size for Desktop | Recommended Size for Mobile | Ideal File Size |
| Hero Images / Banners | 1920 × 1080 px | 1200 × 628 px | 150 KB – 500 KB |
| Blog Post Images | 1200 × 675 px | 1080 × 566 px | 100 KB – 250 KB |
| Thumbnails | 150 × 150 px | 120 × 120 px | 20 KB – 50 KB |
| Product Images | 800 × 800 px | 600 × 600 px | 70 KB – 200 KB |
| Infographics | Max 1000 px wide | Max 600 px wide | 300 KB – 1 MB |
| Background Images | 2560 × 1440 px | 1920 × 1080 px | 500 KB – 1 MB |
| Logos | 250 × 100 px | 150 × 75 px | < 100 KB |
| Icons / Vectors | SVG (scalable) or 64 × 64 px PNG | SVG (scalable) or 48 × 48 px PNG | < 20 KB |
Pro Tip:
- For icons and logos, always prefer SVG format since it’s lightweight, scalable, and loads instantly.
- Use WebP or AVIF for all other images to balance quality + speed.
Conclusion
Image optimization is one of the easiest yet most impactful SEO strategies. From choosing the right formats (JPEG, PNG, WebP, SVG) to using plugins like Smush or Imagify in WordPress, or Shopify apps like Crush.pics, every small step compounds into faster websites, better rankings, and more conversions.
Whether you run your site on WordPress, Shopify, or a custom CMS, always think quality + performance. A perfectly optimized image loads fast, looks great, and boosts your SEO efforts.
Connect today with Mohit’s SEO Training to learn Adavnced SEO to skyrocket your SEO career.
FAQs
What is the best image size for SEO?
Ideally, images should be under 100 KB, with dimensions suited for their placement (e.g., 800 x 800 px for products, 1200 x 630 px for blogs).
Which image format is best for websites?
Use WebP whenever possible (small size + high quality). For logos or transparent graphics, PNG is best.
How do I optimize images without losing quality?
Use tools like Imagify, TinyPNG, or Cloudinary to compress images smartly while retaining sharpness.
Does image size affect SEO rankings?
Yes — larger images slow down page load, hurting Core Web Vitals and rankings. Optimized images improve both speed and SEO.
Should I use different image sizes for desktop and mobile?
Yes. Always use responsive images (srcset) so browsers can load the right size depending on device.
Mohit Verma
Contributor at Mohit's SEO Training.