Image and Asset Optimization: The Highest-ROI Performance Fix Most Sites Skip

# Image and Asset Optimization: The Highest-ROI Performance Fix Most Sites Skip If you can only fix one thing about a slow website, make it this. In real audits, unoptimized images are more often the single largest cause of slow load times than any other factor — and they're also the cheapest to fix. ## Why images are usually the biggest offender A photo taken on a modern phone or downloaded from a stock photo site is often several megabytes at full resolution — vastly larger than it needs to be for how it's actually displayed on a web page, which might show it at a few hundred pixels wide. That mismatch between the file size and the actual display size is pure waste, downloaded by every single visitor, on every single visit, for no benefit. ## Formats that actually matter **WebP and AVIF** are modern image formats that achieve the same visual quality as JPEG or PNG at a meaningfully smaller file size — often 25–50% smaller for the same image. Serving these formats to browsers that support them (with a JPEG/PNG fallback for older browsers) is one of the simplest wins available, and tools like Next.js's built-in `` component, or a CDN with automatic format conversion, handle this without manual work per image. **When to still use PNG:** images requiring transparency or crisp, flat graphics (logos, icons) are often still best served as PNG or, better, SVG when the content is genuinely vector-based (logos, icons, simple illustrations) rather than a photograph. ## Lazy loading Lazy loading means images below the visible screen (below the "fold") don't load until the user scrolls near them, rather than all loading immediately regardless of whether the visitor ever scrolls that far. This directly reduces the amount of data downloaded for the initial page load, which speeds up the metrics that matter most for first impressions and Core Web Vitals. **The one thing to get right:** the image visible immediately when the page loads (often a hero image) should generally NOT be lazy-loaded — lazy-loading it can actually delay its appearance and hurt your Largest Contentful Paint score. Lazy loading belongs on everything below the fold, not on the first thing a visitor sees. ## CDN basics A Content Delivery Network (CDN) stores copies of your site's images and assets on servers distributed geographically, so a visitor's browser downloads them from a server physically close to them rather than from your site's single origin server, wherever that happens to be located. For visitors in Morocco accessing a site hosted on a server in a different region, this can meaningfully reduce load time, since the physical distance data has to travel directly affects how quickly it arrives. Most modern hosting platforms (Vercel, Netlify, and similar) include CDN distribution automatically, and most CDNs also handle automatic image format conversion and resizing, meaning much of this optimization can be handled by infrastructure choices rather than manual per-image work. ## A quick before/after example A real case: a services page with six photos, each uploaded directly from a phone camera at roughly 4MB each — 24MB of images on one page. After resizing each image to its actual maximum display size, converting to WebP, and enabling lazy loading for everything below the first screen, the same six images totaled under 1.5MB, and the page's Largest Contentful Paint improved from roughly 5.8 seconds to under 2 seconds — without changing a single line of design or layout. ## The practical checklist - Resize images to their actual maximum display size before uploading — not the original camera or stock photo resolution - Convert photographic images to WebP (or let your framework/CDN do it automatically) - Use SVG for logos, icons, and simple flat graphics instead of PNG or JPEG - Lazy-load everything below the fold; never lazy-load the visible hero image - Confirm your hosting includes CDN distribution, or add one if it doesn't This is genuinely one of the highest-return fixes available for site speed — most of it is a one-time setup rather than ongoing work, and the impact shows up immediately in both load time and Core Web Vitals scores. For the full picture of what a performance audit checks beyond images, see [Why Is My Next.js Site Slow? 7 Common Causes and Fixes](/blog/why-is-my-nextjs-site-slow), or the [performance optimization services page](/services/performance-optimization).