Investigate file size

[samreid]

Related to #498, we saw that having a lot of high quality images and multiple variations led to an increased file size.

In the planning channel, @kathy-phet said:

Investigating how to reduce sim file size more - CAV is 9MB

@JacquiHayes also mentioned a request or report about file size, but I can't find that message.

[samreid]

I ran a quick experiment. I saw that grunt --brands=phet gave a file size of: 8.6MB. Then I applied this patch to reduce each png to a 1x1 pixel. This tests the hypothesis that the large file size is predominantly due to the images. Note this patch does not reduce mipmaps or jpegs or sound. Also, I only applied this patch via grunt modulify in soccer-common/ and center-and-variability. This does not reduce any common code pngs:

Subject: [PATCH] Update API due to gravity change and ignore initial value changes, see https://github.com/phetsims/phet-core/issues/132
---
Index: js/common/loadFileAsDataURI.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/common/loadFileAsDataURI.js b/js/common/loadFileAsDataURI.js
--- a/js/common/loadFileAsDataURI.js	(revision e7a7a9220537c15b3c80b580a52ad8f8aecdaed8)
+++ b/js/common/loadFileAsDataURI.js	(date 1700143226939)
@@ -37,7 +37,13 @@
   }
 
   const base64 = `data:${mimeType};base64,${Buffer.from( fs.readFileSync( filename ) ).toString( 'base64' )}`;
-  return base64;
+
+  if ( mimeType === 'image/png' ) {
+    return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==';
+  }
+  else {
+    return base64;
+  }
 }
 
 module.exports = loadFileAsDataURI;

After building the sim with this patch, I see the new file size is 2.8MB. This evidence supports the hypothesis that the large file size is due to the sim-specific pngs. Therefore, we could investigate reducing the file size by reducing the number or resolution of images. Please see the notes in #498 where we previously discussed the image resolution and batch resizing.

[samreid]

There is also an idea in phetsims/scenery#1578 about using SVG directly

[pixelzoom]

+1 for investigating phetsims/scenery#1578 to read .svg files directly.

I posted in Slack#planning, and we discussed in #richtertillas standup meeting:

Re file size due to regional character sets… Perhaps PhET should investigate support for .svg files in scenery — a feature that has come up many times — so that we’re adding small .svg files instead of large .png files.

I’m also concerned about how PhET is continuing to add regional character sets to sims before addressing the size issue. I just built a couple of sims that were recently modified, using grunt build --allHTML and comparing all.html file sizes. See results below. These numbers make it clear (to me anyway) that there is a problem with the current approach. And continuing to apply that approach is building technical debt at the same time that it’s creating a potential problem for some user communities.

energy-skate-park 1.1 => 1.3, +82% (2.8M to 5.1M)
number-line-distance 1.0 => 1.1, +58% (3.2M to 5.2M)
number-line-integers 1.1 => 1.2, +35% (4M to 6.4M)

Also noting that adding audio files for “UI Sound” feature is having the same (or worse) impact on .html file size, with the same potential impact on communities that do not have fast internet connections. So audio resources should be included in the discussion of how to address the problem.