Modern Image data formats support

That is why you can use them through Cloud Image as it does the hosting, detection and conversion for you.


Or if you program a local detector and store the detection and then server the alternate version from the resource library by tweaking the file path in HypeResourceLoad

by simply doing the following in the event handler in Hype Head HTML.
This code hasn't been tested and only typed into the forum. It also assumes that all PNG also have a webp version in the library.

function support_format_webp() {
    var elem = document.createElement('canvas');
    if (!!(elem.getContext && elem.getContext('2d'))) {
        return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
    } else {
        return false;
    }
}

window.supportsWebp = support_format_webp();
 
function HypeResourceLoad(hypeDocument, element, event) {
	if (event.url.indexOf('.png') !=-1 && window.supportsWebp){
		return event.url.replace('.png', '.webp');
	}
}

if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeResourceLoad", "callback":HypeDocumentLoadCallback});

2 Likes