diff --git a/extension/CSXS/manifest.xml b/extension/CSXS/manifest.xml
index f5eee37..56a8f2a 100644
--- a/extension/CSXS/manifest.xml
+++ b/extension/CSXS/manifest.xml
@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<ExtensionManifest Version="5.0" ExtensionBundleId="com.bodymovin.bodymovin" ExtensionBundleVersion="4.0.4"
+<ExtensionManifest Version="6.0" ExtensionBundleId="com.bodymovin.bodymovin" ExtensionBundleVersion="4.0.4"
 		ExtensionBundleName="bodymovin" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
 	<ExtensionList>
 		<Extension Id="com.bodymovin.bodymovin" Version="4.0.4" />
 	</ExtensionList>
 	<ExecutionEnvironment>
 		<HostList>
-            <Host Name="AEFT" Version="[13.0,13.9]" />
-            <Host Name="AEFX" Version="[13.0,13.9]" />
+            <Host Name="AEFT" Version="13.0" />
+            <Host Name="AEFX" Version="13.0" />
 
             <!-- Illustrator -->
             <!-- <Host Name="ILST" Version="[18.0,18.9]" />-->
@@ -27,7 +27,7 @@
 			<Locale Code="All" />
 		</LocaleList>
 		<RequiredRuntimeList>
-			<RequiredRuntime Name="CSXS" Version="5.0" />
+			<RequiredRuntime Name="CSXS" Version="6.0" />
 		</RequiredRuntimeList>
 	</ExecutionEnvironment>
 	<DispatchInfoList>
@@ -36,6 +36,11 @@
 				<Resources>
 				<MainPath>./index.html</MainPath>
 				<ScriptPath>./jsx/hostscript.jsx</ScriptPath>
+                <CEFCommandLine>
+                    <Parameter>--enable-nodejs</Parameter>
+                    <Parameter>--mixed-context</Parameter>
+                    <Parameter>--enable-media-stream</Parameter>
+                </CEFCommandLine>
 				</Resources>
 				<Lifecycle>
 					<AutoVisible>true</AutoVisible>
diff --git a/extension/index.html b/extension/index.html
index c30d05f..00c4af9 100644
--- a/extension/index.html
+++ b/extension/index.html
@@ -186,6 +186,7 @@
     <script src="js/controllers/messageController.js"></script>
     <script src="js/controllers/InfoController.js"></script>
     <script src="js/utils/storage.js"></script>
+    <script src="js/utils/binpacking.js"></script>
     <script src="js/controllers/snapshotController.js"></script>
     <script src="js/main.js"></script>
     
diff --git a/extension/js/controllers/CompRenderController.js b/extension/js/controllers/CompRenderController.js
index e7e2cd1..b30e191 100644
--- a/extension/js/controllers/CompRenderController.js
+++ b/extension/js/controllers/CompRenderController.js
@@ -198,6 +198,17 @@
         });
     }
     
+    function renderAtlasHandler(ev) {
+        var messageData = ev.data;
+        bm_binpacker.reset();
+        bm_binpacker.addBlocks(messageData.images);
+        var atlasPack = bm_binpacker.getPack();
+        var atlasDataString = JSON.stringify(atlasPack);
+        var eScript = 'bm_renderManager.setAtlasData(' + atlasDataString + ')';
+        csInterface.evalScript(eScript);
+        
+    }
+    
     function renderCharsHandler(ev) {
         var messageData = ev.data;
         var chars;
@@ -272,6 +283,7 @@
         csInterface.addEventListener('bm:render:complete', renderCompleteHandler);
         csInterface.addEventListener('bm:render:fonts', renderFontsHandler);
         csInterface.addEventListener('bm:render:chars', renderCharsHandler);
+        csInterface.addEventListener('bm:render:atlas', renderAtlasHandler);
         
         cancelButton = view.find('.cancel');
         returnButton = view.find('.return');
diff --git a/extension/js/main.js b/extension/js/main.js
index c653953..8e4f766 100644
--- a/extension/js/main.js
+++ b/extension/js/main.js
@@ -8,10 +8,6 @@
     var csInterface = new CSInterface();
     var mainViews = [];
     
-    
-    var gulp = require('gulp');
-    var gzip = require('gulp-gzip');
-    
     function showView(view) {
         var i, len = mainViews.length;
         for (i = 0; i < len; i += 1) {
diff --git a/extension/js/utils/binpacking.js b/extension/js/utils/binpacking.js
new file mode 100644
index 0000000..3abfcf3
--- /dev/null
+++ b/extension/js/utils/binpacking.js
@@ -0,0 +1,43 @@
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
+/*global console, require*/
+
+var bm_binpacker = (function () {
+    'use strict';
+    var ob = {}, blocks = [], packer, binpacking, GrowingPacker;
+    if (typeof require === 'function') {
+        ob.enabled = true;
+        binpacking = require('binpacking');
+        GrowingPacker = binpacking.GrowingPacker;
+    }
+    
+    function addBlocks(blocks) {
+        console.log(blocks);
+        var i, len = blocks.length;
+        for(i = 0; i < len; i += 1) {
+            addBlock(blocks[i]);
+        }
+    }
+    
+    function addBlock(block) {
+        blocks.push(block);
+    }
+    
+    function getPack() {
+        var packer = new GrowingPacker();
+        blocks.sort(function(a, b) { return (b.h > a.h); });
+        packer.fit(blocks);
+        console.log(blocks);
+        return blocks;
+    }
+    
+    function reset() {
+        blocks.length = 0;
+    }
+    
+    ob.addBlock = addBlock;
+    ob.addBlocks = addBlocks;
+    ob.reset = reset;
+    ob.getPack = getPack;
+    
+    return ob;
+}());
\ No newline at end of file
diff --git a/extension/jsx/renderManager.jsx b/extension/jsx/renderManager.jsx
index e033ba2..aebd618 100644
--- a/extension/jsx/renderManager.jsx
+++ b/extension/jsx/renderManager.jsx
@@ -107,6 +107,7 @@
     function reset() {
         pendingLayers.length = 0;
         pendingComps.length = 0;
+        ob.renderData.exportData.assets.length = 0;
         currentCompSettings = null;
     }
     
@@ -215,7 +216,10 @@
         saveData();
     }
     
-    function imagesReady() {
+    function imagesReady(assetsArray) {
+        if(assetsArray) {
+            ob.renderData.exportData.assets = assetsArray;
+        }
         checkFonts();
     }
     
@@ -238,6 +242,7 @@
     ob.setChars = setChars;
     ob.imagesReady = imagesReady;
     ob.setFontData = setFontData;
+    ob.setAtlasData = bm_sourceHelper.setAtlasData;
     ob.setCharsData = setCharsData;
     ob.hasExpressions = hasExpressions;
     
diff --git a/extension/jsx/utils/sourceHelper.jsx b/extension/jsx/utils/sourceHelper.jsx
index 3d98203..08193cc 100644
--- a/extension/jsx/utils/sourceHelper.jsx
+++ b/extension/jsx/utils/sourceHelper.jsx
@@ -3,6 +3,7 @@
 var bm_sourceHelper = (function () {
     'use strict';
     var compSources = [], imageSources = [], fonts = [], currentExportingImage, destinationPath, assetsArray, folder, helperComp, currentCompID, imageCount = 0;
+    var ob = {};
 
     function checkCompSource(item) {
         var arr = compSources;
@@ -79,6 +80,72 @@
         saveNextImage();
     }
     
+    function createAtlas() {
+        var i, len = imageSources.length;
+        var imagesList = [];
+        for (i = 0; i < len; i += 1) {
+            imagesList.push({
+                w: imageSources[i].width + 4,
+                h: imageSources[i].height + 4,
+                id: imageSources[i].id
+            });
+        }
+        bm_eventDispatcher.sendEvent('bm:render:atlas', {images: imagesList});
+    }
+    
+    function getSourceDataById(id) {
+        var i = 0, len = imageSources.length;
+        while( i < len) {
+            if(imageSources[i].id === id) {
+                return imageSources[i];
+            }
+            i += 1;
+        }
+    }
+    
+    function setAtlasData(blocks) {
+        if (bm_compsManager.cancelled) {
+            return;
+        }
+        var compWidth = 0;
+        var compHeight = 0;
+        var i, len = blocks.length;
+        for (i = 0; i < len; i += 1) {
+            compWidth = Math.max(blocks[i].fit.w + blocks[i].fit.x, compWidth);
+            compHeight = Math.max(blocks[i].fit.h + blocks[i].fit.y, compHeight);
+        }
+        var helperComp = app.project.items.addComp('atlasConverterComp', Math.max(4, compWidth), Math.max(4, compHeight), 1, 1, 1);
+        var source, sourceData, layer;
+        for (i = 0; i < len; i += 1) {
+            sourceData = getSourceDataById(blocks[i].id);
+            source = sourceData.source;
+            layer = helperComp.layers.add(source);
+            layer.transform['Anchor Point'].setValue([0, 0]);
+            layer.transform['Position'].setValue([blocks[i].fit.x + 2, blocks[i].fit.y + 2]);
+            assetsArray.push({
+                id: blocks[i].id,
+                w: blocks[i].w,
+                h: blocks[i].h,
+                x: blocks[i].fit.x + 2,
+                y: blocks[i].fit.y + 2,
+                p: 'images/atlas_' + '0' + '.png'
+            });
+        }
+        bm_eventDispatcher.log('assetsArray len: ' + assetsArray.length);
+        bm_renderManager.imagesReady(assetsArray);
+        var file = new File(folder.absoluteURI + '/atlas_' + '0' + '.png');
+        helperComp.saveFrameToPng(0, file);
+        helperComp.remove();
+    }
+    
+    function saveImages() {
+        if (ob.atlas) {
+            createAtlas();
+        } else {
+            saveNextImage();
+        }
+    }
+    
     function exportImages(path, assets, compId) {
         if (imageSources.length === 0) {
             bm_renderManager.imagesReady();
@@ -93,12 +160,12 @@
         assetsArray = assets;
         if (!folder.exists) {
             if (folder.create()) {
-                saveNextImage();
+                saveImages();
             } else {
                 bm_eventDispatcher.sendEvent('alert', 'folder failed to be created at: ' + folder.fsName);
             }
         } else {
-            saveNextImage();
+            saveImages();
         }
     }
     
@@ -127,16 +194,21 @@
         imageSources.length = 0;
         fonts.length = 0;
         imageCount = 0;
+        assetsArray = null;
     }
     
-    return {
+    ob = {
         checkCompSource: checkCompSource,
         checkImageSource: checkImageSource,
         setCompSourceId: setCompSourceId,
+        setAtlasData: setAtlasData,
         exportImages : exportImages,
         addFont : addFont,
         getFonts : getFonts,
+        atlas: true,
         reset: reset
     };
     
+    return ob;
+    
 }());
\ No newline at end of file
diff --git a/player/index.html b/player/index.html
index 137879b..26f0c17 100644
--- a/player/index.html
+++ b/player/index.html
@@ -40,6 +40,7 @@
     <script src="js/utils/bez.js"></script>
     <script src="js/utils/DataManager.js"></script>
     <script src="js/utils/FontManager.js"></script>
+    <script src="js/utils/ImageManager.js"></script>
     <script src="js/utils/expressions/ExpressionManager.js"></script>
     <script src="js/utils/expressions/ExpressionComp.js"></script>
     <script src="js/utils/expressions/ShapeInterface.js"></script>
diff --git a/player/js/elements/ImageElement.js b/player/js/elements/ImageElement.js
index 8ffadea..3fd27a3 100644
--- a/player/js/elements/ImageElement.js
+++ b/player/js/elements/ImageElement.js
@@ -10,15 +10,26 @@
     var self = this;
 
     var imageLoaded = function(){
-        self.innerElem.setAttributeNS('http://www.w3.org/1999/xlink','href',self.path+self.assetData.p);
+        var cv = document.createElement('canvas');
+        cv.width = self.assetData.w;
+        cv.height = self.assetData.h;
+        var ctx = cv.getContext('2d');
+        ctx.drawImage(img,self.assetData.x,self.assetData.y,self.assetData.w,self.assetData.h,0,0,self.assetData.w,self.assetData.h);
+        var dataUri = cv.toDataURL();
+        self.innerElem.setAttributeNS('http://www.w3.org/1999/xlink','href',dataUri);
+        //self.innerElem.setAttributeNS('http://www.w3.org/1999/xlink','href',self.path+self.assetData.p);
         self.maskedElement = self.innerElem;
+        ImageManager.unregisterImage(imgLoader);
     };
 
-    var img = new Image();
-    img.addEventListener('load', imageLoaded, false);
-    img.addEventListener('error', imageLoaded, false);
-
-    img.src = this.path+this.assetData.p;
+    var imgLoader = ImageManager.getImage(this.path+this.assetData.p);
+    var img = imgLoader.elem;
+    if(imgLoader.loaded) {
+        imageLoaded();
+    } else {
+        img.addEventListener('load', imageLoaded, false);
+        img.addEventListener('error', imageLoaded, false);
+    }
 
     this.parent.createElements.call(this);
 
diff --git a/player/js/utils/ImageManager.js b/player/js/utils/ImageManager.js
new file mode 100644
index 0000000..12cd903
--- /dev/null
+++ b/player/js/utils/ImageManager.js
@@ -0,0 +1,48 @@
+var ImageManager = (function(){
+
+    var images = [];
+    var ob = {};
+
+    function getImage(path){
+        var i = 0, len = images.length;
+        while(i<len) {
+            if(images[i].path === path){
+                images[i].count += 1;
+                return images[i];
+            }
+            i += 1;
+        }
+
+        function imageLoaded(){
+            imageOb.loaded = true;
+        }
+
+        var img = document.createElement('img');
+        img.addEventListener('load', imageLoaded, false);
+        img.addEventListener('error', imageLoaded, false);
+
+        var imageOb = {
+            elem: img,
+            path: path,
+            loaded: false,
+            count: 1
+        };
+        img.src = path;
+        images.push(imageOb);
+        return imageOb;
+    }
+
+    function unregisterImage(ob){
+        ob.count -= 1;
+        if(ob.count === 0) {
+            var ind = images.indexOf(ob);
+            images.splice(ind, 1);
+            ob.elem = null;
+        }
+    }
+
+    ob.getImage = getImage;
+    ob.unregisterImage = unregisterImage;
+
+    return ob;
+}());
\ No newline at end of file