Skip to main content
Performance

Image Optimization

Image Compression

Portrait of Lukas Horvath, co-founder of Roelu Studio
Lukas HorvathCo-founder

What is Image Optimization?

Image optimization is the practice of reducing image file sizes — through compression, resizing, and modern format conversion — while preserving visual quality. It includes serving images in next-gen formats like WebP and AVIF, sizing them appropriately for each device, and lazy-loading off-screen images. Image compression typically delivers the largest performance gain on content-heavy sites, often cutting page weight by 60 to 80 percent.

Why it matters

Images are the largest assets on most pages, and most teams ship them wrong. A designer exports a 4000-pixel hero image at full quality, the developer drops it on the page, and the homepage now weighs 8MB. On a mobile connection, that's a four-second load before anything else happens. The fix is not optional. It is foundational. Yet we still audit Series B websites — built on premium platforms — serving uncompressed PNGs and JPEGs straight from the design file. Image optimization is the cheapest, highest-impact performance win available. If your team is not doing it automatically at upload, your stack is broken.

How it works

On a modern setup, image optimization happens automatically. A CMS like Sanity stores the original. A service like Next.js Image, Cloudflare Images, or Vercel's image optimizer resizes and reformats the image on demand — serving a 400-pixel WebP to a phone and a 1600-pixel AVIF to a laptop, both compressed to the smallest viable file. The visitor's browser picks the best format it supports. Done right, a 2MB original becomes a 60KB delivery. The marketer uploads once, every visitor gets the right version. Done wrong — the way template builders often do it — the original ships everywhere and every device pays the full cost.

Related terms

  • Page Speed

    Performance

    How quickly a web page loads and becomes usable for a visitor — measured in seconds and milliseconds, and treated by Google as a confirmed ranking signal…

  • Largest Contentful Paint

    Performance

    The Core Web Vital that measures how long it takes for the biggest visible element on a page — usually the hero image or main headline — to finish loading in…

  • Lazy Loading

    Performance

    A technique that delays loading images and other heavy assets until the visitor scrolls near them, making the rest of the page load faster and feel snappier.

  • Core Web Vitals

    Performance

    Google's three benchmark metrics that measure how fast a page loads, how quickly it responds to clicks, and how stable the layout feels as it renders — used in…

  • Content Delivery Network

    Performance

    A global network of servers that stores copies of your site close to visitors, so pages load fast in São Paulo, Sydney, and Stockholm without every request…

  • Caching

    Performance

    Storing a copy of a page, image, or piece of data so it can be served instantly the next time it's requested — instead of regenerating it from scratch on every…

  • Digital Asset Management

    CMS & Content

    A central library for images, video, and other files where teams store, tag, and reuse media — so nobody is digging through old folders or re-uploading the…