As designers, we spend hours perfecting every pixel. Then we upload our masterpiece to the web and watch the page take 8 seconds to load. Frustrating, right? The good news is that you don’t have to choose between visual fidelity and performance. This guide walks you through exactly how to optimize images for website speed while keeping them sharp, crisp, and beautiful.
Why Image Optimization Matters More Than Ever in 2026
Images typically account for 50 to 70 percent of a webpage’s total weight. With Google’s Core Web Vitals directly influencing rankings and user experience, a slow-loading hero image can tank both your SEO and your conversion rate. The goal is simple: send fewer bytes to the browser without the human eye noticing any drop in quality. There is a detailed walkthrough elsewhere.
Step 1: Choose the Right Image Format
Picking the correct format is the single biggest decision you’ll make. Each format has a purpose, and using the wrong one is like showing up to a photo shoot with the wrong lens.
| Format | Best For | File Size | Browser Support |
|---|---|---|---|
| AVIF | Photos, hero images, complex visuals | Smallest (up to 50% less than JPEG) | Excellent (all modern browsers) |
| WebP | General purpose, transparency | Small (25-35% less than JPEG) | Universal |
| JPEG | Fallback for photos | Medium | Universal |
| PNG | Logos, icons, sharp edges, transparency | Large | Universal |
| SVG | Icons, logos, illustrations | Tiny (vector) | Universal |
Our recommendation for designers
Serve AVIF as primary, with WebP as fallback, and JPEG as final fallback. Use the <picture> element to let the browser pick the best supported format automatically.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Descriptive alt text" width="1200" height="800">
</picture>Step 2: Compress Without Losing Visual Quality
Compression is where designers usually panic. The truth: most images can lose 60-80% of their file weight before your eye notices anything. Here are the tools we actually use at DRIC. Originally covered on https://adobe.com.
Free tools worth using
- Squoosh (squoosh.app): Google’s browser-based compressor. Live side-by-side preview, perfect for spot-checking quality.
- ImageOptim (Mac): Drag-and-drop batch processing. Strips metadata and applies smart compression.
- TinyPNG: Excellent for PNGs and JPEGs, with a simple web interface.
- Sharp (Node.js): For developers automating image pipelines.
Recommended quality settings
- Photos in AVIF: quality 50-60 (yes, really)
- Photos in WebP: quality 75-80
- Photos in JPEG: quality 80-85
- PNGs: use lossless optimization plus color palette reduction when possible
Step 3: Serve Responsive Images
There’s no reason to send a 2400px-wide image to a phone. Responsive images serve the right size for the right device, saving bandwidth and speeding up rendering.
The srcset and sizes attributes
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Descriptive alt text"
width="1600" height="1067">Always include width and height attributes. This prevents layout shift (CLS), one of Google’s Core Web Vitals metrics.
Step 4: Lazy Load Below-the-Fold Images
Lazy loading defers offscreen images until the user scrolls near them. This dramatically improves initial page load and Largest Contentful Paint (LCP).
The native HTML attribute is now supported everywhere:
<img src="below-fold.jpg" loading="lazy" alt="..." width="800" height="600">Important rule
Never lazy-load your hero image or LCP element. For those, use fetchpriority="high" instead so the browser fetches them immediately.
<img src="hero.jpg" fetchpriority="high" alt="..." width="1600" height="900">Step 5: Use a CDN and Modern Delivery Techniques
A Content Delivery Network caches your images geographically close to your visitors. Combined with automatic format conversion, it can reduce image load time by 40-60%. brilliantdirectories.com makes the same point with more data.
- Cloudflare Images or Cloudflare Polish: automatic AVIF/WebP conversion
- Cloudinary or imgix: on-the-fly transformations via URL parameters
- Bunny CDN Optimizer: affordable and effective
Quick Checklist Before Publishing
- Is the format optimal (AVIF/WebP with fallback)?
- Is the file under 200 KB for photos, under 50 KB for UI images?
- Are width and height attributes set?
- Is srcset defined for responsive delivery?
- Is lazy loading applied to below-fold images only?
- Does the hero image have fetchpriority=”high”?
- Is alt text descriptive (good for SEO and accessibility)?
Common Mistakes Designers Should Avoid
- Uploading images straight from Figma or Photoshop without compression
- Using PNG for photographs (it can be 5x larger than JPEG)
- Serving the same image size to mobile and desktop
- Lazy-loading the hero image and killing LCP
- Forgetting width/height and causing layout shift
FAQ
What’s the ideal image size for a website in 2026?
Aim for under 200 KB per photograph and under 100 KB for UI elements. Hero images can go up to 300 KB if they’re full-width and served in AVIF.
Should I still use JPEG in 2026?
Only as a fallback. AVIF and WebP now have universal browser support, so JPEG should be the last option in a <picture> element, not your primary format.
Does image optimization really affect SEO?
Yes. Page speed and Core Web Vitals (LCP in particular) are ranking factors. Faster images mean better rankings, lower bounce rates, and higher conversions.
Can I optimize images automatically in WordPress?
Absolutely. Plugins like ShortPixel, Imagify, or EWWW Image Optimizer handle format conversion, compression, and lazy loading automatically. If you’re on managed hosting, ask if they include Cloudflare Polish or similar.
What resolution should web images be?
The classic 72 PPI advice is outdated. What matters is the pixel dimensions relative to display size. Serve images at 1x for standard displays and up to 2x for Retina/HiDPI screens using srcset.
Final Thoughts
Optimizing images for website speed isn’t about compromising your design. It’s about respecting your users’ time and devices. Follow this workflow: pick the right format, compress smartly, serve responsive sizes, lazy load appropriately, and let a CDN do the heavy lifting. Your Core Web Vitals score will thank you, and your visitors will actually stay long enough to appreciate your work.
Need help auditing your website’s image performance? The DRIC team can review your setup and implement a complete optimization pipeline tailored to your stack.
