Month: September 2018

Last time we looked at comparing the different modern image formats (WebP, JPEG XR and JPEG 2000) and how they do with this image:

You can insert all the images onto your web page using the <picture> tag. The picture tag can be used on all modern browsers (not Internet Explorer 11). The picture tag is a way to give the browser options when displaying images. You’ll nest source elements inside it with a fallback img that the browser can use if it can’t render any of the specified source elements.

Here’s an example:

<picture>
    <source type="image/webp" srcset="./img/zion-small-webp.webp"/>
    <source type="image/vnd.ms-photo" srcset="./img/zion-small-jxr.jxr"/>
    <source type="image/jp2" srcset="./img/zion-small-jpeg2000.jp2"/>
    <img class="church-image" src="./img/zion-small.jpg" 
        alt="Zion Evangelical Lutheran Church" />
</picture>

Here, you can see that we’ve got all the modern image formats. The browser will fall back to the img if it can’t do this.

It isn’t practical to do this if you’ve got a ton of images, but for a small site with a few images, this will work fine.