GoldenWing Assistant
Always here for you
Hello! I'm the GoldenWing Assistant. How can I help you today?
Always here for you
Hello! I'm the GoldenWing Assistant. How can I help you today?
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.
"The fastest HTTP request is the one not made." — Steve Souders, Performance Expert
Best format for: Photographs, complex images with many colors and gradients.
Characteristics:
Quality recommendation: 70-85% quality is usually the sweet spot – barely visible difference, significantly smaller files.
Best format for: Graphics with transparency, screenshots, logos, images with text.
Characteristics:
Tip: Use PNG-8 instead of PNG-24 when possible (8-bit = 256 colors often sufficient).
The modern format: Developed by Google, combines the best of JPEG and PNG.
Characteristics:
Recommendation: WebP should be your standard format for web. Fallback to JPEG/PNG for older browsers.
The format of the future: Even more efficient than WebP, but less browser support.
Characteristics:
Usage: As primary format with WebP and JPEG as fallback. Ideal for performance-critical pages.
For vector graphics: Logos, icons, illustrations that need to be scalable.
Characteristics:
Rule #1: Never load a larger image than needed. A 5000x3000px image for an 800px container is waste.
Guidelines for typical use cases:
Pro tip: Use responsive images. Deliver different sizes depending on screen (srcset attribute).
Decision tree:
Tools for image compression:
Online tools (free):
Automated solutions:
Compression settings:
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.
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.
Always specify width and height to avoid CLS (Layout Shifts):
<img src="image.jpg" width="800" height="600">
Alternatively: Use CSS aspect-ratio property.
The hero image is often the LCP candidate. Here's how to optimize it:
CSS background images are harder to optimize:
For icons and logos, SVG is almost always the best choice:
Product images are conversion-critical:
For developers: Integrate image optimization into your build process:
Modern CMS optimize images automatically. In our website projects we use:
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.
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).
Use PageSpeed Insights. It specifically shows which images are too large and how much you can save.
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.
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.
Open Graph images should be 1200x630px (Facebook/LinkedIn) or 1200x600px (Twitter). These can be larger than regular website images since they get cached.
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.
We bring the same dedication and expertise you see in our articles to every client project.
“Images are often the biggest contributor to page weight. Optimize here first.”
“WebP provides 25-34% better compression than JPEG at equivalent quality.”
Did you find this article helpful?
Share it with others.