diff --git a/examples/minimal.html b/examples/minimal.html
new file mode 100644
index 0000000..bb6e489
--- /dev/null
+++ b/examples/minimal.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Minimal Smartcrop Example</title>
+  <style>
+    img {
+      width: 320px;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="../smartcrop.js"></script>
+  <script>
+    function loadImage(src) {
+      return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => resolve(image);
+        image.onerror = e => reject(new Error(e));
+        image.src = src;
+      });
+    }
+    async function main() {
+      const src = 'images/unsplash/makhmutova-dina-1580313-unsplash.jpg';
+      const options = {
+        width: 100,
+        height: 100
+      };
+      const image = await loadImage(src);
+      const crops = await smartcrop.crop(image, options);
+      console.log('crops', crops);
+      showCroppedImage(src, crops.topCrop, options)
+    }
+    function showCroppedImage(src, crop, options) {
+      const div = document.createElement('div');
+      const style = div.style;
+      style.backgroundImage = `url('${src}')`;
+      const scale = options.width / crop.width;
+      style.backgroundPositionX = crop.x * scale + 'px';
+      style.backgroundPositionY = -crop.y * scale + 'px';
+      style.backgroundSize = '100%';
+      style.width = options.width + 'px';
+      style.height = options.height + 'px';
+      document.body.appendChild(div);
+    }
+    main();
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/slideshow.html b/examples/slideshow.html
index 61d12e8..3298e75 100644
--- a/examples/slideshow.html
+++ b/examples/slideshow.html
@@ -1,49 +1,40 @@
 <!DOCTYPE html>
 <html class="dark">
-  <head>
-    <meta charset="utf-8" />
-    <title>smartcrop.js slideshow</title>
-    <link rel="stylesheet" href="style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      property="og:image"
-      content="http://29a.ch/sandbox/2014/smartcrop/examples/images/slideshow/0.jpg"
-    />
-  </head>
 
-  <body>
-    <h1>smartcrop.js slideshow</h1>
-    <p>
-      <a href="https://github.com/jwagner/smartcrop.js">smartcrop.js</a> is a
-      content aware image cropping library. On this page you can see how it can
-      be used to automatically pick crops to create a
-      <a href="http://en.wikipedia.org/wiki/Ken_Burns_effect">Ken Burns</a>
-      effect on images.
-    </p>
-    <p>
-      You can learn more about smartcrop.js on its
-      <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
-    </p>
+<head>
+  <meta charset="utf-8" />
+  <title>smartcrop.js slideshow</title>
+  <link rel="stylesheet" href="style.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta property="og:image" content="http://29a.ch/sandbox/2014/smartcrop/examples/images/slideshow/0.jpg" />
+</head>
 
-    <div id="prev-slide"></div>
-    <div id="slide">loading, this can take a little while...</div>
-    <p>
-      All the images are my own, you can find them and their license on my
-      <a href="https://www.flickr.com/photos/80225884@N06/">flickr stream</a>.
-    </p>
-    <script src="jquery.js"></script>
-    <script src="underscore.js"></script>
-    <script src="q.js"></script>
-    <script src="../smartcrop.js"></script>
-    <script src="slideshow.js"></script>
-    <script>
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', 'UA-5205069-2']);
-      _gaq.push(['_setDomainName', '29a.ch']);
-      _gaq.push(['_setSiteSpeedSampleRate', 50]);
-      _gaq.push(['_gat._anonymizeIp']);
-      _gaq.push(['_trackPageview']);
-    </script>
-    <script src="//www.google-analytics.com/ga.js" async></script>
-  </body>
-</html>
+<body>
+  <h1>smartcrop.js slideshow</h1>
+  <p>
+    <a href="https://github.com/jwagner/smartcrop.js">smartcrop.js</a> is a
+    content aware image cropping library. On this page you can see how it can
+    be used to automatically pick crops to create a
+    <a href="http://en.wikipedia.org/wiki/Ken_Burns_effect">Ken Burns</a>
+    effect on images.
+  </p>
+  <p>
+    You can learn more about smartcrop.js on its
+    <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
+  </p>
+
+  <div id="prev-slide"></div>
+  <div id="slide">loading, this can take a little while...</div>
+  <p>
+    All the images are my own, you can find them and their license on my
+    <a href="https://www.flickr.com/photos/80225884@N06/">flickr stream</a>.
+  </p>
+  <script src="jquery.js"></script>
+  <script src="underscore.js"></script>
+  <script src="q.js"></script>
+  <script src="../smartcrop.js"></script>
+  <script src="slideshow.js"></script>
+  <script src="/a.js" async></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/testbed.html b/examples/testbed.html
index 2cb4b8f..06f122b 100644
--- a/examples/testbed.html
+++ b/examples/testbed.html
@@ -1,152 +1,90 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <title>smartcrop.js testbed</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="style.css" />
-  </head>
 
-  <body>
-    <h1>smartcrop.js testbed</h1>
-    <p>
-      smartcrop.js is a content aware image cropping library. On this page you
-      can test it with your own images. You can learn more about the library on
-      it's <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
-    </p>
-    <div>
-      <form>
-        <div class="drop">
-          <h2>Drop images on this page to analyze them.</h2>
-          <input type="file" name="file" accept="image/*" />
-        </div>
-        <label
-          >Width
-          <div>
-            <input
-              name="width"
-              type="range"
-              min="50"
-              max="500"
-              step="1"
-              value="250"
-            /><span class="value">250</span>px
-          </div></label
-        >
-        <label
-          >Height
-          <div>
-            <input
-              name="height"
-              type="range"
-              min="50"
-              max="500"
-              step="1"
-              value="250"
-            /><span class="value">250</span>px
-          </div></label
-        >
-        <label
-          >minScale
-          <div>
-            <input
-              name="minScale"
-              type="range"
-              min="0.5"
-              max="1.0"
-              step="0.1"
-              value="1"
-            /><span class="value">1.0</span>
-          </div></label
-        >
-        <p>
-          <label
-            >Rule of thirds<input
-              name="ruleOfThirds"
-              type="checkbox"
-              value="1"
-              checked
-          /></label>
-        </p>
-        <p><strong>Face Detection</strong></p>
-        <div>
-          <label
-            ><input
-              name="faceDetection"
-              type="radio"
-              value="off"
-              checked
-            />Off</label
-          >
-        </div>
-        <div>
-          <label
-            ><input name="faceDetection" type="radio" value="face-api" />Use
-            <a href="https://github.com/justadudewhohacks/face-api.js"
-              >face-api.js</a
-            >
-            (tiny_face_detector model)
-          </label>
-        </div>
+<head>
+  <meta charset="utf-8" />
+  <title>smartcrop.js testbed</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <h1>smartcrop.js testbed</h1>
+  <p>
+    smartcrop.js is a content aware image cropping library. On this page you
+    can test it with your own images. You can learn more about the library on
+    it's <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
+  </p>
+  <div>
+    <form>
+      <div class="drop">
+        <h2>Drop images on this page to analyze them.</h2>
+        <input type="file" name="file" accept="image/*" />
+      </div>
+      <label>Width
         <div>
-          <label
-            ><input name="faceDetection" type="radio" value="jquery" />Use
-            <a href="http://facedetection.jaysalvat.com/"
-              >jquery.facedetection</a
-            ></label
-          >
+          <input name="width" type="range" min="50" max="500" step="1" value="250" /><span class="value">250</span>px
         </div>
+      </label>
+      <label>Height
         <div>
-          <label
-            ><input name="faceDetection" type="radio" value="tracking" />Use
-            <a href="https://trackingjs.com/">tracking.js</a></label
-          >
+          <input name="height" type="range" min="50" max="500" step="1" value="250" /><span class="value">250</span>px
         </div>
+      </label>
+      <label>minScale
         <div>
-          <label class="opencv-loading"
-            ><input
-              name="faceDetection"
-              type="radio"
-              value="opencv"
-              disabled
-            />Use <a href="https://opencv.org/">opencv.js</a></label
-          >
+          <input name="minScale" type="range" min="0.5" max="1.0" step="0.1" value="1" /><span class="value">1.0</span>
         </div>
-      </form>
-    </div>
-    <div class="output">
-      <canvas id="c"></canvas>
-    </div>
-    <div class="sidebar">
-      <div id="debug"></div>
-      <h4>All Crops</h4>
-      <div class="crops"></div>
-    </div>
-    <script src="jquery.js"></script>
-    <script src="underscore.js"></script>
-    <script src="../smartcrop.js"></script>
-    <script src="smartcrop-debug.js"></script>
-    <script src="tracking-min.js"></script>
-    <script src="tracking-face-min.js"></script>
-    <script src="jquery.facedetection.min.js"></script>
-    <script src="face-api.min.js"></script>
-    <script src="testbed.js"></script>
-    <script
-      async
-      src="https://unpkg.com/opencv.js@1.2.1/opencv.js"
-      integrity="sha384-ucXOxPgA5tSKdaZgFD+5C0lAJeavjW31veENhNvOwsTjgx8waDD0s1QcMdUxhlxk"
-      crossorigin="anonymous"
-      onload="openCvReady()"
-    ></script>
-    <p style="clear:both">Example Photo by Makhmutova Dina on Unsplash</p>
-    <script>
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', 'UA-5205069-2']);
-      _gaq.push(['_setDomainName', '29a.ch']);
-      _gaq.push(['_setSiteSpeedSampleRate', 50]);
-      _gaq.push(['_gat._anonymizeIp']);
-      _gaq.push(['_trackPageview']);
-    </script>
-    <script src="//www.google-analytics.com/ga.js" async></script>
-  </body>
-</html>
+      </label>
+      <p>
+        <label>Rule of thirds<input name="ruleOfThirds" type="checkbox" value="1" checked /></label>
+      </p>
+      <p><strong>Face Detection</strong></p>
+      <div>
+        <label><input name="faceDetection" type="radio" value="off" checked />Off</label>
+      </div>
+      <div>
+        <label><input name="faceDetection" type="radio" value="face-api" />Use
+          <a href="https://github.com/justadudewhohacks/face-api.js">face-api.js</a>
+          (tiny_face_detector model)
+        </label>
+      </div>
+      <div>
+        <label><input name="faceDetection" type="radio" value="jquery" />Use
+          <a href="http://facedetection.jaysalvat.com/">jquery.facedetection</a></label>
+      </div>
+      <div>
+        <label><input name="faceDetection" type="radio" value="tracking" />Use
+          <a href="https://trackingjs.com/">tracking.js</a></label>
+      </div>
+      <div>
+        <label class="opencv-loading"><input name="faceDetection" type="radio" value="opencv" disabled />Use <a
+            href="https://opencv.org/">opencv.js</a></label>
+      </div>
+    </form>
+  </div>
+  <div class="output">
+    <canvas id="c"></canvas>
+  </div>
+  <div class="sidebar">
+    <div id="debug"></div>
+    <h4>All Crops</h4>
+    <div class="crops"></div>
+  </div>
+  <script src="jquery.js"></script>
+  <script src="underscore.js"></script>
+  <script src="../smartcrop.js"></script>
+  <script src="smartcrop-debug.js"></script>
+  <script src="tracking-min.js"></script>
+  <script src="tracking-face-min.js"></script>
+  <script src="jquery.facedetection.min.js"></script>
+  <script src="face-api.min.js"></script>
+  <script src="testbed.js"></script>
+  <script async src="https://unpkg.com/opencv.js@1.2.1/opencv.js"
+    integrity="sha384-ucXOxPgA5tSKdaZgFD+5C0lAJeavjW31veENhNvOwsTjgx8waDD0s1QcMdUxhlxk" crossorigin="anonymous"
+    onload="openCvReady()"></script>
+  <p style="clear:both">Example Photo by Makhmutova Dina on Unsplash</p>
+  <script src="/a.js" async></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/testsuite.html b/examples/testsuite.html
index babff41..367e6d1 100644
--- a/examples/testsuite.html
+++ b/examples/testsuite.html
@@ -10,33 +10,33 @@
 
 <body class=testsuite>
   <h1>smartcrop.js test page</h1>
-  <p>smartcrop.js is a content aware image cropping library. On this page you can see how it operates on a large set of (&gt;100) images. This page is designed to show you both the strengths and weaknesses of this open source library. Please note that this
-    page is running just smartcrop.js without any additional face detection. You can play with face detection in the <a href="testbed.html">testbed</a>.
+  <p>smartcrop.js is a content aware image cropping library. On this page you can see how it operates on a large set of
+    (&gt;100) images. This page is designed to show you both the strengths and weaknesses of this open source library.
+    Please note that this
+    page is running just smartcrop.js without any additional face detection. You can play with face detection in the <a
+      href="testbed.html">testbed</a>.
   </p>
   <p>
-    You can learn more about the library on its <a href="https://github.com/jwagner/smartcrop.js/">github page</a>. You can try it out on your on images using the <a href="testbed.html">testbed</a>.</p>
+    You can learn more about the library on its <a href="https://github.com/jwagner/smartcrop.js/">github page</a>. You
+    can try it out on your on images using the <a href="testbed.html">testbed</a>.</p>
   <p id=perf></p>
   <div><img src=images/flickr/img.jpg></div>
-  <div class=testsuite-image-title><a href="https://www.flickr.com/photos/80225884@N06/13318614973/">Selfie</a> by <span class=testsuite-image-attribution><a href="https://29a.ch/">Myself</a> ;)</span></div>
+  <div class=testsuite-image-title><a href="https://www.flickr.com/photos/80225884@N06/13318614973/">Selfie</a> by <span
+      class=testsuite-image-attribution><a href="https://29a.ch/">Myself</a> ;)</span></div>
   <div><img src=images/flickr/kitty.jpg></div>
-  <div class=testsuite-image-title><a href="https://www.flickr.com/photos/11250735@N07/8561945042/">Cats in the Spring</a> by <span class=testsuite-image-attribution>ziamoku_woodpile</span></div>
+  <div class=testsuite-image-title><a href="https://www.flickr.com/photos/11250735@N07/8561945042/">Cats in the
+      Spring</a> by <span class=testsuite-image-attribution>ziamoku_woodpile</span></div>
   <div><img src=images/flickr/guitarist.jpg></div>
-  <div class=testsuite-image-title><a href="https://www.flickr.com/photos/64654599@N00/7185037375/">Kitty, Daisy and Lewis at the Garage</a> by <span class=testsuite-image-attribution>Paul Hudson</span></div>
+  <div class=testsuite-image-title><a href="https://www.flickr.com/photos/64654599@N00/7185037375/">Kitty, Daisy and
+      Lewis at the Garage</a> by <span class=testsuite-image-attribution>Paul Hudson</span></div>
   <div><img src=images/flickr/goodtimes.jpg></div>
-  <div class=testsuite-image-title><a href="https://www.flickr.com/photos/endogamia/5682480447/">Where Have All the Good Times Gone?</a> by <span class=testsuite-image-attribution>N. Feans</span></div>
+  <div class=testsuite-image-title><a href="https://www.flickr.com/photos/endogamia/5682480447/">Where Have All the Good
+      Times Gone?</a> by <span class=testsuite-image-attribution>N. Feans</span></div>
   <script src=jquery.js></script>
   <script src="../smartcrop.js"></script>
   <script src=smartcrop-debug.js></script>
   <script src=testsuite.js></script>
-  <script>
-    var _gaq = _gaq || [];
-    _gaq.push(['_setAccount', 'UA-5205069-2']);
-    _gaq.push(['_setDomainName', '29a.ch']);
-    _gaq.push(['_setSiteSpeedSampleRate', 50]);
-    _gaq.push(['_gat._anonymizeIp']);
-    _gaq.push(['_trackPageview']);
-  </script>
-  <script src="//www.google-analytics.com/ga.js" async></script>
+  <script src="/a.js" async></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
