diff --git a/addons/web_editor/controllers/main.py b/addons/web_editor/controllers/main.py
index 66642c8b985..fc5c257ddaa 100644
--- a/addons/web_editor/controllers/main.py
+++ b/addons/web_editor/controllers/main.py
@@ -18,7 +18,7 @@ from odoo.exceptions import UserError
 from odoo.modules.module import get_module_path, get_resource_path
 from odoo.tools.misc import file_open
 
-from ..models.ir_attachment import SUPPORTED_IMAGE_MIMETYPES
+from ..models.ir_attachment import SUPPORTED_IMAGE_EXTENSIONS, SUPPORTED_IMAGE_MIMETYPES
 
 logger = logging.getLogger(__name__)
 DEFAULT_LIBRARY_ENDPOINT = 'https://media-api.odoo.com'
@@ -163,11 +163,19 @@ class Web_Editor(http.Controller):
         return True
 
     @http.route('/web_editor/attachment/add_data', type='json', auth='user', methods=['POST'], website=True)
-    def add_data(self, name, data, quality=0, width=0, height=0, res_id=False, res_model='ir.ui.view', **kwargs):
-        try:
-            data = tools.image_process(data, size=(width, height), quality=quality, verify_resolution=True)
-        except UserError:
-            pass  # not an image
+    def add_data(self, name, data, is_image, quality=0, width=0, height=0, res_id=False, res_model='ir.ui.view', **kwargs):
+        if is_image:
+            format_error_msg = _("Uploaded image's format is not supported. Try with: %s", ', '.join(SUPPORTED_IMAGE_EXTENSIONS))
+            try:
+                data = tools.image_process(data, size=(width, height), quality=quality, verify_resolution=True)
+                img_extension = tools.base64_to_image(data).format.lower()
+                if img_extension not in [ext.replace('.', '') for ext in SUPPORTED_IMAGE_EXTENSIONS]:
+                    return {'error': format_error_msg}
+            except UserError:
+                # considered as an image by the brower file input, but not
+                # recognized as such by PIL, eg .webp
+                return {'error': format_error_msg}
+
         self._clean_context()
         attachment = self._attachment_create(name=name, data=data, res_id=res_id, res_model=res_model)
         return attachment._get_media_info()
diff --git a/addons/web_editor/models/ir_attachment.py b/addons/web_editor/models/ir_attachment.py
index 068e52f7f67..46e509cd761 100644
--- a/addons/web_editor/models/ir_attachment.py
+++ b/addons/web_editor/models/ir_attachment.py
@@ -5,7 +5,9 @@ from werkzeug.urls import url_quote
 
 from odoo import api, models, fields, tools
 
-SUPPORTED_IMAGE_MIMETYPES = ['image/gif', 'image/jpe', 'image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/svg+xml']
+SUPPORTED_IMAGE_MIMETYPES = ['image/gif', 'image/jpe', 'image/jpeg', 'image/jpg', 'image/png', 'image/svg+xml']
+SUPPORTED_IMAGE_EXTENSIONS = ['.gif', '.jpe', '.jpeg', '.jpg', '.png', '.svg']
+
 
 class IrAttachment(models.Model):
 
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
index 28b8839ad4a..b0da7a8ce3b 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media.js
@@ -583,6 +583,7 @@ var FileWidget = SearchableMediaWidget.extend({
                             'data': result.split(',')[1],
                             'res_id': this.options.res_id,
                             'res_model': this.options.res_model,
+                            'is_image': this.widgetType === 'image',
                             'width': 0,
                             'quality': 0,
                         }
@@ -779,7 +780,13 @@ var FileWidget = SearchableMediaWidget.extend({
             },
         }).then(attachment => {
             $progressBar.find('.fa-spinner, .progress').addClass('d-none');
-            $progressBar.find('.js_progressbar_txt .text-success').removeClass('d-none');
+            if (attachment.error) {
+                this.hasError = true;
+                $progressBar.find('.js_progressbar_txt .text-danger').removeClass('d-none');
+                $progressBar.find('.js_progressbar_txt .text-danger .o_we_error_text').text(attachment.error);
+            } else {
+                $progressBar.find('.js_progressbar_txt .text-success').removeClass('d-none');
+            }
             return attachment;
         }).guardedCatch(() => {
             this.hasError = true;
@@ -806,6 +813,7 @@ var ImageWidget = FileWidget.extend({
      */
     init: function (parent, media, options) {
         this.searchService = 'all';
+        this.widgetType = 'image';
         options = _.extend({
             accept: 'image/*',
             mimetypeDomain: [['mimetype', 'in', this.IMAGE_MIMETYPES]],
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index e0cf05ae981..49f39a47bd5 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -289,7 +289,7 @@
             </div>
             <div class='js_progressbar_txt'>
                 <span class="text-success d-none"><i class='fa fa-check'/> File has been uploaded</span>
-                <span class="text-danger d-none"><i class='fa fa-times'/> File could not be saved</span>
+                <span class="text-danger d-none"><i class='fa fa-times float-left m-1'/> <span class="o_we_error_text">File could not be saved</span></span>
             </div>
             <div class="progress">
                 <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div>