ArchiveExpo SnackDiscord and ForumsNewsletter

Optimize assets for EAS Update

Learn how EAS Update downloads assets and how to optimize them for download size.

For SDK 50 and above, the new asset selection feature can greatly reduce the total number and size of downloaded assets.

When an app finds a new update, it downloads a manifest and then downloads any new or updated assets so that it can run the update. The process is as follows:

Many users running Android and iOS apps are using mobile connections that are not as consistent or fast as when they are using Wi-Fi, so it's important that the assets shipped as a part of an update are as small as possible.

Code assets

When publishing an update, EAS CLI runs Expo CLI to bundle the project into an update. The update will appear in our project's ./dist directory.

In ./dist/bundles, we can see the size of the index.android.js and index.ios.js files that will be part of the Android and iOS updates, respectively. Note that these are uncompressed file sizes; EAS Update uses Brotli and gzip compression, which can significantly reduce download sizes. Nevertheless, these files will be downloaded to a user's device when getting the new update if the device has not downloaded them before. Making these file sizes as small as possible helps end-users download updates quickly.

Image assets

App users will have to download any new images or other assets when they detect a new update if those assets are not already a part of their build. You can view all the assets uploaded to EAS servers in ./dist/assets. The assets there are hashed with their extensions removed, so it is difficult to know what assets are there. To see a pretty-printed list of assets, we can run:

npx expo export

Optimizing image assets

To manually optimize image assets in your project, you can use the npx expo-optimize command. It uses sharp library to compress images.

npx expo-optimize

After running the command, all image assets are compressed except the ones that are already optimized. You can adjust the compression quality by including the --quality [number] option with the command. For example, to compress to 90%, run:

npx expo-optimize --quality 90

Other manual optimization methods

You can also compress images using any other online service or a tool such as:

Some image optimizers are lossless. They re-encode your image to be smaller without any change or loss in the pixels displayed. When you need each pixel to be untouched from the original image, a lossless optimizer and a lossless image format like PNG are a good choice.

Other image optimizers are lossy. The optimized image differs from the original image. Often, lossy optimizers are more efficient because they discard visual information that reduces file size while making the image look nearly identical to humans. Tools like imagemagick can use comparison algorithms like SSIM to show how similar two images look. It's quite common for an optimized image that is over 95% similar to the original image to be far less than 95% of the original file size.

Other assets

For assets like GIFs or movies, or non-code and non-image assets, it's up to the developer to optimize and minify those assets.

Note: GIFs are a very inefficient format. Modern video codecs can produce smaller file sizes by over an order of magnitude.

Ensuring assets are included in updates

When you publish an update, EAS will upload your assets to the CDN so that they may be fetched when users run your app. However, for assets to be uploaded to the CDN they must be explicitly required somewhere in your application's code. Conditionally requiring assets will result in the bundler being unable to detect them and therefore they will not be uploaded when you publish your project.

Further considerations

It's important to note that a user's app will only download new or updated assets. It will not re-download unchanged assets that already exist inside the app.

One way to make sure that updates stay as slim as possible is to build and submit the app frequently to the app stores so that users can download a new app binary that includes more up-to-date assets. Generally, it's a good practice to build and submit an app when adding large or multiple assets, and it's good to use updates to fix small bugs and make minor changes between app store releases.