en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en ru en ru en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en de en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en it en en en en de en en en en en en en en en fr en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en pt en en en en en en en en en en en en de en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ru en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en it en en en nl en en en es en de en en en hu en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax.
Christoph Erdmann    24 Likes (Newbie)
I just want to introduce Compress-Or-Die which is an online compression tool especially created for the creators of banners... so I hope for the most of you.
It isn't a tool like tinyjpg or jpegmini that just allows to shrink existing JPGs a little bit. It's the one that creates your (also low quality) images from your original data and really squeezes out the last byte. And allows things like JPGs with transparency and "Selective quality" (as known from Adobe Fireworks) btw...
Take a look at it here:
In this context these articles could be interesting that explain a lot of the options you can set:
I am the author of the tool and the article. So if you have questions, wishes or something else, just drop me a line.
I have tested dozens of png optimizers but pngquant was the only useable.
Christoph Erdmann    24 Likes (Newbie)
For the whole tool I am trying to use only the best compressors available, so for 8-bit PNGs it's pngquant (also for me the best choice). That's the reason why the conversion takes a little bit time on big images. For some things I coded my own stuff (e.g. JPGs with transparency and JPGs with "Selective Quality"). At the moment I am in a JPG research phase so there should come some little improvements soon.
HOLY CRAP!!! That transparent jpg trick is amazing. It reduced this image from 2.19MB to 363k. One note, I had to add a crossorigin="anonymous" attribute to get it to work with assets hosted on CodePen.
See the Pen 780d362575b608e73b45789030a64b7e by osublake (@osublake) on CodePen
Interresting. I am looking for ways to reduce my ads size more than Photoshop can. Do You plan to relase the compressor as a binary? Are these transparent .jpgs useable in banner iFrames?
As long as JavaScript is available, you should be able to use the transparent jpg wherever. When the image loads, it creates a canvas and does some pixel manipulation.
And speaking of pixel manipulation, would the transparent jpg script run a little faster using a typed array? Probably needs a check for older browsers though.
Christoph Erdmann    24 Likes (Newbie)
5 hours ago, OSUblake said:
One note, I had to add a crossorigin="anonymous" attribute to get it to work with assets hosted on CodePen.
Yes, always needed if the javascript domain and the image domain are different. If you are building banners it makes sense to add this every time because there are ad servers that put the assets on a different domain than the index.html file.
Maybe I should point it out.
5 hours ago, Oliver16Years said:
Interresting. I am looking for ways to reduce my ads size more than Photoshop can. Do You plan to relase the compressor as a binary? Are these transparent .jpgs useable in banner iFrames?
No sorry, there won't be a binary.
And yes, as OSUblake stated, it works as long as javascript is available.
3 hours ago, OSUblake said:
And speaking of pixel manipulation, would the transparent jpg script run a little faster using a typed array? Probably needs a check for older browsers though.
Oh, nice one, thanks for this. I will take a look into it and will try to extend my code.
Share on other sites
OSUblake    18,414 Likes (Superhero)
Posted May 26, 2017
Just noticed how you can create your own selective quality mask. Very nice!
I think I need to redo a lot of my assets now. Any advice on compressing a sprite sheet? Would it be better to do each image individually, or just compress the spritesheet?
For the typed array stuff... that can get confusing as the endianness of the processor determines the order of the rgba values. Parts of this script might help you out. It's from ZorroSVG, which does something similar to your transparent jpg trick, but with an svg mask.
Some other SO links on the issue.
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted May 27, 2017
Hope the selective mask was not too hard to find. I am a little unsure about the UX. It is such an important feature.
As so often the answer is... it depends. But just post your uncompressed sprite sheet here. I feel like having a look at it (hope this phrase is correct).
And once again thanks for the links. I plan to address this subject next week. At the moment I am working on a javascript JPG Blocking artifact deblocker which is my priority.
Share on other sites
OSUblake    18,414 Likes (Superhero)
Posted May 28, 2017
On 5/27/2017 at 2:27 AM, Christoph Erdmann said:
Hope the selective mask was not too hard to find. I am a little unsure about the UX. It is such an important feature.
It wasn't obvious that selecting selective quality would open up a nice little editor. Maybe show the button and slider for it, but disabled.
And of course, it always depends, so I included several different types I have used. The jacket ones are huge, but something I do a lot for 360 product views.
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted May 29, 2017
This is actually the perfect case for transparent JPGs. jacket0.png gets a file size of 205kB instead of 2637kB with the default quality settings. But I suppose you have to say good bye to your texture packer then. Think it would be worth it. But you have to keep an eye on the decompression time (you know, the typed array is on my list).
I also don't see notable differences using 8 bit PNGs (908kB instead of 2637kB), but I think this won't work for all your products.
Just use 8 bit PNG and set a color amount that pleases you (48kB instead of 212kB width 256 colors).
Take a look at the compression view. There are stains I've marked with red rectangles:
Those stains take space but shouldn't be there, correct? The compression view is really useful to identify dirty transparency.
Just use 8 bit PNG and set a color amount that pleases you. If you need more colors that 256 I would break the sheets apart und consolidate images with similar colors.
You can use the compression view to check the correctness of your sheets:
In area 1 the PNG uses much file size for compressing the ponds of lava. So I think this is an animation. If it's not there is a opportunity for improvement.
In area 2 the ponds are duplicates. Fine.
In area 3 is a pond. In area 4 is a different pond, why? Copy the blue area from area 3 and you will save space.
These are just some examples how to use the compression view.
Does that help you?
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted May 29, 2017
Btw.: Tried UInt32Array with direct pixel manipulation and did not see any improvements in run time. Maybe chrome's V8 optimizes this internally.
Share on other sites
OSUblake    18,414 Likes (Superhero)
Posted May 31, 2017
Thanks for explaining the predator vision. I had no idea what I was looking at, but having you explain it makes a lot of sense now.
What you have created is pretty amazing. If you could could incorporate texture packing and wrap everything up in a desktop app, you could probably sell it. I know I would buy it.
Share on other sites
OSUblake    18,414 Likes (Superhero)
Posted May 31, 2017
On 5/29/2017 at 1:55 PM, Christoph Erdmann said:
Btw.: Tried UInt32Array with direct pixel manipulation and did not see any improvements in run time. Maybe chrome's V8 optimizes this internally.
Most of the performance gains with 32-bit manipulation come from being able to manipulate the pixel as a whole, instead of each channel separately. But you're only changing the alpha channel, so the number of reads and writes will be the same for both methods.
How did you write your loop? I'm no expert in bitwise operations, but using this loop for a little-endian was faster in Chrome and Firefox. In Edge, it blew the doors off a regular array.
context.drawImage(image, 0, 0); var idata = context.getImageData(0, 0, canvas.width, canvas.height); var data32 = new Uint32Array(idata.data.buffer); var len = data32.length / 2; var i = 0; while (i < len) { data32[i] &= ((data32[len + i++] << 24) | 0xffffff); // red channel (little-endian) } context.putImageData(idata, 0, 0);
CodePen is not a good environment to test in, but here's a demo. Just let it run for a couple of seconds.
See the Pen 616bec76d35eaa888ef1d2a5a2be85dd?editors=0010 by osublake (@osublake) on CodePen
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted June 3, 2017
That was mean. I've implemented your code in compress-or-die and it was slower than the 8bit code. I've created a fiddle to show it to you. But in this fiddle the 32bit code was faster.
But I got it: The difference is that I've inlined the code in compress-or-die within the onload attribute of the img tag. That made the 8bit code a little bit slower, but the 32bit code a lot slower than all other variants! So you only get the performance boost of the 32bit code if you define a function (an IIFE seems not to be enough) otherwise the situation switches completely.
Here is the fiddle:
I removed the "i" of the img tags to deactivate the corresponding code. So only one image tag should be correct at the same time to test it.
But it's just a very small performance boost. Most of the time is getting lost at "getImageData()" which is needed anyway.
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted June 15, 2017
I added an explanation for the PNG "predator view" aka "compression view". Hope it is more clear now what it does:
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted August 3, 2017
My new article "Finally understanding PNG" is now online. It also explains the "predator view":
Just a warning. English is not my native language and thus it is possible you are stumbling over some quirks.
My english speaking colleague is proofreading this article at the moment, but I couldn't wait and would be glad to get your feedback.
Share on other sites
OSUblake    18,414 Likes (Superhero)
Posted August 4, 2017
That's really helpful... and very interesting seeing the difference some of those optimizations can make, like using 8-bit. I have always used 24-bit.
And compression is interesting. The LZW algorithm in JavaScript, which is based on LZ77. Taken form here.
See the Pen c2eec63300e42508178c4ac46cf6c59c?editors=0010 by osublake (@osublake) on CodePen
Share on other sites
Ninili    9 Likes (Newbie)
Posted August 5, 2017
One thing I really like is the "copy Data-URI" option  This is great for testing on codepen. Although I have a pro account there and could upload every asset, it's quite a mess when you have like 25 files, all by the name "logo.jpg" or "product.png". Okay, having BASE64 in the code is ALSO a big mess, but after all a quick and easy method to test stuff.
I once wrote my own "transparent JPG" compressor which used a very similar approach like Christophs:
See the Pen aJLmrY by ninili (@ninili) on CodePen
...but it doesn't have all the controls for all the detailed aspects of compression, because it uses built-in Browser image compression.
So there's always a lack of optimized Huffman codes, selective quality, separate brightness and color compression, color subsampling, quantizers and so on.
You can even sometimes see it in the base64 output, when there is lots of repitition, that's where the entropy is way too low for what you would consider a "good compression".
I used this technique about 2 years ago when I had to animage quite big transparent graphics that would be over 300k even with tinyPNG. So going "transparent JPG" was the only way to get it done with sane image sizes.
But when I discovered all the details about JPG and that the browser doesn't perform a "huffman optimization" which always left some compression potential untouched made me ... SAD - but now there's Christophs tool that does exactly what I wanted, with almost everything I missed.
(almost meaning stuff like - using 8-color PNG data for masking for sharp edges or even traced SVG paths, separate control for Mask quality, etc.) But I think Christoph is already working on all that in secret.
Beneath Canvas, my tool also offers various SVG techniques to use the image mask. But beware, CANVAS will render faster, because the CANVAS will be handled like any other image or bitmap when animated. The SVG will introduce too much re-calculating, especially when doing transforms. Except you put that in a html container having the style "will-change: transform", then the SVG itself will get cached as an image and you can transform the container almost as fast as a CANVAS element.
Right now I'm on something I call a "compression frenzy" and try to drain out every last bit  and it goes as far as re-ordering parts of the HTML, using JSUglify, CSSmin, HTML minifiers, https://jakearchibald.github.io/svgomg/ , manual editing and optimizing of vector data, including re-nesting of transformations, using lots of symbols, etc. AND of course http://compress-or-die.com/ which is something like a dreamland for a compression nerd like me
Bzw. the attached image shows what you get - at least as BASE64 - when your JPG is NOT huffman-optimized (like Christophs tool does). This should convince anyone who is compression-aware
Share on other sites
Ninili    9 Likes (Newbie)
Posted August 5, 2017
There seem to be cases when inlining JPG images as base64 in HTML yields a smaller data size than using actual image files.
In this case, the huffman codes are NOT optimized. Maybe that is the cause and the gzip "finishes" what the un-optimized Huffman didn't get.
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted August 6, 2017
On 5.8.2017 at 4:32 PM, Ninili said:
(almost meaning stuff like - using 8-color PNG data for masking for sharp edges or even traced SVG paths, separate control for Mask quality, etc.) But I think Christoph is already working on all that in secret.
I've used PNG8 for the masks some time ago but most of the time the PNG was a little larger than the JPG. And you need two requests. So I decided to go with a JPG mask.
I've also tried mask quality settings but removed it. If you really want a smaller JPG mask you would have to do two requests. That adds HTTP header data. "Selective quality" seems not to be the solution for this. If you use quality settings that are not similar to each other the JPG algorithm uses different patterns from the 8*8 table. And then you get a glow around the JPG because the background color of the source image is not masked perfectly anymore.
There seem to be cases when inlining JPG images as base64 in HTML yields a smaller data size than using actual image files.
In my experience gzipped base64 images are a little bit larger than the original images. But Chrome als counts the HTTP header data for requests that is missing in the right part of your screenshot. Maybe that's the reason.
Share on other sites
Oliver Müller    9 Likes (Newbie)
Posted June 6, 2018
I really love the tool! I'm now using it on a daily basis. VERY USEFUL and the results are really astonishing (especially the transparent jpg trick)!
Thanks for your great work!
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted June 6, 2018
What a nice feedback, thanks.
If you have any ideas to improve it, please let me know.
Share on other sites
Oliver Müller    9 Likes (Newbie)
Posted June 6, 2018
I noticed just one tiny little UI thing
I think it could be useful to place div.card card-hero somehow sticky or fixed. So users don't have to scroll to see the result of their changes!
Share on other sites
Christoph Erdmann    24 Likes (Newbie)
Posted June 6, 2018
This div is at the top. Why do you have to scroll? Could you provide a screenshot?
Share on other sites
Page 1 of 2
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 3
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Best compression for your banner assets
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“I think I love GreenSock as much as bacon.”
“Performance has been of paramount importance for GreenSock, so there is always peace of mind for us, developers.”
“Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used.”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“@greensock is just pure awesomeness. What more can be said?”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.