Nex-gen file image formats question

1

I read a bit today about better compression image formats today like Jpeg2000 (Safari), JPG XR (IE) and webP (Chrome).
All have the same trouble of not being globally browser supported with Firefox being the most troublesome.
Its like Betamax and VHS allover again.:confounded:

Still in my hunt to display bigger images with ever smaller file sizes with as less as possible artifacts (yes I want to eat my cake too :drooling_face:) I’m really interested in this.

A way to incorporate this into your website is:

<picture>
    <source type="image/webp" srcset="path/to/image.webp">
    <source type="image/jp2" srcset="path/to/image.jp2">
    <source type="image/jxr" srcset="path/to/image.jxr">
    <img src="path/to/image.jpg" alt="alt description">
  </picture>

Is there a posibility to do this in Hype?

2

You could definitely use them all today within the inner HTML of a rectangle by adding the images to your resource library, and using this code:

	<picture>
	    <source type="image/webp" srcset="${resourcesFolderName}/image.webp">
	    <source type="image/jp2" srcset="${resourcesFolderName}/image.jp2">
	    <source type="image/jxr" srcset="${resourcesFolderName}/image.jxr">
	    <img src="${resourcesFolderName}/image.jpg" alt="alt description">
	</picture>

Webp is not that bad – especially in this chrome-dominated world:

But a larger issue is <picture> support: https://caniuse.com/#search=picture, but you may be able to overcome this with Modernizr: https://modernizr.com/download?picture-setclasses&q=picture.

You would use a different image element if it’s not supported:

if (Modernizr.picture) {
  // supported
} else {
  // not-supported, so hide that picture element and do something else here...
}
3 Likes
3

You guys are one in a kind, you know that?

Thank you, thank you. :kissing_heart:

1 Like