diff --git a/package.json b/package.json
index 208638a..54775bc 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@mdi/font": "^7.4.47",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
+    "mime-types": "^2.1.35",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.0",
diff --git a/src/views/art/ArtView.vue b/src/views/art/ArtView.vue
index 91920a1..8385bd5 100644
--- a/src/views/art/ArtView.vue
+++ b/src/views/art/ArtView.vue
@@ -56,6 +56,7 @@ import { useArkwaifu } from '@/stores/arkwaifu-api'
 import { storeToRefs } from 'pinia'
 import { useMetaStore } from '@/stores/meta'
 import ArtPanel from '@/components/art/ArtPanel.vue'
+import mime from 'mime-types'
 
 const props = defineProps<{
   id: string
@@ -78,16 +79,15 @@ watchEffect(async () => {
   }
 })
 
-function filename(variant: Variant): string {
+function filename(variant: Variant, format: string): string {
   let filename = variant.artID
-  if (variant.variation != Variation.Origin) {
-    filename += `.${variant.variation}`
-  }
+  if (variant.variation != Variation.Origin) filename += `.${variant.variation}`
+  filename += `.${mime.extension(format)}`
   return filename
 }
 
 function download(variant: Variant, format: string) {
-  const name = filename(variant)
+  const name = filename(variant, format)
   const url = api.contentSrcOf(variant.artID, variant.variation)
   if (format == 'image/webp') {
     saveAs(url, name)
diff --git a/yarn.lock b/yarn.lock
index 0e4b2ec..7c8ef57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1676,6 +1676,7 @@ __metadata:
     eslint-plugin-vue: "npm:^9.20.1"
     file-saver: "npm:^2.0.5"
     lodash: "npm:^4.17.21"
+    mime-types: "npm:^2.1.35"
     npm-run-all: "npm:^4.1.5"
     pinia: "npm:^2.1.7"
     prettier: "npm:^3.2.4"
@@ -3740,6 +3741,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime-db@npm:1.52.0":
+  version: 1.52.0
+  resolution: "mime-db@npm:1.52.0"
+  checksum: 10/54bb60bf39e6f8689f6622784e668a3d7f8bed6b0d886f5c3c446cb3284be28b30bf707ed05d0fe44a036f8469976b2629bbea182684977b084de9da274694d7
+  languageName: node
+  linkType: hard
+
+"mime-types@npm:^2.1.35":
+  version: 2.1.35
+  resolution: "mime-types@npm:2.1.35"
+  dependencies:
+    mime-db: "npm:1.52.0"
+  checksum: 10/89aa9651b67644035de2784a6e665fc685d79aba61857e02b9c8758da874a754aed4a9aced9265f5ed1171fd934331e5516b84a7f0218031b6fa0270eca1e51a
+  languageName: node
+  linkType: hard
+
 "mimic-fn@npm:^2.1.0":
   version: 2.1.0
   resolution: "mimic-fn@npm:2.1.0"