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.

<picture>
  <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" />
</picture>

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)

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

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 →