/image/optimize bot broken?

Simon's Avatar

Simon

04 Jul, 2014 09:49 AM

Hi,

when running "so-crazy.png" trough the /image/optimize bot test on https://transloadit.com/docs/conversion-robots#reduce-image-file-sizes it returns the file without any file optimization. It still has a filesize of about 120 KB. But when I run the file several times trough http://tinypng.org I'm able to reduce the file size down to 32 KB without loosing quality! What is the problem here? There are several good and free implementations of libs that reduce png file sizes...

Simon

  1. Support Staff 1 Posted by Kevin van Zonne... on 04 Jul, 2014 10:18 AM

    Kevin van Zonneveld's Avatar

    Hi Simon,

    Ok that's odd, do you also have an assembly id for me? Then I can debug better for you.

    Kind regards,
    Kevin

  2. 2 Posted by Simon on 04 Jul, 2014 10:23 AM

    Simon's Avatar

    Template: 000a99e0a52311e3ab8f8bb6b77fa76a

    Assembly: c06b0540030011e4914349d310a41da1

  3. Support Staff 3 Posted by Kevin van Zonne... on 04 Jul, 2014 12:07 PM

    Kevin van Zonneveld's Avatar

    Hi Simon,

    I just tested with that assembly and it trims down the size of the screenshot from 1.4mb to 175kb. That's a factor 8 smaller, so I probably wouldn't call the tool broken.

    But obviously if you're able to achieve an even bigger factor, that's what we should at least be aiming for.

    We're currently using the optipng to do this. Have you tried multiple runs through our tool as well? If that's better we have have to consider abstracting that away for you and run it multiple times ourselves.

    If that doesn't help we could investigate using a different tool such as http://pngquant.org/.

    One final thing, maybe the tinypng trips metadata? We don't do so by default as it's considered bad internet citizienship (removing copyright of photographers and such should not be default behavior).

    Best,
    Kevin

  4. 4 Posted by Simon on 04 Jul, 2014 01:12 PM

    Simon's Avatar

    Hi Kevin,

    • once I tested to run /image/optimize several times, but the result size was exactly the input size, so I did no further tests.
    • Obviously we don't need Metadata since we use a screencapture... According to http://metapicz.com the tinypng nor the TL result contains Metadata.
    • Another thing I figured out and you can see this in the attached Unbenannt.PNG screen shot: tinypng reduces the "bitdepth" from 24 to 8!
    • We did some researches before we switched to TL and we stumpled also on http://pngquant.org, I think they are providing currently the best out of the box results.
    • Are there any undocumented parameters we could use?

    Simon

    PS: I just figured out that TinyPNG has an API now, maybe you want to integrate this into TL https://tinypng.com/developers ;-) ;-)

  5. Support Staff 5 Posted by Kevin van Zonne... on 09 Jul, 2014 06:19 PM

    Kevin van Zonneveld's Avatar

    Hi Simon,

    We have introduced pngquant for you. It's the same tool used by tinypng and kraken.io. Here's how you would enable it using our image/optimize bot: https://gist.github.com/kvz/a2dec814253354bcf155

    Since pngquant cannot preserve metadata, we have chosen that setting preserve_meta_data to false is mandatory. That's so that accidental meta/copyright stripping (frowned upon by good internet citizens) is less likely to happen.

    It's still beta so there are no docs. You'll be the first one to try it out so we're also looking forward to your feedback! : )

    Kind regards,
    Kevin

  6. 6 Posted by simon on 09 Jul, 2014 07:51 PM

    simon's Avatar

    Cool, cool, cool. Thanks a lot!

  7. 7 Posted by Simon on 10 Jul, 2014 02:24 PM

    Simon's Avatar

    Hi Kevin,

    Thank you very much!

    I implemented pngquant thing into our template twice. But it feels like it not working better. https://transloadit.com/templates/view/000a99e0a52311e3ab8f8bb6b77f... The images that are produced can still be decreased by more than 50% by tinypng.org.

    Simon

  8. Support Staff 8 Posted by Kevin van Zonne... on 29 Jul, 2014 09:34 AM

    Kevin van Zonneveld's Avatar

    Hey Simon,

    I'm finally revisiting this issue. I've tried to reproduce your findings but so far I'm unable to. For instance, with the image attached, we get similar compression rates with pngquant turned on (tinypng goes from 198.0 KB to 69.3 KB - we to 73.2 KB). Those are rates I can live with for something that's we offer as a sidedish : )

    Can you maybe attach 1 image that performs really bad? I would love to add that to our test suite and then try some more options.

    Kind regards,
    Kevin

  9. 9 Posted by =?UTF-8?Q?Simon... on 29 Jul, 2014 10:00 AM

    =?UTF-8?Q?Simon_Br=C3=BCchner?='s Avatar

    Hi Kevin!

    in the meanwhile I get the same results as you 3-8% less than tinypng - which is totally fine :-)

    I think my "bad" experience directly after you send me the first draft of pngquant resulted because of the API was not published at that time or whatever.

    All fine now! Thanks.

    Simon

  10. Support Staff 10 Posted by Kevin van Zonne... on 29 Jul, 2014 10:18 AM

    Kevin van Zonneveld's Avatar

    Hey Simon,

    Ok excellent! I'll start working on the docs & blogpost then so others can too benefit from this improvement. Just a thought, would you like to be featured in the blogpost with a link to your site and a nice quote, or not interested in that?

    Kind regards,
    Kevin

  11. 11 Posted by =?UTF-8?Q?Simon... on 29 Jul, 2014 11:17 AM

    =?UTF-8?Q?Simon_Br=C3=BCchner?='s Avatar

    Hi Kevin,

    definitely!!! Today we prepare our global launch for our Yarnee App so this would fit perfectly :-)

    The App https://itunes.apple.com/app/yarnee/id878999441
    The Homepage: http://yarnee.com/
    The Yarnee service on the web: https://yarnee.com/app

    Some technical background how and why we use TL: (You can use this to cite us)

    Yarnee is a tool to create collections of media that else would go lost in the feed based services like T, FB and Instagram. With Yarnee you can keep things together.

    - We use TL to be able to develop very fast.
    - We use it to compress, crop images and storing them (S3)
    - We use the audio wave robot to visualize audio files
    - We also use HTML to PNG robot, and the wave form generator to visualize audio files inside the App.

    About the PNG compression request:

    When a Yarn link is shared on FB we tell FB via Open Graph to display an interactive flash object. FB offers to display a nice preview image of the Open Graph content. We wanted to have a nice preview that indicates to the users what they can expect. So we have HTML website that displays 4 circles of the first 4 pages of Yarnee nicely formated with CSS. This is captured via the html/capture(?) robot and stored as PNG. To get FB to accept those images it was very important to reduce the file size of those created PNG so we use the new png compression to get nice FB previews :-)

    Any further questions? Feel free to ask.

    You can quote me or another developer of the team with:

    "Without TL we would not be able to focus on our core features in our iOS APP" or "TL helped us to develop Yarnee without thinking of image and video compression!", or something similar.

    Simon

  12. Support Staff 12 Posted by Kevin van Zonne... on 29 Jul, 2014 11:59 AM

    Kevin van Zonneveld's Avatar

    Hi Simon,

    Excellent! I had to trim it down to a few sentences for this particular blogpost. I hope I captured it: https://transloadit.com/blog/2014/07/better-png-optimization/
    Let me know if it's alright like that or if we need to fine tune a little?

    There's much more good material in your response. I've saved it in a case-study folder in our site. At a later point we want to design a few good ones, and you'll definitely be among the first to hear from us then!

    Let me know how all of this sounds!

    Kind regards,
    Kevin

  13. 13 Posted by =?UTF-8?Q?Simon... on 29 Jul, 2014 12:13 PM

    =?UTF-8?Q?Simon_Br=C3=BCchner?='s Avatar

    Perfect!

  14. Support Staff 14 Posted by Kevin van Zonne... on 29 Jul, 2014 12:23 PM

    Kevin van Zonneveld's Avatar

    Great, closing this then.
    And good luck with the launch of Yarnee!!

    Best,
    Kevin

  15. Kevin van Zonneveld closed this discussion on 29 Jul, 2014 12:23 PM.

  16. =?UTF-8?Q?Simon_Br=C3=BCchner?= re-opened this discussion on 29 Jul, 2014 12:48 PM

  17. 15 Posted by =?UTF-8?Q?Simon... on 29 Jul, 2014 12:48 PM

    =?UTF-8?Q?Simon_Br=C3=BCchner?='s Avatar

    > There's much more good material in your response. I've saved it in a case-study folder in our site.

    Sure!

  18. Kevin van Zonneveld closed this discussion on 29 Jul, 2014 02:18 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

20 Nov, 2016 02:52 AM
29 Oct, 2015 05:01 AM
27 Oct, 2015 05:01 AM
27 Oct, 2015 05:01 AM
26 Oct, 2015 05:03 AM

 

26 Oct, 2015 05:02 AM
26 Oct, 2015 05:02 AM
26 Oct, 2015 05:02 AM
26 Oct, 2015 05:02 AM
26 Oct, 2015 05:02 AM
26 Oct, 2015 05:01 AM