diff --git a/package-lock.json b/package-lock.json
index b321e076..ac949344 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@aws-sdk/client-s3": "^3.180.0",
         "alea": "^1.0.1",
+        "browser-image-compression": "^2.0.0",
         "classnames": "^2.3.2",
         "dotenv": "^16.0.3",
         "form-data": "^4.0.0",
@@ -5356,6 +5357,14 @@
         "node": ">= 10.16.0"
       }
     },
+    "node_modules/browser-image-compression": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.0.tgz",
+      "integrity": "sha512-kBlkZo13yOOfcmrPW0M0K/UdZPogIQj2gRvXIM3FktAnfW6VRq9aY2RI+F6O0x6DMj1Xm+WLGgWcFK8Fu/ddnw==",
+      "dependencies": {
+        "uzip": "0.20201231.0"
+      }
+    },
     "node_modules/browser-readablestream-to-it": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/browser-readablestream-to-it/-/browser-readablestream-to-it-1.0.3.tgz",
@@ -14044,6 +14053,11 @@
         "js-sha1": "^0.6.0"
       }
     },
+    "node_modules/uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -18711,6 +18725,14 @@
         "duplexer": "0.1.1"
       }
     },
+    "browser-image-compression": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.0.tgz",
+      "integrity": "sha512-kBlkZo13yOOfcmrPW0M0K/UdZPogIQj2gRvXIM3FktAnfW6VRq9aY2RI+F6O0x6DMj1Xm+WLGgWcFK8Fu/ddnw==",
+      "requires": {
+        "uzip": "0.20201231.0"
+      }
+    },
     "browser-readablestream-to-it": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/browser-readablestream-to-it/-/browser-readablestream-to-it-1.0.3.tgz",
@@ -25069,6 +25091,11 @@
         "js-sha1": "^0.6.0"
       }
     },
+    "uzip": {
+      "version": "0.20201231.0",
+      "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz",
+      "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng=="
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
diff --git a/package.json b/package.json
index 77aeaa81..cf879fb0 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.180.0",
     "alea": "^1.0.1",
+    "browser-image-compression": "^2.0.0",
     "classnames": "^2.3.2",
     "dotenv": "^16.0.3",
     "form-data": "^4.0.0",
@@ -23,6 +24,7 @@
     "murmurhash-js": "^1.0.0",
     "next": "12.3.1",
     "node-fetch": "^3.2.10",
+    "offscreen-engine": "./packages/offscreen-engine",
     "openai": "^3.1.0",
     "raw-loader": "^4.0.2",
     "react": "18.2.0",
@@ -35,8 +37,6 @@
     "weaviate-client": "^2.12.0",
     "web3.storage": "^4.4.0",
     "wrangler": "^2.1.12",
-    "three": "./packages/three",
-    "offscreen-engine": "./packages/offscreen-engine",
     "zjs": "./packages/zjs"
   },
   "devDependencies": {
diff --git a/src/generators/sg-panel.js b/src/generators/sg-panel.js
index ff33a173..326f643b 100644
--- a/src/generators/sg-panel.js
+++ b/src/generators/sg-panel.js
@@ -1,3 +1,5 @@
+import imageCompression from 'browser-image-compression';
+
 // import {
 //   makeId,
 // } from '../utils/id-utils.js';
@@ -207,18 +209,31 @@ export class Panel extends EventTarget {
   }
 
   async setFile(file, prompt) {
+    // Resize file.
     file = await resizeBlob(file, panelSize, panelSize);
+
+    // Create new layer.
     const layer = this.zp.addLayer();
+
+    // Set data.
     (async () => {
-      const arrayBuffer = await file.arrayBuffer();
-      // console.log('set file');
+      // Dynamically compress file.
+      const compressedFile = await imageCompression(
+        file,
+        {useWebWorker: true},
+      );
+
+      // Set array buffer.
+      const arrayBuffer = await compressedFile.arrayBuffer();
       layer.setData(mainImageKey, arrayBuffer);
     })();
+
+    // Get image caption.
     (async () => {
       if (!prompt) {
         prompt = await vqaClient.getImageCaption(file);
       }
-      // console.log('set prompt', promptKey, prompt);
+
       layer.setData(promptKey, prompt);
     })();
   }
@@ -283,4 +298,4 @@ export class Panel extends EventTarget {
     this.#unlisten();
     this.cancel();
   }
-}
\ No newline at end of file
+}