On iOS disk size of cached images are larger than original

[mreall]

Cached images are often twice the size (or more) of the original image on iOS (Android works correctly). This can result in memory bloat on apps with a lot of images

Which platform(s) does your issue occur on?

• iOS version 13.6
• Tested on emulator (iPhone 11) and device (iPhone 8) with same results

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.8.0
• Cross-platform modules: 6.5.15
• Runtime(s): tns-ios version 6.5.0
• Plugin(s):

  "dependencies": {
    "@nativescript/theme": "~2.3.0",
    "nativescript-image-cache-it": "^6.0.0",
    "nativescript-vue": "~2.4.0",
    "tns-core-modules": "~6.5.0"
  },
  "devDependencies": {
    "@babel/core": "~7.1.0",
    "@babel/preset-env": "~7.1.0",
    "babel-loader": "~8.0.0",
    "nativescript-dev-webpack": "~1.5.0",
    "nativescript-vue-template-compiler": "~2.4.0",
    "node-sass": "^4.7.1",
    "vue-loader": "~15.4.0"
  },

Please, tell us how to recreate the issue in as much detail as possible.

I tested this with nativescript-vue. I created a new project, then in the Home.vue component I added the code shown below. Run tns debug ios and compare the file sizes.

Is there any code involved?

Create a new blank nativescript-vue project. Add the following to app/app.js:

import ImageCacheIt from 'nativescript-image-cache-it/vue';
Vue.use(ImageCacheIt);

Add the following to app/components/Home.vue:

<template>
  <Page @loaded="loaded">
    <ActionBar title="Sample images" />
    <ScrollView>
      <StackLayout class="home-panel">
        <Button text="Clear cache" margin="10" @tap="clearCache" />
        <GridLayout
          rows="25,25,25,300"
          columns="150,*"
          v-for="url in Object.keys(urls)"
          :key="url"
          marginBottom="15"
        >
          <Label colSpan="2" :text="url" />
          <Label row="1" text="Original size" />
          <Label row="1" col="1" :text="numberWithCommas(urls[url].original)" />
          <Label row="2" text="Cache size" />
          <Label row="2" col="1" :text="numberWithCommas(urls[url].cache)" />
          <ImageCacheIt
            row="3"
            colSpan="2"
            placeHolder="res://loading"
            :src="url"
            width="300"
            height="300"
            stretch="aspectFit"
          />
        </GridLayout>
      </StackLayout>
    </ScrollView>
  </Page>
</template>

<script>
import { ImageCacheIt } from "nativescript-image-cache-it";
import {
  File,
  knownFolders,
  path as fsPath,
} from "@nativescript/core/file-system";
import { getFile } from "@nativescript/core/http";

export default {
  data() {
    return {
      allUrls: {
        "https://images.unsplash.com/photo-1455098934982-64c622c5e066": {
          original: 0,
          cache: 0,
        },
        "https://images.unsplash.com/photo-1456318019777-ccdc4d5b2396": {
          original: 0,
          cache: 0,
        },
        "https://images.unsplash.com/photo-1458724338480-79bc7a8352e4": {
          original: 0,
          cache: 0,
        },
        "https://unsplash.com/photos/iCSKALuNuWg/download?w=640/iCSKALuNuWg": {
          original: 0,
          cache: 0,
        },
        "https://unsplash.com/photos/QqewKdbSFJg/download?w=640/QqewKdbSFJg": {
          original: 0,
          cache: 0,
        },
        "https://unsplash.com/photos/WG-pGdDEfro/download?w=640/WG-pGdDEfro": {
          original: 0,
          cache: 0,
        },
        "https://unsplash.com/photos/Ne5A2HLuUCc/download?w=640/Ne5A2HLuUCc": {
          original: 0,
          cache: 0,
        },
      },
      reloading: false,
    };
  },

  computed: {
    urls() {
      if (this.reloading) {
        return {};
      }
      return this.allUrls;
    },
  },

  methods: {
    loaded() {
      setTimeout(() => {
        Object.keys(this.urls).forEach((url) => {
          this.getRealFileSize(url);
          this.getCacheFileSize(url);
        });
      }, 1000);
    },
    async getCacheFileSize(url) {
      const cache = ImageCacheIt;
      cache
        .getItem(url)
        .then((path) => {
          this.allUrls[url].cache = File.fromPath(path).size;
        })
        .catch((err) => {
          console.log(`Error loading '${url}': `, err);
        });
    },
    async getRealFileSize(url) {
      const filename = url.split("/").pop();
      const folder = knownFolders.temp().getFolder("local-cache").path;
      const localPath = fsPath.join(folder, filename);
      getFile(url, localPath).then((file) => {
        this.allUrls[url].original = file.size;
      });
    },
    clearCache() {
      ImageCacheIt.clear();
      this.reloading = true;
      setTimeout(() => (this.reloading = false), 1000);
    },
    numberWithCommas(n) {
      return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
  },
};
</script>