diff --git a/package.json b/package.json
index a81864032c45443e202ad168f1b14c0b3c3707ad..9bad1e75d96799bc5de2bd92629a9e58f00ce841 100644
--- a/package.json
+++ b/package.json
@@ -91,11 +91,11 @@
     "scratch-audio": "0.1.0-prerelease.1523977528",
     "scratch-blocks": "0.1.0-prerelease.1525125321",
     "scratch-l10n": "2.0.20180108132626",
-    "scratch-paint": "0.2.0-prerelease.20180426204040",
+    "scratch-paint": "0.2.0-prerelease.20180501202212",
     "scratch-render": "0.1.0-prerelease.20180427143155",
     "scratch-svg-renderer": "0.1.0-prerelease.20180423193917",
     "scratch-storage": "0.4.1",
-    "scratch-vm": "0.1.0-prerelease.1525095619",
+    "scratch-vm": "0.1.0-prerelease.1525209256",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.20.0",
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index 641d77380d01d254d91b3f95ac3b38234e91dd24..0a360ba33720d75acf8ea0f577596b39b4df8ea4 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -194,10 +194,13 @@ class CostumeTab extends React.Component {
     setFileInput (input) {
         this.fileInput = input;
     }
-    formatCostumeDetails (size) {
+    formatCostumeDetails (size, optResolution) {
+        // If no resolution is given, assume that the costume is an SVG
+        const resolution = optResolution ? optResolution : 1;
+        // Convert size to stage units by dividing by resolution
         // Round up width and height for scratch-flash compatibility
         // https://github.com/LLK/scratch-flash/blob/9fbac92ef3d09ceca0c0782f8a08deaa79e4df69/src/ui/media/MediaInfo.as#L224-L237
-        return `${Math.ceil(size[0])} x ${Math.ceil(size[1])}`;
+        return `${Math.ceil(size[0] / resolution)} x ${Math.ceil(size[1] / resolution)}`;
     }
     render () {
         const {
@@ -232,7 +235,7 @@ class CostumeTab extends React.Component {
         const costumeData = (target.costumes || []).map(costume => ({
             name: costume.name,
             assetId: costume.assetId,
-            details: costume.size ? this.formatCostumeDetails(costume.size) : null
+            details: costume.size ? this.formatCostumeDetails(costume.size, costume.bitmapResolution) : null
         }));
 
         return (
diff --git a/src/containers/paint-editor-wrapper.jsx b/src/containers/paint-editor-wrapper.jsx
index 331c0ff76314d1cf383314ddc037f42d6d9a5a6c..495df1a931c7ff64fe82a60c0fd05c2635c27da3 100644
--- a/src/containers/paint-editor-wrapper.jsx
+++ b/src/containers/paint-editor-wrapper.jsx
@@ -12,8 +12,8 @@ class PaintEditorWrapper extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleUpdateName',
-            'handleUpdateSvg'
+            'handleUpdateImage',
+            'handleUpdateName'
         ]);
     }
     componentDidMount () {
@@ -22,28 +22,42 @@ class PaintEditorWrapper extends React.Component {
     handleUpdateName (name) {
         this.props.vm.renameCostume(this.props.selectedCostumeIndex, name);
     }
-    handleUpdateSvg (svg, rotationCenterX, rotationCenterY) {
-        this.props.vm.updateSvg(this.props.selectedCostumeIndex, svg, rotationCenterX, rotationCenterY);
+    handleUpdateImage (isVector, image, rotationCenterX, rotationCenterY) {
+        if (isVector) {
+            this.props.vm.updateSvg(
+                this.props.selectedCostumeIndex,
+                image,
+                rotationCenterX,
+                rotationCenterY);
+        } else {
+            this.props.vm.updateBitmap(
+                this.props.selectedCostumeIndex,
+                image,
+                rotationCenterX,
+                rotationCenterY,
+                2 /* bitmapResolution */);
+        }
     }
     render () {
-        if (!this.props.svgId) return null;
+        if (!this.props.imageId) return null;
         return (
             <PaintEditor
                 {...this.props}
-                svg={this.props.vm.getCostume(this.props.selectedCostumeIndex)}
+                image={this.props.vm.getCostume(this.props.selectedCostumeIndex)}
+                onUpdateImage={this.handleUpdateImage}
                 onUpdateName={this.handleUpdateName}
-                onUpdateSvg={this.handleUpdateSvg}
             />
         );
     }
 }
 
 PaintEditorWrapper.propTypes = {
+    imageFormat: PropTypes.string.isRequired,
+    imageId: PropTypes.string.isRequired,
     name: PropTypes.string,
     rotationCenterX: PropTypes.number,
     rotationCenterY: PropTypes.number,
     selectedCostumeIndex: PropTypes.number.isRequired,
-    svgId: PropTypes.string,
     vm: PropTypes.instanceOf(VM)
 };
 
@@ -59,7 +73,8 @@ const mapStateToProps = (state, {selectedCostumeIndex}) => {
         name: costume && costume.name,
         rotationCenterX: costume && costume.rotationCenterX,
         rotationCenterY: costume && costume.rotationCenterY,
-        svgId: editingTarget && `${editingTarget}${costume.skinId}`,
+        imageFormat: costume && costume.dataFormat,
+        imageId: editingTarget && `${editingTarget}${costume.skinId}`,
         vm: state.vm
     };
 };