search

phetsims / energy-forms-and-changes

"Energy Forms And Changes" is an educational simulation in HTML5, by PhET Interactive Simulations.
MIT License
5 stars 5 forks source link

Image compression/reduction #78

Open samreid opened 6 years ago

samreid commented 6 years ago

This simulation has more data in images/ than most simulations, currently weighing in at 1.2MB. This will lead to longer download times and longer startup times. Should we investigate smaller images, or a tool like https://github.com/chrissimpkins/Crunch/ to perform PNG compression?

chrisklus commented 6 years ago

@samreid that tool looks quite nice! My first thought was that we shouldn't compress some images, like the colored energy chunks, because those are deliberately toned to be distinguishable by people with colorblindness. But, the examples in that repo are incredible, so I'm not sure if we would need to worry about anything like that. Based on those results, it seems like we should be able to reduce down to somewhere between 0.3MB and 0.6MB.

chrisklus commented 5 years ago

@jbphet and I think that it would be good to optimize all of the images right before creating the first release branch so that the final images are in use. Marking as deferred until then.

samreid commented 5 years ago

Google released a product called squoosh which leverages OptiPNG and was very easy to use. For instance, I used it to reduce bicycle_frame from 51KB to 16KB. https://github.com/GoogleChromeLabs/squoosh .

samreid commented 5 years ago

SR: Google released a product called squoosh which leverages OptiPNG and was very easy to use. For instance, I used it to reduce bicycle_frame.png from 51KB to 16KB. https://github.com/GoogleChromeLabs/squoosh . There is a broad spectrum of how we could apply this: on large images/on sims with lots of images/on common code images that are used in many sims. Likewise, we could leverage it for new sims, or go back and retroactively apply it on older sims. We could ask artists to compress PNGs when giving us new artwork, or we could rely on developers to take this step. Original artwork should still be checked in at full resolution. Further investigation: does this proportionately reduce base64 encoding size? Are there other benefits such as reduced heap size?

AP: Ok to test this on EFAC. Could try one compressed image, and make sure it looks ok across platforms. Then we could see if it is OK. JB and CK will investigate.

chrisklus commented 5 years ago

@ariel-phet, I've compressed the tea kettle and bike frame with squoosh/OptiPNG (visible on master), could you take a look? They look fine to me, but they also weren't able to be compressed much as .pngs. The bike frame is reduced by 30%, and the tea kettle 10%.

ariel-phet commented 5 years ago

Looks good to me @chrisklus

chrisklus commented 5 years ago

Original artwork should still be checked in at full resolution.

@samreid how should I handle compressing all of these? The original size .pngs should all live somewhere, but maybe not in the repo?

Also, EFAC has 103 images, and squoosh doesn't appear to support multi-file uploads yet, see https://github.com/GoogleChromeLabs/squoosh/issues/301. I'd rather not do these one at a time.

samreid commented 5 years ago

The original size .pngs should all live somewhere, but maybe not in the repo?

If the full resolution SVG is already checked in, then you don't need to check in the high resolution PNG. If there is no full resolution SVG, then check in the PNG in "energy-forms-and-changes/assets" as the source image.

chrisklus commented 5 years ago

I did size comparison tests of build files after compressing 1/103 images, and found that the sim was 99.88% of its original size. @jbphet and I think that this compression would be worth doing once squoosh supports a batch process, but is not significant enough to be worth doing manually right now.

chrisklus commented 5 years ago

I'm adding a calendar reminder to check on the status of Squoosh v2, which should support multi-file uploads.