diff --git a/apps.json b/apps.json
index b2f850b98..43215222f 100644
--- a/apps.json
+++ b/apps.json
@@ -164,6 +164,23 @@
       {"name":"wclock.img","url":"clock-word-icon.js","evaluate":true}
     ]
   },
+  { "id": "imgclock",
+    "name": "Image background clock",
+    "shortName":"Image Clock",
+    "icon": "app.png",
+    "version":"0.01",
+    "description": "A clock with an image as a background",
+    "tags": "clock",
+    "type" : "clock",
+    "custom": "custom.html",
+    "storage": [
+      {"name":"imgclock.app.js","url":"app.js"},
+      {"name":"imgclock.img","url":"app-icon.js","evaluate":true},
+      {"name":"imgclock.face.img"},
+      {"name":"imgclock.face.json"},
+      {"name":"imgclock.face.bg","content":""}
+    ]
+  },
   { "id": "impwclock",
     "name": "Imprecise Word Clock",
     "icon": "clock-impword.png",
diff --git a/apps/imgclock/122240.png b/apps/imgclock/122240.png
new file mode 100644
index 000000000..14b3cf84b
Binary files /dev/null and b/apps/imgclock/122240.png differ
diff --git a/apps/imgclock/122271.png b/apps/imgclock/122271.png
new file mode 100644
index 000000000..cd9b5e45f
Binary files /dev/null and b/apps/imgclock/122271.png differ
diff --git a/apps/imgclock/ChangeLog b/apps/imgclock/ChangeLog
new file mode 100644
index 000000000..5560f00bc
--- /dev/null
+++ b/apps/imgclock/ChangeLog
@@ -0,0 +1 @@
+0.01: New App!
diff --git a/apps/imgclock/app-icon.js b/apps/imgclock/app-icon.js
new file mode 100644
index 000000000..2189484d0
--- /dev/null
+++ b/apps/imgclock/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+AH4A/AH4AD1oAaF/4v2nAAUF/4v/F6WJAAQvbw/X69jF54xPF5YuBAAIvnrms64BBAAQGCrgvHnc7r4vYRYXX2QCE6+HF8/W5vN6wvNsqPb6/N5nM5qRCR5QvCsoACF9BeCF4YyKR7ovCYYIvYd6DuCss6nSVBSJSPKSISNCR5a+Cr4vWAAYvDBhAvisYuBsYvPnYvBYAQuIF5gAMF4buDLxovgRxwvcr4uBsqOOF7juELxovDADDuEF9TuERxovfLx4vedwIvtdwKOOAAR1CACIlBr4pBF4RePGDAAFnYvTAAIUCJgQvTRyIwIAAgvPLygyNGhVlF7QyNGgrzCFzQyQsouCF7wyQF8IyNF0YyLF84yHF9QyDF1oA/AH4AeA=="))
diff --git a/apps/imgclock/app.js b/apps/imgclock/app.js
new file mode 100644
index 000000000..38991adc9
--- /dev/null
+++ b/apps/imgclock/app.js
@@ -0,0 +1,66 @@
+/*
+Draws a fullscreen image from flash memory
+Saves a small image to flash which is just the area where the clock is
+Keeps an offscreen buffer and draws the time to that
+*/
+var inf = require("Storage").readJSON("imgclock.face.json");
+var img = require("Storage").read("imgclock.face.img");
+var IX = inf.x, IY = inf.y, IBPP = inf.bpp;
+var IW = 110, IH = 45, OY = 24;
+require("Font7x11Numeric7Seg").add(Graphics);
+var cg = Graphics.createArrayBuffer(IW,IH,IBPP);
+var cgimg = {width:IW,height:IH,bpp:IBPP,buffer:cg.buffer};
+var locale = require("locale");
+
+// store clock background image in bgimg (a file in flash memory)
+var bgimg = require("Storage").read("imgclock.face.bg");
+// if it doesn't exist, make it
+function createBgImg() {
+  cg.drawImage(img,-IX,-IY);
+  require("Storage").write("imgclock.face.bg", cg.buffer);
+  bgimg = require("Storage").read("imgclock.face.bg");
+}
+if (!bgimg || !bgimg.length) createBgImg();
+
+function draw() {
+  var t = new Date();
+  // quickly set background image
+  new Uint8Array(cg.buffer).set(bgimg);
+  // draw time
+  cg.setFontAlign(-1,-1);
+  var x = 0;
+  cg.setFont("7x11Numeric7Seg",3);
+  cg.drawString((" "+t.getHours()).substr(-2), x, 0);
+  x+=42;
+  cg.fillRect(x, 10, x+2, 10+2).fillRect(x, 20, x+2, 20+2);
+  x+=6;
+  cg.drawString(("0"+t.getMinutes()).substr(-2), x, 0);
+  x+=44;
+  cg.setFont("7x11Numeric7Seg",1);
+  cg.drawString(("0"+t.getSeconds()).substr(-2), x, 20);
+  cg.setFont("6x8",1);
+  cg.setFontAlign(0,-1);
+  cg.drawString(locale.date(t),IW/2,IH-8);
+  // draw to screen
+  g.drawImage(cgimg,IX,IY+OY);
+}
+
+// draw background
+g.drawImage(img, 0,OY);
+// draw clock itself and do it every second
+draw();
+var secondInterval = setInterval(draw,1000);
+// load widgets
+Bangle.loadWidgets();
+Bangle.drawWidgets();
+// Stop when LCD goes off
+Bangle.on('lcdPower',on=>{
+  if (secondInterval) clearInterval(secondInterval);
+  secondInterval = undefined;
+  if (on) {
+    setInterval(draw,1000);
+    draw();
+  }
+});
+// Show launcher when middle button pressed
+setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });
diff --git a/apps/imgclock/app.png b/apps/imgclock/app.png
new file mode 100644
index 000000000..237f3f82a
Binary files /dev/null and b/apps/imgclock/app.png differ
diff --git a/apps/imgclock/custom.html b/apps/imgclock/custom.html
new file mode 100644
index 000000000..b41ac81f5
--- /dev/null
+++ b/apps/imgclock/custom.html
@@ -0,0 +1,63 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../../css/spectre.min.css">
+  </head>
+  <body>
+    <div class="container">
+      <div class="columns">
+      </div>
+    </div>
+
+    <script src="../../lib/customize.js"></script>
+    <script src="https://espruino.github.io/EspruinoWebTools/imageconverter.js"></script>
+
+    <script>
+      var faces = [
+        { img:"122240.png", bpp : 8, x:120, y:20, name:"Cityscape", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
+        { img:"122271.png", bpp : 8, x:10, y:125, name:"Sunset", attrib:"getwallpapers.com", attribLink:"http://getwallpapers.com/collection/8-bit-wallpaper", description:"" },
+      ];
+
+      document.querySelector(".columns").innerHTML = faces.map((face,facenumber)=>`
+<div class="column col-6 col-xs-12">
+  <div class="card">
+    <div class="card-image">
+      <img src="${face.img}" face="${facenumber}" class="img-responsive">
+    </div>
+    <div class="card-header">
+      <div class="card-title h5">${face.name}</div>
+      <div class="card-subtitle text-gray"><a href="${face.attribLink}" target="_blank">${face.attrib}</a></div>
+    </div>
+    <div class="card-body">${face.description}</div>
+    <div class="card-footer">
+      <button class="btn btn-primary uploadbutton" face="${facenumber}">Upload</button>
+    </div>
+  </div>
+</div>`).join("\n");
+
+      var btns = document.getElementsByClassName("uploadbutton");
+      for (var i=0;i<btns.length;i++) {
+      // When the 'upload' button is clicked...
+        btns[i].addEventListener("click", function(btn) {
+          // build app text
+          var facenumber = btn.target.getAttribute("face");
+          var face = faces[facenumber];
+          var faceInfo = {
+            bpp : face.bpp,
+            x : face.x,
+            y : face.y
+          };
+          var img = document.querySelector(`img[face='${facenumber}']`);
+          var imgString = imageconverter.imagetoString(img, {mode:"web",output:"raw",compression:false});
+          // send finished app
+          sendCustomizedApp({
+            storage:[
+              {name:"imgclock.face.img", content:imgString},
+              {name:"imgclock.face.json", content:JSON.stringify(faceInfo)},
+            ]
+          });
+        });
+      }
+
+    </script>
+  </body>
+</html>
diff --git a/js/appinfo.js b/js/appinfo.js
index ae48ed199..776142bcd 100644
--- a/js/appinfo.js
+++ b/js/appinfo.js
@@ -1,5 +1,7 @@
 function toJS(txt) {
-  return JSON.stringify(txt);
+  var json = JSON.stringify(txt);
+  var b64 = "atob("+JSON.stringify(btoa(json))+")";
+  return b64.length < json.length ? b64 : json;
 }
 
 if ("undefined"!=typeof module)