What do you want to see in Hype?
AVIF, WebP, WebP v2, OxiPNG, mozJPEG,
Have you found a workaround for this problem?
Nope.
Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL) https://github.com/GoogleChromeLabs/squoosh
How high of a priority is this for you?
Better usage of better compressed images? Very high.
[ ] Nice to Have
[X] Important
[ ] Can't use Hype without it
Example. Reduce an PNG image by 64% that has a size of 1200x1200px. Lovely.
...and by doing it that way, you can set image fallbacks. (Tumult should handle that too though.)
See... this is another reason why Tumult should stop supporting IE11.
...but are you really helping yourself with AVIF?
...and what are those other formats?! "Can I Use" doesn't even have a listing for them.
...and I think there was something else, something new... but I forgot what it was. I still use png/jpeg with ImageOptim. WebP is still too new for me to use it yet, but it does seem like a good idea for Hype to support these image formats.
You can use the HypeResourceLoad event and in the handler redirect the image to a webp version. You would need to put these in your project library as well.
Also check out the Hype Cloud Image example (paid Image cruncher service with CDN) to atomically generate such images.
In that example you can see some code how to use HypeResourceLoad (although more in-depth than a simple solution for self hosted webp would need to be). The Event is also described in Hype Cookbook under Hype Events.
hype is always concerned about compatibility and regarding the topic also very careful in compressing images. Running a tool like imageOptim against already hypeoptimized images gives some relevant reduction here ...
so perhaps a possibility to change quality of images on export (on top or replace of just optimize-setting) via the UI could be a good thing to implement.
But as always: any feature has several edgecases to consider
I may very well have the wrong end of the stick here.
But are any of those formats standardised formats and have a more than high worldwide adoption in use as such.
I don’t know the answer by the way but feel that it’s likely a consideration.
Also I personally do not expect to create the quality of webpages and animations in the likes of Photoshop, Pixelmator Pro or any other image app or program dedicated to the tasks of image editing, quality and compression etc.
So I certainly do not expect Hype to optimise images as well as they can and personally feel that it is unnecessary for hype to dive deep into it.
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});
There are some engineering tradeoffs that bleed into the ability to display these formats within the Hype's editor since it is based on Safari's WebKit, but it should definitely allow importing and intelligent runtime selection.
(thanks to those who posted workarounds and other thoughts about it as well)
