Embracing Modern Image Formats

Josh W. Comeau, on embracing modern image formats to ship less bytes to browsers. As not all browsers understand all image formats (Apple/Safari for example doesn’t support .webp, an image format developed by Google) he resides to the picture element with various sources set.

  <source srcset="/images/cereal-box.webp" type="image/webp" />
  <source srcset="/images/cereal-box.jp2" type="image/jp2" />
  <img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />

On his own blog he chose to use only .webp (for Chrome & Firefox) with a fallback to a .jpg (for Safari, IE, and other browsers that don’t speak WebP)

  <source srcset="/images/cereal-box.webp" />
  <img src="/images/cereal-box.jpg" />

Using a (premium) service like imgix you can easily automate this, through its fm parameter. Alternatively you could roll your own image transform service on AWS/GCP/Azure.

Embracing modern image formats →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.