Adam Silverstein • @roundearth

Images on the Web

Past, present and future

Images by Imagen

Adam Silverstein

Developer Relations Engineer

Content Ecosystem Team aka “The Web” Twitter: @roudearth WP Core: adamsilverstein

1. Images on the Web

2. How WordPress and the Browser handle Images

3. Why it matters

A brief history of images on the web

1987

GIF

Animation, transparency and color.

1992

JPEG

Photographic quality with variable compression.

1997

PNG

More powerful than GIF without license issue, initially no animation

2001

SVG

Vector images.

2010

WebP

Better compression->quality than JPEG. All the features of JPEG/PNG/GIF with better compression. Widely supported.

2019

AVIF

Even better compression, better color support (HDR). Supported (or support coming) for major browsers*.

2021

JPEG XL

Promises powerful features & compression. Not yet supported in browsers or servers.

“Legacy” formats

Modern formats

Legacy Web Formats

G^IF

← 35 years old

​

← Supported Everywhere

​

← Animation

​

← Transparency

​

← Lossless compression

​

← Limited palette (256 colors!)

​

← Compression issues

​

← Uncertain pronunciation

​

← Animation?

← 30 years old

​

← Supported everywhere

​

← Lossy compression

​

← Variable compression/quality

​

← 10x size reduction

​

← Full and accurate color

​

← Progressive decoding

​

← 30 years old, lossy compression has improved!

​

← No progressive decoding in WordPress

^JPEG

← 21 years old

​

← Very widely supported

​

← Images scale sharply to any resolution

​

← Very efficient for illustrations

​

← Styleable with CSS

​

← Scriptable & interactive

​

← Scriptable = security concerns!

​

← Only suitable for certain images

^SVG

PNG

← 15 years old

​

← Supported everywhere

​

← Successor to GIF without license issues

​

← Full and accurate color

​

← Alpha channel transparency

​

← Animation not supported

​

← Only lossless compression

Understanding Image Quality

Comparing quality

Quality 40: 292k (>70% reduction)

Quality 90: 1 MB

• Context matters

​

• Algorithmic tests: SSIM or PSNR, etc…

​

• Human based tests

Understanding image quality

JPEG

WebP

quality

file size (bpp)

Modern Formats

WebP

← 12 years old

​

← Very widely supported

​

← Lossless and Lossy compression

​

← Animation and Alpha transparency

​

← Full and accurate color

​

← Fast decoding

​

​

← Slower encoding

​

← Some support coverage gaps

^WebP

^AVIF

← 3 years old

​

← Well supported, growing

​

← Lossless and Lossy compression

​

← Animation and Alpha transparency

​

← Full and accurate color

​

← Very high compression

​

​

← Expensive encoding and decoding

​

← Some support coverage gaps: especially servers

← 1 year old

​

← Lossless and Lossy compression

​

← Animation and Alpha transparency

​

← Full and accurate color

​

← Efficient encoding & decoding

​

← Very high compression

​

← !! Losslessly re-encode JPEGs !!

​

← !! Advanced saliency based progressive decoding !!

​

← Supported nowhere

JG^{PIFEG XL}

WordPress and Images

How WordPress handles image uploads

​

​

​

​

Original Image - high quality >2500px

​

​

Large

​

Medium

​

​

Thumbnail

​

​

Etc.

• In all cases except insert from URL WordPress will process your upload, creating several images of various sizes for later use. These and more:

• WordPress also handles automatic image rotation, overly large image uploads and cropping
• WordPress can automatically generate images in an alternate format (eg. WebP)

https://web.dev/high-dpi/

HDR is ALSO

available on the web!

​

• Search for “Sample AVIF HDR image”
• Ticket to add AVIF support to core - https://core.trac.wordpress.org/ticket/51228

How Browser Load (pages and) images

https://developer.chrome.com/blog/inside-browser-part1/

How are things prioritized for loading?

https://calendar.perfplanet.com/2022/http-3-prioritization-demystified/

Why It matters

WordPress has an LCP problem!

Only 35% of WordPress sites provide a good CLS (while 75% have good CLS and 95% have good FID) - source cwvtech.report

Pillars of UX

Essential metrics for a healthy site

Loading

Is it happening?

Interactivity

Is it responsive?

Visual Stability

Is it delightful?

Core Web Vitals

Essential metrics for a healthy site

(Loading)

LCP

Largest Contentful Paint

GOOD

NEEDS IMPROVEMENT

POOR

4.0 sec

2.5 sec

To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

(Interactivity)

FID

First Input Delay

GOOD

NEEDS IMPROVEMENT

POOR

100 ms

300 ms

(Visual Stability)

CLS

Cumulative Layout Shift

GOOD

NEEDS IMPROVEMENT

POOR

0.1

0.25

Measures the render time of the largest content element (image or block of text) visible within the viewport.

LCP

GOOD

NEEDS IMPROVEMENT

POOR

4 sec

2.5 sec

The Cost of Data

Optimizing images now & in the future

Best for now

^Imag_{e CDN}

Delivers the right image every time →

​

​

@TODO

​

• Reduce blocking css

​

• Defer scripts

​

• Upgrade PHP

​

• Prioritize LCP image with prefetch

What could the future hold?

Format conversion in the browser (WASM) →

Conversion BY the browser → WordPress Media in the browser → WordPress as an image CDN →

GIF

The Future

Thanks

Adam Silverstein • adamsilverstein in WordPress core • Twitter (?) @roundearth