diff --git a/dashboard/src/api/resize-media.ts b/dashboard/src/api/resize-media.ts
new file mode 100644
index 00000000..baff1df4
--- /dev/null
+++ b/dashboard/src/api/resize-media.ts
@@ -0,0 +1,18 @@
+const discordCDNAttachmentRegex =
+  /^https:\/\/cdn\.discordapp\.com\/attachments\/([^?]+)/i
+
+const resizeMedia = (
+  mediaURL: string,
+  dimensions?: number[],
+  format?: string,
+) =>
+  mediaURL.replace(
+    discordCDNAttachmentRegex,
+    `https://media.discordapp.net/attachments/$1?width=${
+      dimensions?.[0] ?? 256
+    }&height=${dimensions?.[1] ?? dimensions?.[0] ?? 256}&format=${
+      format ?? 'webp'
+    }`,
+  )
+
+export default resizeMedia
diff --git a/dashboard/src/lib/CardsHeader.svelte b/dashboard/src/lib/CardsHeader.svelte
index 3cab06ad..9b877c33 100644
--- a/dashboard/src/lib/CardsHeader.svelte
+++ b/dashboard/src/lib/CardsHeader.svelte
@@ -2,6 +2,7 @@
     import { tick } from 'svelte';
     import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
     import default_avatar from '../assets/default_avatar.png';
+    import resizeMedia from '../api/resize-media';
     import { toHTML } from 'discord-markdown';
     import twemoji from 'twemoji';
 
@@ -19,6 +20,7 @@
     }
 
     $: icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
+    $: icon_url_resized = resizeMedia(icon_url)
 
     let avatarOpen = false;
     const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
@@ -45,7 +47,7 @@
         </div>
         <div>
         {#if item && (item.avatar_url || item.icon)}
-        <img tabindex={0} on:keydown|stopPropagation={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click|stopPropagation={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt={altText} />
+        <img tabindex={0} on:keydown|stopPropagation={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click|stopPropagation={toggleAvatarModal} class="rounded-circle avatar" src={icon_url_resized} alt={altText} />
         {:else}
         <img class="rounded-circle avatar" src={default_avatar} alt="icon (default)" tabindex={0} />
         {/if}
@@ -55,4 +57,4 @@
                 <img class="d-block m-auto img-thumbnail" src={icon_url} alt={altText} tabindex={0} use:focus/>
             </div>
         </Modal>
-    </CardTitle>
\ No newline at end of file
+    </CardTitle>
diff --git a/dashboard/src/lib/group/Body.svelte b/dashboard/src/lib/group/Body.svelte
index 0a6d2ce0..dd7368bf 100644
--- a/dashboard/src/lib/group/Body.svelte
+++ b/dashboard/src/lib/group/Body.svelte
@@ -4,6 +4,7 @@
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
     import parseTimestamps from '../../api/parse-timestamps';
+    import resizeMedia from '../../api/resize-media';
     import Edit from './Edit.svelte';
     import twemoji from 'twemoji';
     import Privacy from './Privacy.svelte';
@@ -124,7 +125,7 @@
     {@html htmlDescription && htmlDescription}
 </div>
 {#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-<img src={group.banner} alt="group banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
+<img src={resizeMedia(group.banner, [1200, 480])} alt="group banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover"/>
 {/if}
 
 {#if !isPublic}
@@ -165,4 +166,4 @@
             margin-left: 0.25em;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/dashboard/src/lib/member/Body.svelte b/dashboard/src/lib/member/Body.svelte
index 5ec3c17d..568fa3fd 100644
--- a/dashboard/src/lib/member/Body.svelte
+++ b/dashboard/src/lib/member/Body.svelte
@@ -4,6 +4,7 @@
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
     import parseTimestamps from '../../api/parse-timestamps';
+    import resizeMedia from '../../api/resize-media';
     import twemoji from 'twemoji';
 
     import GroupEdit from './GroupEdit.svelte';
@@ -174,7 +175,7 @@
         {@html htmlDescription && htmlDescription}
     </div>
     {#if (member.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-    <img src={member.banner} alt="member banner" class="w-100 mb-3 rounded" style="max-height: 17em; object-fit: cover"/>
+    <img src={resizeMedia(member.banner, [1200, 480])} alt="member banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover"/>
     {/if}
     {#if !isPublic}
     <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit member information">Edit</Button>
diff --git a/dashboard/src/lib/system/Body.svelte b/dashboard/src/lib/system/Body.svelte
index f97509c5..4a5c933b 100644
--- a/dashboard/src/lib/system/Body.svelte
+++ b/dashboard/src/lib/system/Body.svelte
@@ -3,6 +3,7 @@
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
     import parseTimestamps from '../../api/parse-timestamps';
+    import resizeMedia from '../../api/resize-media';
     import twemoji from 'twemoji';
 
     import { System } from '../../api/types';
@@ -88,7 +89,7 @@
     {@html htmlDescription}
 </div>
 {#if (user.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-<img src={user.banner} alt="system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
+<img src={resizeMedia(user.banner, [1200, 480])} alt="system banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover"/>
 {/if}
 {#if !isPublic}
 <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system information">Edit</Button>