Image Optimisation for the Jamstack with Image CDNs

Alistair Shepherd - Front-End Developer

SeriesEight

Images on the web

<img
  src="/our-image.jpg"
  alt="our image"
>

Images change size depending on screen width

Source jpeg - 300kB

Webp - 18kB 🙂

JPEG XL* - 12kB 😍

Optimised jpeg - 30kB 😮

AVIF - 14kB 😀

Hi DPI images

Lazy Loading and Decoding

"loading" attribute set to "lazy" or "eager" depending on position on page

decoding="async" when images shouldn't delay text rendering

<picture>
    <source 
      media="(-webkit-min-device-pixel-ratio: 1.5)"
      srcset="https://example.com/images/our-image_width1200_quality40.jpg 1200w"
      sizes="...">
    <img
      srcset="https://example.com/images/our-image_width600_quality80.jpg 600w"
      sizes="..."
      alt="">
</picture>

<picture>
  <source
      type="image/avif"
      media="(-webkit-min-device-pixel-ratio: 1.5)"
      srcset="/assets/image/otter-300-q40.avif 300w, /assets/image/otter-450-q40.avif 450w, /assets/image/otter-600-q40.avif 600w,
              /assets/image/otter-800-q40.avif 800w, /assets/image/otter-1000-q40.avif 1000w, /assets/image/otter-1200-q40.avif 1200"
      sizes="(min-width: 87rem) 40rem, (min-width: 768px) calc(50vw - 4rem), calc(100vw - 2rem)">
  <source
      type="image/avif"
      srcset="/assets/image/otter-300-q80.avif 300w, /assets/image/otter-450-q80.avif 450w, /assets/image/otter-600-q80.avif 600w,
              /assets/image/otter-800-q80.avif 800w, /assets/image/otter-1000-q80.avif 1000w, /assets/image/otter-1200-q80.avif 1200"
      sizes="(min-width: 87rem) 40rem, (min-width: 768px) calc(50vw - 4rem), calc(100vw - 2rem)">
  <source
      type="image/webp"
      media="(-webkit-min-device-pixel-ratio: 1.5)"
      srcset="/assets/image/otter-300-q40.webp 300w, /assets/image/otter-450-q40.webp 450w, /assets/image/otter-600-q40.webp 600w,
              /assets/image/otter-800-q40.webp 800w, /assets/image/otter-1000-q40.webp 1000w, /assets/image/otter-1200-q40.webp 1200"
      sizes="(min-width: 87rem) 40rem, (min-width: 768px) calc(50vw - 4rem), calc(100vw - 2rem)">
  <source
      type="image/webp"
      srcset="/assets/image/otter-300-q80.webp 300w, /assets/image/otter-450-q80.webp 450w, /assets/image/otter-600-q80.webp 600w,
              /assets/image/otter-800-q80.webp 800w, /assets/image/otter-1000-q80.webp 1000w, /assets/image/otter-1200-q80.webp 1200"
      sizes="(min-width: 87rem) 40rem, (min-width: 768px) calc(50vw - 4rem), calc(100vw - 2rem)">
  <source
      media="(-webkit-min-device-pixel-ratio: 1.5)"
      srcset="/assets/image/otter-300-q40.jpg 300w, /assets/image/otter-450-q40.jpg 450w, /assets/image/otter-600-q40.jpg 600w,
              /assets/image/otter-800-q40.jpg 800w, /assets/image/otter-1000-q40.jpg 1000w, /assets/image/otter-1200-q40.jpg 1200"
      sizes="(min-width: 87rem) 40rem, (min-width: 768px) calc(50vw - 4rem), calc(100vw - 2rem)">
              <img
                alt="otter standing on a log looking out majestically"
                src="/assets/image/otter-1200-q80.jpg"
                srcset="/assets/image/otter-300-q80.jpg 300w, /assets/image/otter-450-q80.jpg 450w,
                        /assets/image/otter-600-q80.jpg 600w, /assets/image/otter-800-q80.jpg 800w,
                        /assets/image/otter-1000-q80.jpg 1000w, /assets/image/otter-1200-q80.jpg 1200"
                sizes="(min-width: 87rem) 40rem, (min-width: 768px) calc(50vw - 4rem), calc(100vw - 2rem)"
                width="1200"
                height="784"
                loading="lazy"
                decoding="async"
              >
            </picture>

To display a few images on a webpage!

Images on the Jamstack

Manual

Custom code and process

Package or component like
next/image or 11ty-image

Jpeg, Webp, AVIF

Many image sizes

Quality levels for 1x and 2x dpi

Image processing wishlist

Convert to several different formats, update to support new ones like AVIF and JPEG XL

Resize images to many different sizes

Handle differing quality levels depending on density

Bonus: Perform quality analysis comparing image sizes between different formats

> eleventy-base-blog@5.0.2 build
> eleventy

[...]

Copied 957 files / Wrote 19 files in 188.07 seconds (9898.4ms each, v0.12.1)

3 minutes, 8 seconds!

> eleventy-base-blog@5.0.2 build
> eleventy

[...]

Copied 2 files / Wrote 19 files in 0.59 seconds (31.1ms each, v0.12.1)

Jamstack image issues in the wild

New site design and build

Client-managed content

Jamstack using 11ty and headless WordPress

Around 20 artists

Up to 40-50 pieces each

Hundreds of studio-quality images

"The art on the new website has to be as high quality as possible"

I built my own process using Sharp

Converted to Webp, was easy to add AVIF in future

Resize images to many different sizes

Handle differing quality levels depending on density

Bonus: Perform quality analysis comparing image sizes between different formats

✅

❎

Builds went from ~30 seconds to almost
12 minutes

Image
CDNs to
the rescue

What is an Image CDN?

Content Delivery Network (CDN) specialising in image processing

Sits between your server and the user 'transforming' images on the fly by customising URLs

Third-party services selling solutions to make dev experience of working with images easier and improving performance

and many more

User's browser

Server

HTML

CSS

Images

User's browser

Server

HTML

CSS

Images

Image CDN

Optimised

Images

Source

How do we use them?

https://example.imagecdn.com

Start with our image
CDN domain

https://example.imagecdn.com

/https://oursite.com

/images/example.jpg

Add the URL to our
source image

https://example.imagecdn.com

/images/example.jpg

Many CDN providers allow
you to make presets/aliases

https://example.imagecdn.com

/images/example.jpg

?w=600&h=400

Add parameters to

'transform' the image

https://example.imagecdn.com/fetch

/images/example.jpg

/w_600,h_400

Different CDNs have different formats,
but work on the same concepts

Handled outwith site build

Managed by image experts

Automatic format detection

.../w_300,h_600,c_thumb,g_auto/...

Tall banner with automatic gravity

.../w_1000,h_400,c_fill,g_north/...

Wide banner anchored to top

Combining images and text

Circles and rounded corners

Implementing
Image CDNs

<picture>
  <source
      media="(-webkit-min-device-pixel-ratio: 1.5)"
      srcset="
        https://example.imagecdn.com/images/w_300,q_40/otter.jpg 300w,
        https://example.imagecdn.com/images/w_450,q_40/otter.jpg 450w,
        https://example.imagecdn.com/images/w_600,q_40/otter.jpg 600w,
        https://example.imagecdn.com/images/w_800,q_40/otter.jpg 800w,
        https://example.imagecdn.com/images/w_1000,q_40/otter.jpg 1000w,
        https://example.imagecdn.com/images/w_1200,q_40/otter.jpg 1200w"
      sizes="(min-width: 87rem) 40rem, (min-width: 768px) calc(50vw - 4rem), calc(100vw - 2rem)">
  <img
    alt="otter standing on a log looking out majestically"
    src="https://example.imagecdn.com/images/w_800,q_80/otter.jpg"
    srcset="
      https://example.imagecdn.com/images/w_300,q_80/otter.jpg 300w,
      https://example.imagecdn.com/images/w_450,q_80/otter.jpg 450w,
      https://example.imagecdn.com/images/w_600,q_80/otter.jpg 600w,
      https://example.imagecdn.com/images/w_800,q_80/otter.jpg 800w,
      https://example.imagecdn.com/images/w_1000,q_80/otter.jpg 1000w,
      https://example.imagecdn.com/images/w_1200,q_80/otter.jpg 1200w"
    sizes="(min-width: 87rem) 40rem, (min-width: 768px) calc(50vw - 4rem), calc(100vw - 2rem)"
    width="1200"
    height="784"
    loading="lazy"
    decoding="async"
  >
</picture>

{% image {
  name: 'otter.jpg'
  alt: 'an otter standing on a log looking majestic'
  srcset: [300, 450, 600, 800, 1000, 1200]
  sizes: '100vw'
  width: 1200
  height: 800
  loading: 'lazy'
  class: 'image-class mb-xl'
} %}

accud.io/imagecdn-11ty

import Image from 'components/Image'

export default function () {
  return (
    <Image
      src="otter.jpg"
      alt="an otter standing on a log looking majestic"
      srcset={[300, 450, 600, 800, 1000, 1200]}
      sizes="100vw"
      width="1200"
      height="800"
      loading="lazy"
      className="image-class mb-xl"
    />
  )
}

accud.io/imagecdn-react

Image CDNs makes working with images as easy as formatting a URL

Not just Jamstack!

Moving to using an Image CDN

Build times
reduced by 80%

LCP improved by 19%

Chrome Image bytes
decreased by 27%

Multiple image sources combined into a single endpoint

cms.1896gallery.com/wp-content/uploads/2019/08/artwork-img.jpg

1896gallery.com/assets/internal-graphic.jpg

Image
CDN

1896gallery.imagecdn.com/wp/artwork-img.jpg

1896gallery.imagecdn.com/assets/internal-graphic.jpg

No free lunch!

Cost

As an external service, there is a cost implication

Many have a generous free tier, small site might not cost anything

Larger sites will cost, pricing model depends on the provider

Unless you have hundreds of thousands of images, likely cheaper than developers maintaining image processing

Can be offset by reduced build minutes if paying for build infrastructure, eg Netlify

Disable CDN for local dev
Push images to secret public dev URL

For very high performing sites different origin has an impact

Easy solution with Netlify

[[redirects]]
  from = '/cdn/:image'
  to = 'https://example.imagecdn.com/:image'
  status = 200

The scores are in...

Improve the performance of images on your websites

Make working with images easier during development

Reduce Jamstack build times

Try an Image CDN in your next project!

Thank You!

These slides, my sources and helpful links on image CDNs available at accud.io/jamstack-imagecdns

On twitter and most social media @accudio

My website and blog posts alistairshepherd.uk

Image Optimisation for the Jamstack with Image CDNs

Images on the web

Images change size depending on screen width

Hi DPI images

Lazy Loading and Decoding

To display a few images on a webpage!

Images on the Jamstack

Manual

Custom code and process

Package or component likenext/image or 11ty-image

Image processing wishlist

Jamstack image issues in the wild

"The art on the new website has to be as high quality as possible"

I built my own process using Sharp

Builds went from ~30 seconds to almost 12 minutes

Image CDNs to the rescue

What is an Image CDN?

How do we use them?

Start with our image CDN domain

Add the URL to our source image

Many CDN providers allow you to make presets/aliases

Add parameters to

'transform' the image

Different CDNs have different formats, but work on the same concepts

Combining images and text

Circles and rounded corners

Implementing Image CDNs

Image CDNs makes working with images as easy as formatting a URL

Moving to using an Image CDN

Build times reduced by 80%

LCP improved by 19%

Chrome Image bytes decreased by 27%

Multiple image sources combined into a single endpoint

No free lunch!

Cost

The scores are in...

Improve the performance of images on your websites

Make working with images easier during development

Reduce Jamstack build times

Try an Image CDN in your next project!

Thank You!

Package or component like
next/image or 11ty-image

Builds went from ~30 seconds to almost
12 minutes

Image
CDNs to
the rescue

Start with our image
CDN domain

Add the URL to our
source image

Many CDN providers allow
you to make presets/aliases

Different CDNs have different formats,
but work on the same concepts

Implementing
Image CDNs

Build times
reduced by 80%

Chrome Image bytes
decreased by 27%