I'm using hype enthusiastic...I'd like the ways it works and its performing.
The only issue I have is the quality of the images I can use.
I make banners with 3 pictures..this banner may not be heavier than 150kb...otherwise its load to slow.
Is there a way to get images better and still small?
I'm using tiny jpg / tiny png or imageAlpha...or maybe there is a setting in hype?
( im already deselecting : automatically optimize when exporting...in the resource window
When I use ImageAlpha on your images and reduce the colors I can still squeeze the size without loosing much detail. Try lower color settings on some PNGs.
An option along the lines of separating the alpha channel out would be to compose the alpha channel and the main image with JS and apply the mask in a canvas object. That would support older IE if written correctly.
Another option that would require some coding is to make a mask from a path (like a vector shape).
Final option is to separate the mask and the image into two files and use mask-image, but that disqualifies if you have to support the old IE stuff: https://caniuse.com/?search=mask-image
In that case, you can use a high JPEG compression and a low color PNG as a mask.
Here is an example on a rather big image 1000x1500 pixel… working rather nicely. Example-And-Compare.zip (1,9 MB)
Zoom in as the example file is set to 25% on the scene canvas
I do use optimization like the mentioned ImageAlpha etc. I am very interested as I did ad optimization years back in the early century (mostly pre import as I was using flash)
If these tools have made your life easier and or helped you finish a job and meet its restriction … in present day or in the past: Show the author and maintainer some love and support him with a …
Well, if you can use this approach you can save add bigger images with alpha channels into your banner (Retina-Versions 2x etc.). And if scaling is okay for you, when optimizing your Master-Banner as one of the bigger formats to fit into the size constrains (that is how I worked) you can then create all the variations ("Abformate") just by scaling the assets down.
Another interesting thing is the following approach to limit the number of requests and maybe even combine the two ideas. Meaning using a sprite sheet and alpha channel sheet, but I haven't done that yet.
in the meanwhile I've made the banner with original 300px .png from photoshop..
30kb...and with imageAlpha 64 colors (15kb)...I thought I didn't saw much difference in ImageAlpha, but In the banners you can see the different...a kind moiré!
(don't look at the color couches behind it, that are still the old ones)
Well, that was the whole point of exploring masks that are not connected to the image. That way one can tweak the mask and image separately. Allowing compressing through JPEG over the use of colors reduction and dither.
Little hint: using mask-size and -webkit-mask-size with 100% or cover allows you to reduce the size of the mask PNG even further (like scaling it to 50% when creating it). This makes the edges a little more fuzzy, but it is barely noticeable.