September 2026

If your website takes more than three seconds to load, you are already losing visitors. And nine times out of ten, the culprit is the same: heavy, unoptimized images. As web designers, we spend hours crafting beautiful visuals, only to watch them drag down our Core Web Vitals scores. This practical guide will show you exactly how to optimize images for web use, with real before and after file size examples, format recommendations for 2026, and lazy loading strategies you can implement today. Why Image Optimization Matters More Than Ever in 2026 Images account for roughly 50% of the average webpage weight. Google’s Core Web Vitals, particularly Largest Contentful Paint (LCP), are heavily influenced by how quickly your hero images render. Poorly optimized visuals can: Slow down page load speed and increase bounce rates Damage your SEO rankings Consume mobile users’ data plans Reduce conversion rates on e-commerce sites The good news: with the right workflow, you can shrink image weight by 60% to 90% without visible quality loss. Step 1: Choose the Right Image Format Format selection is the single most impactful decision you can make. Here is a quick comparison of the formats web designers should be using in 2026: Format Best For Browser Support Avg. Size Reduction vs JPEG AVIF Photos, complex visuals 95%+ (2026) 50% smaller WebP All-purpose fallback 99% 25 to 35% smaller JPEG Legacy fallback 100% Baseline PNG Transparency, logos 100% Often larger SVG Icons, illustrations 100% Vector, tiny Our Recommendation Serve AVIF as primary, WebP as fallback, and JPEG as a last resort using the <picture> element: <picture> <source srcset=”hero.avif” type=”image/avif”> <source srcset=”hero.webp” type=”image/webp”> <img src=”hero.jpg” alt=”Descriptive alt text” width=”1200″ height=”600″> </picture> Step 2: Resize Before You Compress One of the most common mistakes: uploading a 4000px wide image that displays at 800px. The browser still downloads the full file. Rule of thumb: Never serve an image wider than 2x its maximum display size (for retina displays). Identify the maximum display width in your design Resize the source image to double that width for retina support Generate multiple sizes using the srcset attribute for responsive delivery Real Before / After Example Original: Camera JPEG, 4000x2667px, 4.8 MB Resized to 1600px: 1.2 MB (75% reduction) Compressed at 82% quality: 340 KB (93% reduction) Converted to WebP: 210 KB (95.6% reduction) Converted to AVIF: 145 KB (97% reduction) Same visual result. The image went from 4.8 MB to 145 KB. Step 3: Compress Smartly (Quality Setting Sweet Spot) Google’s own PageSpeed team recommends a quality setting of 80 to 85. Beyond 85, file size grows quickly with almost no visible improvement. Top Tools for 2026 Squoosh.app (Google) — Free, browser-based, supports AVIF and WebP ImageOptim — Mac desktop app for batch processing ShortPixel — Great WordPress plugin with automatic AVIF conversion TinyPNG — Simple drag and drop for PNG and JPEG Sharp (Node.js) — For automated build pipelines Lossy vs Lossless: When to Use Each Type Use Case Typical Savings Lossy Photos, hero images, blog thumbnails 60 to 80% Lossless Logos, screenshots with text, icons 10 to 30% Step 4: Implement Lazy Loading Lazy loading defers offscreen images until they are about to enter the viewport. It is now natively supported in every modern browser. See web.dev for their take. Native Lazy Loading (Recommended) <img src=”photo.webp” alt=”Product photo” loading=”lazy” width=”800″ height=”600″> Just add loading=”lazy”. No JavaScript needed. Important: Do Not Lazy Load Your LCP Image Your hero image (the largest visible element on load) should use loading=”eager” and even fetchpriority=”high” to boost LCP scores: <img src=”hero.avif” alt=”Hero banner” loading=”eager” fetchpriority=”high” width=”1200″ height=”600″> Step 5: Always Set Width and Height Attributes Missing dimensions cause layout shifts (CLS), another Core Web Vital. Always declare them explicitly, even when using CSS to make images responsive. This reserves space during load and prevents jumping content. The topic gets a thorough treatment elsewhere. Step 6: Use a CDN with Automatic Optimization Modern image CDNs handle format conversion, resizing, and compression on the fly based on the visitor’s browser and device: Cloudflare Images Cloudinary Imgix Bunny Optimizer If you cannot use a CDN, at minimum enable image optimization in your CMS. Complete Optimization Checklist Choose AVIF or WebP as primary format Resize to actual display dimensions (max 2x for retina) Compress at 80 to 85% quality Use the <picture> element with format fallbacks Add srcset for responsive delivery Enable loading=”lazy” on below-fold images Set fetchpriority=”high” on your LCP image Always declare width and height Write descriptive alt text (SEO and accessibility) Test with PageSpeed Insights and Lighthouse Frequently Asked Questions Is PNG or JPEG better for the web? JPEG is better for photographs and complex images because of smaller file sizes. PNG is only preferable when you need transparency or crisp text and edges. For most modern projects, WebP or AVIF outperforms both. What is the best image size for a website? Keep individual images under 200 KB when possible. Hero images can go up to 300 KB if needed. The total page weight should ideally stay below 1.5 MB. Does image optimization affect SEO? Yes, significantly. Fast-loading pages rank better, and Core Web Vitals (LCP, CLS) are direct ranking factors. Descriptive filenames and alt text also help with image search visibility. Should I still use JPEG in 2026? Only as a fallback for very old browsers. Modern workflows should serve AVIF first, then WebP, with JPEG as a safety net inside a <picture> element. What quality level should I use for JPEG or WebP? Between 80 and 85. Above 85, file size increases rapidly with no visible benefit. Below 75, compression artifacts start becoming noticeable. Can lazy loading hurt SEO? No, as long as you use native loading=”lazy”. Googlebot fully supports it. Just make sure your LCP image is not lazy loaded. Final Thoughts Optimizing images for the web is not about picking one magic tool. It is about combining the right format, correct dimensions, smart compression, and modern loading strategies. Start with your heaviest pages, apply this checklist,