Christoph Erdmann

  • Content count

  • Joined

  • Last visited

Community Reputation

20 Newbie

About Christoph Erdmann

  • Rank
  • Birthday February 18

Profile Information

  • Gender
  • Location
    Bielefeld, Germany
  • Interests
    Coding, 3D, Animating, Drumming

Recent Profile Visitors

402 profile views
  1. Best compression for your banner assets

    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. 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.
  2. Best compression for your banner assets

    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.
  3. Best compression for your banner assets

    I added an explanation for the PNG "predator view" aka "compression view". Hope it is more clear now what it does:
  4. Best compression for your banner assets

    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.
  5. Best compression for your banner assets

    Btw.: Tried UInt32Array with direct pixel manipulation and did not see any improvements in run time. Maybe chrome's V8 optimizes this internally.
  6. Best compression for your banner assets

    Jackets: 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. Spine: 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. Dungeon: 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?
  7. What is your layout technique for GSAP?

    ... except the funky sprite generation part. Think we are highjacking this thread.
  8. What is your layout technique for GSAP?

    This is what does.
  9. What is your layout technique for GSAP?

    If you want to rotate an asset you don't use this technique of course. It's just another technique in your toolbox for standard animations with position and opacity
  10. What is your layout technique for GSAP?

    Yes, the images are just a little bit bigger than the alternatives because they are most of the time PNGs. And of course this is not the holy grail for every type of campaign. But for standard campaigns with many size adaptions it's working well.
  11. What is your layout technique for GSAP?

    I think a popular method is to export your assets from Photoshop including the whitespace. So all your assets have the same size as your stage and are positioned at top: 0px and left: 0px. Most simple animations will work and with a bit of luck you just have to export the new assets for the size adaptions.
  12. Best compression for your banner assets

    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.
  13. Best compression for your banner assets

    Yes, always needed if the javascript domain and the image domain are different. If you are building banners it makes sense to add this everytime because there are ad servers that put the assets on a different domain than the index.html file. Maybe I should point it out. No sorry, there won't be a binary. And yes, as OSUblake stated, it works as long as javascript is available. Oh, nice one, thanks for this. I will take a look into it and will try to extend my code.
  14. Best compression for your banner assets

    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.
  15. Best compression for your banner assets

    Hi, 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. Thanks, Christoph