Optimizing Images for Web: The Complete Practical Guide 2025
Images make up an average of 50% of a website's total weight. According to HTTP Archive, the average image size per page is 900 KB. Unoptimized images are the most common reason for slow websites – and slow websites lose customers.
In this guide, we show you step by step how to optimally prepare images for the web – for better performance, better Core Web Vitals and better Google rankings.
Why Image Optimization is So Important
- Loading time: Google confirms: 53% of mobile users leave pages that take longer than 3 seconds to load
- SEO: Core Web Vitals are a ranking factor, and LCP is often influenced by images
- Conversion: Every additional second of loading time reduces conversions by about 7%
- Mobile data: Not everyone has unlimited data – spare your users
- Hosting costs: Less data volume = lower costs
"The fastest HTTP request is the one not made." — Steve Souders, Performance Expert
Understanding the Right Image Formats
JPEG (.jpg, .jpeg)
Best format for: Photographs, complex images with many colors and gradients.
Characteristics:
- Lossy compression (quality vs. file size)
- No transparency possible
- Good for background images, product photos, team photos
Quality recommendation: 70-85% quality is usually the sweet spot – barely visible difference, significantly smaller files.
PNG (.png)
Best format for: Graphics with transparency, screenshots, logos, images with text.
Characteristics:
- Lossless compression
- Supports transparency (alpha channel)
- Larger files than JPEG for photos
- Ideal for: Logos, icons, screenshots
Tip: Use PNG-8 instead of PNG-24 when possible (8-bit = 256 colors often sufficient).
WebP
The modern format: Developed by Google, combines the best of JPEG and PNG.
Characteristics:
- 25-35% smaller than JPEG at same quality
- Supports transparency (like PNG)
- Supports animation (like GIF)
- Supported by all modern browsers
Recommendation: WebP should be your standard format for web. Fallback to JPEG/PNG for older browsers.
AVIF
The format of the future: Even more efficient than WebP, but less browser support.
Characteristics:
- 50% smaller than JPEG
- Better quality at extreme compression
- Slower encoding
- Support: Chrome, Firefox, Safari 16+
Usage: As primary format with WebP and JPEG as fallback. Ideal for performance-critical pages.
SVG
For vector graphics: Logos, icons, illustrations that need to be scalable.
Characteristics:
- Vector graphic (scales without quality loss)
- Often very small file size
- Can be styled with CSS
- Not suitable for photos
Step by Step: Properly Optimizing Images
Step 1: Choose the Right Size
Rule #1: Never load a larger image than needed. A 5000x3000px image for an 800px container is waste.
Guidelines for typical use cases:
- Hero image (full-width): max. 2000px wide
- Blog article image: max. 1200px wide
- Product image: max. 800px wide
- Thumbnail: max. 400px wide
Pro tip: Use responsive images. Deliver different sizes depending on screen (srcset attribute).
Step 2: Choose Format
Decision tree:
- Photo/complex image → WebP (fallback: JPEG)
- Graphic with transparency → WebP (fallback: PNG)
- Simple logo/icon → SVG
- Animation → WebP or optimized GIF
Step 3: Compress
Tools for image compression:
Online tools (free):
- Squoosh.app – Google's tool, very flexible
- TinyPNG – Simple, good for batch processing
- ImageOptim – Mac desktop app
Automated solutions:
- Cloudinary – CDN with automatic optimization
- Imgix – Image CDN with transformations
- Next.js Image Component – Automatic optimization
Compression settings:
- JPEG: 70-85% quality
- WebP: 75-85% quality
- PNG: Maximum compression (lossless)
Step 4: Implement Responsive Images
Use the srcset attribute for responsive images:
<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px">
The browser automatically chooses the appropriate size based on screen size and pixel density.
Step 5: Enable Lazy Loading
Images not immediately visible should load delayed:
<img src="image.jpg" loading="lazy">
Important: The hero image (above the fold) should NOT be lazy loaded – it affects LCP.
Step 6: Specify Image Dimensions
Always specify width and height to avoid CLS (Layout Shifts):
<img src="image.jpg" width="800" height="600">
Alternatively: Use CSS aspect-ratio property.
Special Cases and Best Practices
Optimizing Hero Images
The hero image is often the LCP candidate. Here's how to optimize it:
- Preload: <link rel="preload" as="image" href="hero.webp">
- Priority: Set fetchpriority="high"
- No lazy loading: Hero must load immediately
- Right size: No wider than 2000px
- WebP with JPEG fallback: Use <picture> element
Optimizing Background Images
CSS background images are harder to optimize:
- Use image-set() for responsive backgrounds
- Prefer compressed WebP
- For large backgrounds: CSS gradient as fallback while loading
Icons and Logos
For icons and logos, SVG is almost always the best choice:
- SVG sprites for many icons
- Inline SVG for important icons (saves HTTP request)
- Icon fonts as alternative (but larger file size)
E-Commerce: Product Images
Product images are conversion-critical:
- Maintain high quality (80-90%)
- Zoom function: Load larger version on demand
- Multiple views: Lazy loading for non-primary images
- Don't forget schema markup for product images
Tools and Workflow for Efficient Image Optimization
Workflow for Design Teams
- Export from Figma/Photoshop at 2x size
- Run through Squoosh or similar
- Export in WebP and JPEG
- In CMS: Automatic size generation
Automation with Build Tools
For developers: Integrate image optimization into your build process:
- sharp (Node.js) – Fast image processing
- imagemin (webpack) – Plugin for build process
- Next.js Image – Automatic optimization
CMS Integration
Modern CMS optimize images automatically. In our website projects we use:
- Next.js Image Component with automatic WebP conversion
- Payload CMS with built-in image processing
- Cloudinary for larger projects
Checklist: Image Optimization
- [ ] Right size (not larger than necessary)
- [ ] Modern format (WebP with fallback)
- [ ] Compressed (70-85% quality)
- [ ] Responsive images (srcset)
- [ ] Lazy loading for below-the-fold
- [ ] width/height attributes set
- [ ] Hero image preloaded
- [ ] Alt texts for SEO and accessibility
- [ ] Descriptive file names (SEO)
Frequently Asked Questions
How much can I compress images without visible quality loss?
For JPEG and WebP, 70-85% quality is usually the sweet spot. Test visually – some images tolerate more compression than others. Photos with many details need higher quality than simple graphics.
Should I convert all images to WebP?
Yes, WebP should be your standard. But always provide a JPEG/PNG fallback for older browsers (under 1% market share, but better than broken images).
How do I test if my images are well optimized?
Use PageSpeed Insights. It specifically shows which images are too large and how much you can save.
What about Retina/HiDPI displays?
Deliver 2x images for Retina, but at compressed quality (60-70%). A 2x image at low quality often looks better than a 1x image at high quality.
Does image optimization affect SEO?
Absolutely. Core Web Vitals are a ranking factor, and LCP is often determined by images. Plus: Optimized images improve user experience, which indirectly affects SEO. Don't forget alt texts for image SEO either.
How do I optimize images for social media sharing?
Open Graph images should be 1200x630px (Facebook/LinkedIn) or 1200x600px (Twitter). These can be larger than regular website images since they get cached.
What is the <picture> element and when do I use it?
The <picture> element enables art direction (different images for different screen sizes) and format fallbacks. Use it when you need AVIF > WebP > JPEG fallbacks or different image crops for mobile/desktop.
Need help with your website's performance optimization? Contact us for a free analysis.
