Christoph Erdmann

Members
  • Content Count

    24
  • Joined

  • Last visited

Community Reputation

22 Newbie

About Christoph Erdmann

  • Rank
    Member
  • Birthday February 18

Profile Information

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

Recent Profile Visitors

522 profile views
  1. Christoph Erdmann

    Best compression for your banner assets

    This div is at the top. Why do you have to scroll? Could you provide a screenshot?
  2. Christoph Erdmann

    Best compression for your banner assets

    What a nice feedback, thanks. If you have any ideas to improve it, please let me know.
  3. Christoph Erdmann

    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.
  4. Christoph Erdmann

    Best compression for your banner assets

    My new article "Finally understanding PNG" is now online. It also explains the "predator view": http://compress-or-die.com/Understanding-PNG 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.
  5. Christoph Erdmann

    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: http://compress-or-die.com/png
  6. Christoph Erdmann

    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: https://jsfiddle.net/McSodbrenner/gtv3earr/ 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.
  7. Christoph Erdmann

    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.
  8. Christoph Erdmann

    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?
  9. Christoph Erdmann

    What is your layout technique for GSAP?

    ... except the funky sprite generation part. Think we are highjacking this thread.
  10. Christoph Erdmann

    What is your layout technique for GSAP?

    This is what compress-or-die.com does.
  11. Christoph Erdmann

    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
  12. Christoph Erdmann

    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.
  13. Christoph Erdmann

    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.
  14. Christoph Erdmann

    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.
  15. Christoph Erdmann

    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.