Compress .zip <= 150kb 300x250 banner

24n_EKdeals_300x250.zip (134.1 KB) Hello,

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

grt cartimundi

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.

Put this in the head section

<style>

.my-mask {
  -webkit-mask-image: url('${resourcesFolderName}/my-mask.png');
  mask-image: url('${resourcesFolderName}/my-mask.png');
}
</style>

Apply my-mask to the image you want to 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

okay thanks....I', gonna study..I'm not so familiar with using the code in hype...but this example looks easy

still looks good, also in this big measurement...
you don't use the automatically optimize function?

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)


A reminder to everybody: ImageAlpha and ImageOptim are Open-Source and maintained by the great Image compression tinkerer ⇨ https://twitter.com/kornelski

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 …

:point_down:

sponsorship or a one-time payment

oke, what you mean by that, is that I can make a big step (90%) with ImageAlpha and to get the most (100%)of it, I must use the mask (?)

i was study the mask...but whit the use of 3 images...every week...fur several countries...

Using images in Hype...for the best quality, the images must be the exact measurement?..
for a 300x250 banner...an image of 300pixels wide

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.

okay, i will look at that..

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)

and the text failure.. Meister muss dass sein :wink:

Schermafbeelding 2021-05-27 om 15.41.43|690x290

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.

Mask-Example-1000x1500-smaller-mask.hype.zip (236,9 KB)


Update: I combined the two ideas mentioned above (sprite sheet and masking) and you can read about it here (including an example file):

1 Like

I use this... ImageOptim — better Save for Web

1 Like

When you use an export script the hype-library.js file will also be lighter.
See https://tumult.com/hype/export-scripts/. I mostly use DoubleClickDCM.pkg

1 Like

Thanks, I'm already using that one :wink:

1 Like