diff --git a/cmstabs/migrations/0010_auto_20230715_2221.py b/cmstabs/migrations/0010_auto_20230715_2221.py
new file mode 100644
index 0000000000000000000000000000000000000000..05db45f0e6e7c5d425a42996dcc2ae3eb84532cb
--- /dev/null
+++ b/cmstabs/migrations/0010_auto_20230715_2221.py
@@ -0,0 +1,20 @@
+# Generated by Django 2.2 on 2023-07-15 22:21
+
+import django.core.validators
+from django.db import migrations
+import inkscape.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cmstabs', '0009_auto_20230621_1059'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='tab',
+            name='download',
+            field=inkscape.fields.FileImageFieldThumbailed(storage=inkscape.fields.CustomStorage(), upload_to='shields/backgrounds', validators=[django.core.validators.FileExtensionValidator(allowed_extensions=['svg', 'png', 'jpg', 'gif', 'webp'])], verbose_name='Background'),
+        ),
+    ]
diff --git a/cmstabs/models.py b/cmstabs/models.py
index da7bf47803c80b75cf8307480208048a4b486abd..00043be5dcb1a5ec60d2e6625f67922c4a4bfa82 100644
--- a/cmstabs/models.py
+++ b/cmstabs/models.py
@@ -35,6 +35,8 @@ from django.contrib.auth.models import Group
 
 from cms.models import CMSPlugin
 
+from inkscape.fields import FileImageFieldThumbailed
+
 from inkscape.fields import FileImageField
 
 from resources.models import License
@@ -66,7 +68,7 @@ class Tab(Model):
     link = URLField(_('External Link'), **null)
     name = CharField(max_length=64)
     user = ForeignKey(settings.AUTH_USER_MODEL, on_delete=SET_NULL, related_name='front_tabs', **null)
-    download = FileField(_('Background'), upload_to='shields/backgrounds')
+    download = FileImageFieldThumbailed(_('Background'), upload_to='shields/backgrounds',thumb_width=800)
     license = ForeignKey(License, on_delete=SET_NULL, null=True)
 
     order = IntegerField(editable=True, **null)
diff --git a/cmstabs/templates/cms/plugins/shield.html b/cmstabs/templates/cms/plugins/shield.html
index 80d159bde5520e213b5c058aff55d2d3a4270433..b4f08d95efc0637c6de162ec5fb6aedd25727ca8 100644
--- a/cmstabs/templates/cms/plugins/shield.html
+++ b/cmstabs/templates/cms/plugins/shield.html
@@ -5,7 +5,7 @@
 <div id="shield">
   <div id="banners">
     {% for tab in tabs %}
-      <div id="{{ tab.uuid }}" {% if tab == tabs.0 %}class="current"{% endif %} style="background-image: url({{ tab.download.url }});">
+      <div id="{{ tab.uuid }}" class="bannerimage {% if tab == tabs.0 %}current{% endif %}" data-bg = "{{ tab.download.url }}")">
         <div>
           {% if tab.banner_text %}
             <p class="text">{{ tab.banner_text }}</p>
@@ -34,3 +34,24 @@
     {% endfor %}
   </ul>
 </div>
+<script>
+  function renamefile(filename) {
+    var dotIndex = filename.lastIndexOf(".");
+    return filename.substring(0, dotIndex) + "_tb" + filename.substring(dotIndex);
+  }
+  $("#banners .bannerimage").each(function (i, el) {
+    if (window.screen.width < 500) {
+      fetch(renamefile($(el).data("bg")),
+        { method: "HEAD" }
+      ).then((res) => {
+        if (res.ok) {
+          $(el).prop("style", "background-image: url(" + renamefile($(el).data('bg')) + ")")
+        } else {
+          $(el).prop("style", "background-image: url(" + $(el).data('bg') + ")");
+        }
+      });
+    } else {
+      $(el).prop("style", "background-image: url(" + $(el).data('bg') + ")");
+    }
+  })
+</script>
\ No newline at end of file
diff --git a/inkscape/fields.py b/inkscape/fields.py
index b255c33c3429e1e8be6a7a29b6eb4b44696ffb74..0799f4b812e648f47f94983df480151ea6a35b25 100644
--- a/inkscape/fields.py
+++ b/inkscape/fields.py
@@ -166,13 +166,50 @@ class CustomStorage(FileSystemStorage):
     def __init__(self, *args, **kwargs):
         super(CustomStorage, self).__init__(*args, **kwargs)
 
+class CustomStorageThumbailed(CustomStorage):
+
+    @staticmethod
+    def _prefix_thumb(filename):
+        parts = filename.split('.')
+        parts[-2] = parts[-2] + "_tb"
+        return '.'.join(parts)
+    
+    @staticmethod
+    def _extension(filename):
+        parts = filename.split('.')
+        return parts[-1]
+
+    def save(self, name, content, max_length=None):
+        new_name = super(CustomStorageThumbailed, self).save(name, content, max_length)
+        thumb_name = self._prefix_thumb(os_path.join(self.location, new_name))
+        img = Image.open(os_path.join(self.location, new_name))
+        # In-place optional resize down to propotionate size
+        wpercent = (self.thumb_width/float(img.size[0]))
+        hsize = int((float(img.size[1])*float(wpercent)))
+        img.thumbnail((self.thumb_width, hsize), Image.ANTIALIAS)
+        img.save(thumb_name, format=self._extension(new_name))
+        return new_name
+
+    def __init__(self, thumb_width, *args, **kwargs):
+        self.thumb_width = thumb_width
+        super(CustomStorage, self).__init__(*args, **kwargs)
+
 class RestrictedFileField(FileField):
 
     def __init__(self, allowed, *args, **kwargs):
-        kwargs['storage'] = CustomStorage()
+        if 'thumb_width' in kwargs:
+            kwargs['storage'] = CustomStorageThumbailed(kwargs['thumb_width'])
+            kwargs.pop('thumb_width')
+        else:
+            kwargs['storage'] = CustomStorage()
         super(RestrictedFileField, self).__init__(*args, **dict(kwargs, validators=[FileExtensionValidator(allowed_extensions=allowed)]))
 
 class FileImageField(RestrictedFileField):
 
     def __init__(self, *args, **kwargs):
         super(FileImageField, self).__init__(["svg","png","jpg","gif","webp"], *args, **kwargs)
+
+class FileImageFieldThumbailed(FileImageField):
+
+    def __init__(self, *args, **kwargs):
+        super(FileImageFieldThumbailed, self).__init__(*args, **kwargs)
\ No newline at end of file