diff --git a/formwidgets/Responsiveimage.php b/formwidgets/Responsiveimage.php
index 76b6ec6..43bd93b 100644
--- a/formwidgets/Responsiveimage.php
+++ b/formwidgets/Responsiveimage.php
@@ -75,15 +75,20 @@ class Responsiveimage extends FormWidgetBase
     protected function prepareVars()
     {
         $this->vars['aspectRatio'] = $this->aspectRatio
-            ? str_replace('"', "'", json_encode(explode(' / ', $this->aspectRatio)))
+            ? $this->vueParam(explode(' / ', $this->aspectRatio))
             : 'null';
         $this->vars['minWidth'] = $this->minWidth ?: '0';
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->getLoadValue() ?: 'null';
         $this->vars['meta'] = $this->getLoadValue()
-            ? str_replace('"', "'", json_encode(app(UploadStorage::class)->getFileData($this->getLoadValue())))
+            ? $this->vueParam(app(UploadStorage::class)->getFileData($this->getLoadValue()))
             : 'null';
         $this->vars['model'] = $this->model;
+        $this->vars['croppableTypes'] = $this->vueParam(SourceFile::$croppableTypes);
+    }
+
+    private function vueParam($config) {
+        return str_replace('"', "'", json_encode($config));
     }
 
     /**
@@ -100,11 +105,11 @@ class Responsiveimage extends FormWidgetBase
      */
     public function getSaveValue($value)
     {
-        return $value;
+        return is_numeric($value) ? $value : null;
     }
 
     public function getLoadValue() {
-        return is_numeric(parent::getLoadValue()) ? parent::getLoadValue() : null;
+        return is_numeric(parent::getLoadValue()) ? parent::getLoadValue() : '';
     }
 
     /**
diff --git a/formwidgets/responsiveimage/assets/src/popup.mixin.js b/formwidgets/responsiveimage/assets/src/popup.mixin.js
index 4470f49..914c47f 100644
--- a/formwidgets/responsiveimage/assets/src/popup.mixin.js
+++ b/formwidgets/responsiveimage/assets/src/popup.mixin.js
@@ -11,7 +11,7 @@ export default {
         onChangeCrop() {
             this.popup.values.crop = this.jcrop.tellSelect();
         },
-        showPopup(file) {
+        showPopup(file, cro) {
             var _cls = this;
             this.popup = {
                 file: file,
@@ -31,15 +31,17 @@ export default {
                     imageElement.src = file.dataURL;
                     $cropContainer.append(imageElement);
 
-                    var jcropOptions = {
-                        shade: true,
-                        boxWidth: $cropContainer.width(),
-                        onChange: _cls.onChangeCrop,
-                        aspectRatio: _cls.realAspectRatio,
-                        minSize: [_cls.cropOptions.minWidth, 0]
-                    };
+                    if (_cls.cropOptions.types.some(type => type == file.type)) {
+                        var jcropOptions = {
+                            shade: true,
+                            boxWidth: $cropContainer.width(),
+                            onChange: _cls.onChangeCrop,
+                            aspectRatio: _cls.realAspectRatio,
+                            minSize: [_cls.cropOptions.minWidth, 0]
+                        };
 
-                    _cls.jcrop = $.Jcrop($popup.find('[data-jcrop] img').get(0), jcropOptions);
+                        _cls.jcrop = $.Jcrop($popup.find('[data-jcrop] img').get(0), jcropOptions);
+                    }
 
                     $popup.on('change', '[name=title]', (e) => { _cls.popup.values.title = e.target.value });
                     $popup.on('change', '[name=description]', (e) => { _cls.popup.values.description = e.target.value });
diff --git a/formwidgets/responsiveimage/partials/_responsiveimage.htm b/formwidgets/responsiveimage/partials/_responsiveimage.htm
index 4e69511..547a9cf 100644
--- a/formwidgets/responsiveimage/partials/_responsiveimage.htm
+++ b/formwidgets/responsiveimage/partials/_responsiveimage.htm
@@ -13,6 +13,7 @@
                 :crop-options="{
                     aspectRatio: <?= $aspectRatio ?>,
                     minWidth: <?= $minWidth ?>,
+                    types: <?= $croppableTypes; ?>
                 }"
                 :value="<?= $value; ?>"
                 :meta="<?= $meta; ?>"
diff --git a/models/SourceFile.php b/models/SourceFile.php
index 4660791..858299f 100644
--- a/models/SourceFile.php
+++ b/models/SourceFile.php
@@ -12,7 +12,7 @@ class SourceFile extends Model
 
     protected $slugs = ['slug' => 'basename'];
 
-    protected $croppableTypes = [ 'image/jpeg', 'image/gif', 'image/png', 'image/webp' ];
+    public static $croppableTypes = [ 'image/jpeg', 'image/gif', 'image/png', 'image/webp' ];
 
     /**
      * @var string The database table used by the model.
@@ -63,6 +63,6 @@ class SourceFile extends Model
     }
 
     public function isCroppable(): bool {
-        return in_array($this->type, $this->croppableTypes);
+        return in_array($this->type, static::$croppableTypes);
     }
 }