Optimising Website Images and Delivery Costs

The Weight of the Modern Web

Good photography is the difference between a website that looks established and a website that looks like a template. It is also the single heaviest thing you put on the page.

But visual ambition creates a performance problem you pay for twice: once in the visitor’s waiting time, and again in whatever your image host charges you each month.

According to the HTTP Archive’s Web Almanac for 2025:

• The median desktop page used 1,059 KB of images, and the median mobile page 911 KB.
• At the 90th percentile, a desktop page carried 6,856 KB of images and a mobile page 6,288 KB.
• Images are also the most common Largest Contentful Paint element: an image is the LCP element on 85.3% of desktop pages and 76% of mobile pages, and on mobile 13% of websites have a poor LCP of over four seconds.

┌─────────────────────────────────────────────────────────────────────────────┐
│                 THE RUNTIME IMAGE TRANSFORMATION BOTTLENECK                 │
├─────────────────────────────────────────────────────────────────────────────┤
│  VISITOR OPENS PAGE (Mobile 4G Radio)                                       │
│  ├─ Browser requests: /cdn-cgi/image/w=1200,f=auto/hero.jpg                 │
│  ├─ CACHE MISS: Edge node forwards to Dynamic Transform Server              │
│  ├─ Cloud Server decodes 8MB source JPEG -> Resizes -> Encodes to WebP      │
│  ├─ Processing Latency: 640 ms CPU Time                                     │
│  └─ Image finally streams to client -> LCP: 3.4 seconds (FAILING)           │
├─────────────────────────────────────────────────────────────────────────────┤
│  AURA COMPILE-TIME EDGE PIPELINE (STATIC AVIF MATRICES)                     │
│  ├─ Browser requests: /images/hero-1200w.avif (Immutable Static Asset)      │
│  ├─ 100% CACHE HIT: Served from nearest Cloudflare Point of Presence        │
│  └─ Transfer Size: 68 KB | Latency: 32 ms | Mobile LCP: 0.48 seconds        │
└─────────────────────────────────────────────────────────────────────────────┘

The two pipelines above are an illustrative model of the same asset served two ways, not a measurement of any particular site.

Many studios solve this by adding a hosted image service (Cloudinary, Imgix, Cloudflare Images). It works, but it introduces cold-cache delays and a recurring bill that grows with traffic.

At Aura Logic, we handle image performance at build time, before the site goes live.

1. The Image Codec Evolution: JPEG vs. WebP vs. AVIF

Legacy JPEG (1992)

JPEG compresses the image in fixed-size blocks that are compressed independently of one another. Push the compression hard and you get blocky edges and coloured ringing around sharp lines and small text.

WebP (2010)

Built on Google’s VP8 video codec, WebP cuts file sizes by roughly 30% compared to JPEG — MDN’s image format guide puts lossy WebP at 25% to 35% smaller than JPEG at visually similar compression levels, and gives a 30% median for WebP against the same set of JPEG files.

AVIF: The Current Standard (2019+)

AVIF is built on the AV1 video codec developed by the Alliance for Open Media (Google, Apple, Microsoft, Amazon, Netflix and others), and packaged in the High Efficiency Image File Format container. It gives you:

1. AV1 Coding in a HEIF Container: One file, one request, and the codec’s efficiency without video’s progressive-rendering gap.
2. Alpha Channel Support: Transparency lives inside the same file, so a cut-out image does not need a second format alongside it.
3. 10-Bit and 12-Bit Wide Colour Gamut (HDR): Display P3 colour spaces without banding, and 8, 10 or 12 bits per channel.
4. Chroma Subsampling (4:4:4, 4:2:2 and 4:2:0): Keeps contrast crisp along high-frequency edges.

The table below is our own encode of a single 1920×1080 image at our build settings, not a published benchmark:

┌───────────────────────┬───────────────────────┬───────────────────────────────┐
│ FORMAT / ENCODING     │ PAYLOAD (1920x1080)   │ RELATIVE BANDWIDTH SAVINGS    │
├───────────────────────┼───────────────────────┼───────────────────────────────┤
│ High-Quality JPEG     │ 840 KB                │ Baseline (0%)                 │
│ Progressive JPEG      │ 620 KB                │ 26% Reduction                 │
│ Standard WebP (q=80)  │ 280 KB                │ 66% Reduction                 │
│ Aura AVIF (q=75)      │ 112 KB                │ 86.6% REDUCTION               │
└───────────────────────┴───────────────────────┴───────────────────────────────┘

In that comparison — our own encode of one 1920×1080 image, not a published benchmark — AVIF achieved an 86.6% bandwidth reduction compared to legacy JPEG at the same perceived quality. The direction of travel is confirmed elsewhere: MDN’s image format guide reports that lossy AVIF images are around 50% smaller than JPEG, and Google’s Chrome 85 release notes cite a Netflix study finding 50% savings against standard JPEG and more than 60% on 4:4:4 content.

2. Compile-Time Generation via Astro and Sharp (libvips)

Instead of handing transformation to a runtime server, Aura Logic does all image processing during the static build using native C-based libvips bindings through Sharp:

---
// Component: src/components/ResponsiveHeroImage.astro
import { Image } from 'astro:assets';
import heroMaster from '../assets/images/flagship_architecture_master.png';
---

<div class="hero-media-wrapper">
  <!-- Native Astro Image Pipeline with AVIF and WebP Fallbacks -->
  <Image 
    src={heroMaster}
    widths={[480, 800, 1200, 1920]}
    sizes="(max-width: 768px) 100vw, (max-width: 1400px) 90vw, 1920px"
    formats={['avif', 'webp']}
    alt="Aura Logic Bespoke Digital Infrastructure Architecture"
    loading="eager"
    fetchpriority="high"
    decoding="async"
    class="hero-media-element"
  />
</div>

<style>
  .hero-media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Prevents CLS layout shift prior to image load */
    background: #111111;   /* Elegant obsidian placeholder */
    overflow: hidden;
  }
  .hero-media-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

What Astro Emits to Production HTML:

<picture>
  <!-- Modern browsers download ultra-lightweight AVIF -->
  <source 
    type="image/avif" 
    srcset="/assets/hero-480w.avif 480w, /assets/hero-800w.avif 800w, /assets/hero-1200w.avif 1200w, /assets/hero-1920w.avif 1920w"
    sizes="(max-width: 768px) 100vw, 1920px"
  />
  <!-- Legacy fallback for older browsers -->
  <source 
    type="image/webp" 
    srcset="/assets/hero-480w.webp 480w, /assets/hero-800w.webp 800w, /assets/hero-1200w.webp 1200w, /assets/hero-1920w.webp 1920w"
    sizes="(max-width: 768px) 100vw, 1920px"
  />
  <!-- Base element with intrinsic dimensions to guarantee CLS = 0.000 -->
  <img 
    src="/assets/hero-1200w.webp" 
    width="1920" 
    height="1080" 
    alt="Aura Logic Bespoke Digital Infrastructure Architecture"
    fetchpriority="high"
    decoding="async"
  />
</picture>

The Critical Attributes:

• fetchpriority="high": Tells the browser’s preload scanner to schedule the hero image at the highest network priority, ahead of non-critical CSS and deferred scripts.
• decoding="async": Stops the browser from blocking main-thread layout reflows while it rasterises the image.
• width and height: Give the layout engine the exact aspect ratio, eliminating Cumulative Layout Shift (CLS).

3. Financial Analysis: Eliminating the Image SaaS Tax

Any website with real photography ends up paying for image hosting, and the bill scales with traffic. Optimising the images once, at build time, is what takes that line off the bill.

The figures below use a hypothetical vendor invoice to show the shape of the saving. They are an illustrative example, not a quote from any named provider’s price list:

┌──────────────────────────┬──────────────────────┬─────────────────────────────┐
│ EXPENSE LINE ITEM        │ HOSTED IMAGE SERVICE │   AURA COMPILE-TIME PIPELINE│
├──────────────────────────┼──────────────────────┼─────────────────────────────┤
│ Monthly Base Tier        │ $499 / mo (example)  │ $0 / mo                     │
│ Transformation Credits   │ $280 / mo (example)  │ $0 (Pre-computed on CI)     │
│ Bandwidth Egress Surchg. │ $180 / mo (example)  │ Included in Edge Storage    │
│ Cold-Cache Latency Tax   │ High (LCP Penalties) | Zero (Sub-50ms Edge Hit)    │
├──────────────────────────┼──────────────────────┼─────────────────────────────┤
│ 3-YEAR TOTAL EXPENDITURE │ $34,524 (example)    │ $0                          │
│ CAPITAL SAVED            │ BASELINE             │ $34,524 (100% PRESERVED)    │
└──────────────────────────┴──────────────────────┴─────────────────────────────┘

The images still cost you nothing to serve, because static files on an edge network are cheaper than a coffee. What you have removed is the monthly invoice and the slow first visit in between.

Conclusion: Good Pictures Without the Slow Site

You do not have to choose between a site that looks good and a site that loads fast.

By combining AVIF compression with compile-time static generation, our own builds deliver retina-grade imagery at an 85% bandwidth reduction, accelerating Largest Contentful Paint to under 500ms and permanently removing the third-party image service invoice.

The photography stays. The waiting goes.