Images on the web — past present and future

All about images on the web: current formats, how browsers load images, and upcoming formats - when and how to use them.

• This talk will start with a review of image formats commonly used on the web today - jpeg, git, png, svg and webp. What are they each good for? When and how should sites use them?
• Next, we will dig into the surprisingly complicated loading process of pages and images in the browser and the implications for site optimization.
• Finally, we will dive into newer formats like AVIF, JPEG XL and WebP2, learn what promise they hold and how site owners can start using them today.

Outline

• Digital Images: a brief history

• Review the most widely used formats today on the web today

• Where did they come from, have they changed, why did they succeed?

• What is each format useful for?

• Why do images always show up in performance audits?

• Modern image formats

• AVIF

• JPEG XL

• WebP2

• Comparing the modern formats: size, plus compression and decompression speed

• How can sites start using modern image formats?

• How do browsers load images?

• How are images loaded in your web browser? Hint: it’s more complicated than you think!

• Lifecycle of a page load, what loads when?

• What is prioritized? What do users see?

• Image srcset, sizes and the picture element

Takeaways
The audience will learn:

• All about image formats: when to use them, what newer formats are good for
• How images work on the web and why you might care
• How to use the best image formats on your site