diff --git a/server/index.ts b/server/index.ts
index 7d0125f..c37c8fa 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -53,7 +53,7 @@ import main from './main'
         process.exit()
     }, 5000)
 
-    wss.on('connection', ws => {
+    wss.on('connection',async ws => {
         connection_count++
         if (connection_count > 1) return ws.close() // 忽略連線
         if (timeout) clearTimeout(timeout)
diff --git a/server/main.ts b/server/main.ts
index 5ca5258..cad420f 100644
--- a/server/main.ts
+++ b/server/main.ts
@@ -7,23 +7,11 @@ import { exec } from "child_process"
 
 // 監聽並回傳
 export default function (ws: _ws) {
-    ws.on("build", async ($data) => {
-        console.log("清空output")
-        const output = {
-            path: path("output"),
-            files: [] as string[],
-            wait: [] as Promise<void>[],
-        }
-        output.wait.push(
-            fs.readdir(output.path)
-                .then((files) => {
-                    for (const file of files) { output.wait.push(fs.unlink(path("output", file))) }
-                })
-                .catch(() => {
-                    output.wait.push(fs.mkdir(output.path))
-                })
-        )
+    ws.on("upload_config", async ($data) => config($data.data))
+    ws.on("config", async () => { return config() })
 
+    ws.on("build", async ($data) => {
+        const wait_clear = clear_output()
 
         console.log("設置構建")
         const data = $data.data
@@ -41,6 +29,10 @@ export default function (ws: _ws) {
                         return img
                     }).catch(() => {
                         console.warn("下載圖片失敗")
+                        ws.send("logger", {
+                            title: "下載圖片失敗",
+                            content: "請檢查網址是否正確",
+                        })
                         return false
                     })
                 })
@@ -76,7 +68,7 @@ export default function (ws: _ws) {
         }
 
         console.log("構建選項:", data.option)
-        await Promise.all(output.wait) //等待 output 刪除檔案
+        await wait_clear //等待 output 刪除檔案
         await worker("build", data.option, data.imgs.map(img => { return { name: img.name, base64img: img.data, } }))
 
         console.log("構建完成")
@@ -85,6 +77,37 @@ export default function (ws: _ws) {
         return true
     })
 
-    ws.on("upload_config", async ($data) => config($data.data))
-    ws.on("config", async () => { return config() })
+    ws.on("compression", async ($data) => {
+        const wait_clear = clear_output()
+        const data = $data.data
+
+        
+        console.log("壓縮選項:", data.option)
+        await wait_clear //等待 output 刪除檔案
+        await worker("compression", data.option, data.imgs)
+
+        console.log("壓縮完成")
+        exec(`start explorer "${path("output")}"`)
+
+        return true
+    })
+}
+
+function clear_output() {
+    console.log("清空output")
+    const output = {
+        path: path("output"),
+        files: [] as string[],
+        wait: [] as Promise<void>[],
+    }
+    output.wait.push(
+        fs.readdir(output.path)
+            .then((files) => {
+                for (const file of files) { output.wait.push(fs.unlink(path("output", file))) }
+            })
+            .catch(() => {
+                output.wait.push(fs.mkdir(output.path))
+            })
+    )
+    return Promise.all(output.wait)
 }
\ No newline at end of file
diff --git a/server/threads.ts b/server/threads.ts
index 9c82222..8b741e0 100644
--- a/server/threads.ts
+++ b/server/threads.ts
@@ -1,15 +1,16 @@
 import { workerData } from 'worker_threads'
 import { WorkerDataType } from 'VS/protocol'
-import { path } from './utils'
+import { hash, path } from './utils'
 import { extname, basename } from "path"
 import Jimp from 'jimp'
+import { exec as $exec } from 'child_process'
 
 // 多線程運算
-(async()=>{
-    const $type = workerData.type as keyof WorkerDataType
-    const { option:$option, data:$data } = workerData.data as WorkerDataType[typeof $type]
+(async($type:keyof WorkerDataType)=>{
+    const worker_data = workerData.data as unknown
     switch ($type) {
         case "build":{
+            const { option:$option, data:$data } = worker_data as WorkerDataType[typeof $type]
             for (const data of $data) {                
                 let img = await decode_image(data.base64img).catch(e=>{throw e})
                 img.resize($option.size,Jimp.AUTO)
@@ -39,8 +40,39 @@ import Jimp from 'jimp'
             }
             break;
         }
+        case "compression":{
+            const { option:$option, data:$data } = worker_data as WorkerDataType["compression"]
+            const pngquant = path("lib","pngquant.exe")
+            for (const data of $data) {                
+                const tmp = path("tmp","compression$" + data.name)
+                const out = path("output",data.name )
+
+                const img = await decode_image(data.data).catch(e=>{throw e})
+                if(img.getMIME() === Jimp.MIME_JPEG){
+                    await img.quality($option.quality[1]).writeAsync(out)
+                }else{
+                    await img.writeAsync(tmp)
+                    await exec(tmp,out)
+                }
+            }
+
+            function exec(tmp_path:string,output_path:string):Promise<void> {
+                const quality = $option.quality[0] + "-" + $option.quality[1]
+                const speed = $option.speed
+                return new Promise(resolve=>{
+                    const cmd = `\"${pngquant}\" --quality ${quality} --speed ${speed} - < \"${tmp_path}\" > \"${output_path}\"`
+                    console.log(cmd)
+                    $exec(cmd,{ encoding: 'utf8' },
+                    (e,s,stderr)=>{
+                        if(e) console.error(e,stderr)
+                        resolve()
+                    })
+                })
+            }
+            break;
+        }
     }
-})()
+})(workerData.type)
 
 
 
diff --git a/server/utils.ts b/server/utils.ts
index 2f00248..1e7f800 100644
--- a/server/utils.ts
+++ b/server/utils.ts
@@ -74,4 +74,6 @@ async function worker<T extends keyof WorkerDataType>
     return Promise.all(worker_threads)
 }
 
-export { config, path, worker }
\ No newline at end of file
+function hash(){ let result = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; for (let i = 0; i < 12; i++)result += characters.charAt(Math.floor(Math.random() * 62)); return result }
+
+export { config, path, worker, hash }
\ No newline at end of file
diff --git a/server/websocket.ts b/server/websocket.ts
index 7c5d8b3..8a713ce 100644
--- a/server/websocket.ts
+++ b/server/websocket.ts
@@ -1,3 +1,4 @@
+import { hash as $hash } from "./utils"
 import { DataType } from "VS/protocol"
 import SocketServer = require('ws')
 
@@ -63,7 +64,7 @@ export default class {
 
     get<T extends keyof DataType>(key: T, data: DataType[T]["req"]): Promise<WebSocketEvent<T>["receiver"]>
     async get(key: string, data: any) {
-        const hash = this._hash()
+        const hash = $hash()
         const req = JSON.stringify({ key: key, data: data, type: "get", hash } as WebSocketEvent["sender"])
         this.ws.send(req)
         return new Promise((resolve, reject) => this._sync_list[hash] = resolve)
@@ -73,7 +74,6 @@ export default class {
     event: { [key: string]: (enevt: WebSocketEvent["sender"]) => any } = {}
     private _info = "|websocket|"
     private _sync_list: { [hash: string]: (req: WebSocketEvent["receiver"]) => void } = {}
-    private _hash() { let result = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; for (let i = 0; i < 12; i++)result += characters.charAt(Math.floor(Math.random() * 62)); return result }
 }
 
 interface WebSocketEvent<T extends keyof DataType = keyof DataType> {
diff --git a/types/protocol/index.d.ts b/types/protocol/index.d.ts
index aa67dca..eaa8ae0 100644
--- a/types/protocol/index.d.ts
+++ b/types/protocol/index.d.ts
@@ -5,8 +5,8 @@ export interface DataType
         req : {
             option:DataType["build"]["option"],
             imgs:{
-                name: string,
-                data: string,
+                name: string, // 圖片名稱
+                data: string, // 圖片base64
             }[]
         },
         option:{
@@ -20,6 +20,21 @@ export interface DataType
         },
         resolve:boolean,
     },
+    compression:{
+        req : {
+            option:DataType["compression"]["option"],
+            imgs:{
+                name: string, // 圖片名稱
+                data: string, // 圖片base64
+            }[]
+        },
+        option:{
+            quality:[number,number],
+            speed:number
+        },
+        resolve:boolean,
+    },
+    //
     config:{
         req:undefined,
         resolve:config
@@ -32,6 +47,13 @@ export interface DataType
         }[]
         resolve:void
     }
+    logger:{
+        req:{
+            title: string;
+            content: string;
+        },
+        resolve:void
+    }
 }
 
 export interface WorkerDataType
@@ -43,4 +65,11 @@ export interface WorkerDataType
             base64img: string;
         }[]
     }
+    compression:{
+        option:DataType["compression"]["option"],
+        data:{
+            name: string;
+            data: string;
+        }[]
+    }
 }
\ No newline at end of file
diff --git a/view/src/components/logger.vue b/view/src/components/logger.vue
index b9eff6f..bc9f947 100644
--- a/view/src/components/logger.vue
+++ b/view/src/components/logger.vue
@@ -20,6 +20,11 @@ export default defineComponent({
       logger: toRef(useStore().state, "logger"),
     };
   },
+  created() {
+    this.$ws.on("logger", (log) => {
+      this.logger.push(log.data);
+    });
+  },
 });
 </script>
 
diff --git a/view/src/components/view_files.vue b/view/src/components/view_files.vue
index 1e51d50..20923b1 100644
--- a/view/src/components/view_files.vue
+++ b/view/src/components/view_files.vue
@@ -48,7 +48,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-const preview_length = localStorage.getItem("preview_length");
+const preview_length = localStorage.getItem(
+  "steam_design_tools$preview_length"
+);
 
 export default defineComponent({
   props: {
@@ -76,7 +78,10 @@ export default defineComponent({
   watch: {
     preview_size: {
       handler(val) {
-        localStorage.setItem("preview_length", val.toString());
+        localStorage.setItem(
+          "steam_design_tools$preview_length",
+          val.toString()
+        );
       },
       immediate: true,
     },
diff --git a/view/src/main.ts b/view/src/main.ts
index 0729d5d..de1deb2 100644
--- a/view/src/main.ts
+++ b/view/src/main.ts
@@ -8,10 +8,7 @@ addEventListener("resize", () => window.resizeTo(1200, 600));
 window.resizeTo(1200, 600);
 
 const ws = (window.ws = new _ws());
-
-console.log("啟動GUI");
 const app = createApp(App);
-
 const app_prop = app.config.globalProperties;
 app_prop.$ws = ws;
 
diff --git a/view/src/router/index.ts b/view/src/router/index.ts
index ca9c56c..b79529f 100644
--- a/view/src/router/index.ts
+++ b/view/src/router/index.ts
@@ -10,6 +10,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "首頁",
     component: Home,
   },
+  {
+    path: "/compression",
+    name: "壓縮",
+    component: import_vue("compression"),
+  },
   //
   {
     path: "/settings",
diff --git a/view/src/views/compression.vue b/view/src/views/compression.vue
new file mode 100644
index 0000000..e81ed8b
--- /dev/null
+++ b/view/src/views/compression.vue
@@ -0,0 +1,336 @@
+<template>
+  <main>
+    <div class="img_editor">
+      <transition name="fade" mode="out-in">
+        <ChooseFiles v-if="imgs.length === 0" @files="upload" />
+        <div v-else class="preview_and_setting">
+          <ViewFiles :imgs="imgs" @re_choose="re_choose" />
+          <div class="edit_setting">
+            <h2 class="select_compression_type">壓縮圖片</h2>
+            <div class="select_compression_list">
+              <div>
+                最高畫質
+                <div>
+                  <input
+                    type="number"
+                    v-model="edit_setting.quality[1]"
+                    @change="max_quality"
+                  />
+                  <button @click="max_quality(true)">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      class="bi bi-plus-lg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"
+                      />
+                    </svg>
+                  </button>
+                  <button @click="max_quality(false)">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      class="bi bi-dash-lg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                最低畫質
+                <div>
+                  <input
+                    type="number"
+                    v-model="edit_setting.quality[0]"
+                    @change="min_quality"
+                  />
+                  <button @click="min_quality(true)">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      class="bi bi-plus-lg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"
+                      />
+                    </svg>
+                  </button>
+                  <button @click="min_quality(false)">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      class="bi bi-dash-lg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <div>
+                壓縮速度
+                <div>
+                  <button @click="speed(true)">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      class="bi bi-plus-lg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"
+                      />
+                    </svg>
+                  </button>
+                  <input disabled type="number" v-model="edit_setting.speed" />
+                  <button @click="speed(false)">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      fill="currentColor"
+                      class="bi bi-dash-lg"
+                      viewBox="0 0 16 16"
+                    >
+                      <path
+                        d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              <button @click="compression">開始壓縮</button>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </main>
+</template>
+
+<script lang="tsx">
+import { defineComponent } from "vue";
+import ChooseFiles from "@/components/choose_files.vue";
+import ViewFiles from "@/components/view_files.vue";
+import { mixin } from "@/store";
+import { DataType } from "VS/protocol";
+
+export default defineComponent({
+  components: {
+    ChooseFiles,
+    ViewFiles,
+  },
+
+  mixins: [mixin],
+
+  data() {
+    let edit_setting: DataType["compression"]["req"]["option"];
+    const save = localStorage.getItem("steam_design_tools$compression_setting");
+    if (save) {
+      edit_setting = JSON.parse(save);
+    } else {
+      edit_setting = {
+        quality: [60, 100],
+        speed: 1,
+      };
+    }
+    return {
+      imgs: [] as { name: string; link_url: string; file: File }[],
+      edit_setting,
+    };
+  },
+
+  watch: {
+    edit_setting: {
+      handler(val: DataType["compression"]["req"]["option"]) {
+        localStorage.setItem(
+          "steam_design_tools$compression_setting",
+          JSON.stringify(val)
+        );
+      },
+      deep: true,
+    },
+  },
+
+  methods: {
+    upload($files: FileList): void {
+      const imgs = [] as { name: string; link_url: string; file: File }[];
+      const files = Array.from($files); //轉換成陣列
+      for (const file of files) {
+        //驗證檔案類型
+        if (!/\.(jpe?g|png)$/i.test(file.name)) {
+          this.log(`錯誤類型`, "");
+          return;
+        }
+        const name = file.name;
+        const link_url = URL.createObjectURL(file);
+        imgs.push({ name, link_url, file });
+      }
+      this.imgs = imgs.sort((a, b) => {
+        return a.name.localeCompare(b.name);
+      });
+      console.log("加載完成");
+    },
+
+    re_choose(): void {
+      this.imgs = [];
+    },
+
+    async compression(): Promise<void> {
+      this.loading(true);
+      const reader = new FileReader();
+      const imgs = [] as DataType["compression"]["req"]["imgs"];
+      for (const img of this.imgs) {
+        const data = (await read_img(img.file)) as string;
+        imgs.push({
+          name: img.name,
+          data,
+        });
+      }
+
+      const option = this.edit_setting;
+      await this.$ws.get("compression", { option, imgs });
+      this.loading(false);
+
+      function read_img(img: File) {
+        return new Promise((resolve) => {
+          reader.onload = () => resolve(reader.result);
+          reader.readAsDataURL(img);
+        });
+      }
+    },
+
+    speed(bool: boolean): void {
+      let speed = this.edit_setting.speed + (bool ? 1 : -1);
+
+      if (speed < 1) this.edit_setting.speed = 1;
+      else if (speed > 10) this.edit_setting.speed = 10;
+      else this.edit_setting.speed = speed;
+    },
+
+    max_quality(e: Event | boolean): void {
+      let quality;
+      if (typeof e === "boolean")
+        quality = this.edit_setting.quality[1] + (e ? 10 : -10);
+      else quality = (e.target as HTMLInputElement).valueAsNumber;
+
+      if (quality > 100) quality = 100;
+      else if (quality < 20) quality = 20;
+      if (quality < this.edit_setting.quality[0])
+        this.edit_setting.quality[0] = quality;
+
+      this.edit_setting.quality[1] = quality;
+    },
+
+    min_quality(e: Event | boolean): void {
+      let quality;
+      if (typeof e === "boolean")
+        quality = this.edit_setting.quality[0] + (e ? 10 : -10);
+      else quality = (e.target as HTMLInputElement).valueAsNumber;
+
+      if (quality > 100) quality = 100;
+      else if (quality < 20) quality = 20;
+      if (quality > this.edit_setting.quality[1])
+        this.edit_setting.quality[1] = quality;
+
+      this.edit_setting.quality[0] = quality;
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../app.scss";
+.img_editor {
+  width: 100%;
+  .preview_and_setting {
+    display: flex;
+    & > div {
+      background: $side-3;
+    }
+    .edit_setting {
+      max-width: 30%;
+    }
+  }
+}
+
+.select_compression_type {
+  position: relative;
+  font-weight: 800;
+  color: $main;
+  background-color: $side-2;
+  padding-right: 2em;
+  margin: 0;
+  min-width: 20%;
+  padding: 0.1em 4em 0.1em 0.2em;
+  word-break: keep-all;
+  border-bottom: $border;
+}
+
+.select_compression_list {
+  margin: 0.4em;
+  & > div {
+    padding: 0.2em 0;
+    font-weight: 800;
+    & > div {
+      border: $border;
+      display: inline-flex;
+      align-items: stretch;
+      & > input,
+      & > button {
+        background-color: $bg;
+        text-align: center;
+        font-weight: 800;
+        padding: 0.4em;
+        border: none;
+        color: $main;
+        &:hover {
+          background-color: $side-2;
+        }
+      }
+      & > input {
+        padding: 0;
+        width: 100%;
+        font-size: 1.2em;
+      }
+      & > button {
+        padding: 0.25em 0.5em;
+      }
+    }
+  }
+
+  & > button {
+    width: 100%;
+    font-size: 1.6em;
+    margin-top: 0.6em;
+    background-color: $side-2;
+    border: none;
+    color: $main;
+    cursor: pointer;
+    transition: background-color 0.16s;
+    &:hover {
+      background-color: $bg;
+    }
+  }
+}
+</style>
diff --git a/view/src/views/home.vue b/view/src/views/home.vue
index d43cec9..d14729e 100644
--- a/view/src/views/home.vue
+++ b/view/src/views/home.vue
@@ -103,7 +103,6 @@ export default defineComponent({
       };
     return {
       imgs: [] as { name: string; link_url: string; file: File }[],
-      dragenter: 0,
       show_build_type_list: false,
       edit_setting,
       build_type: [
@@ -135,7 +134,7 @@ export default defineComponent({
     get_bg_url(event: Event) {
       let url = (event.target as HTMLInputElement).value?.trim();
 
-      if (!/\.(gif|jpe?g|png)$/i.test(url) || url.indexOf("http") !== 0)
+      if (!/\.(jpe?g|png)$/i.test(url) || url.indexOf("http") !== 0)
         return (this.edit_setting.background.url = "");
 
       const index = url.indexOf("steam.design/#"); // length === 14
@@ -149,7 +148,7 @@ export default defineComponent({
       const files = Array.from($files); //轉換成陣列
       for (const file of files) {
         //驗證檔案類型
-        if (!/\.(gif|jpe?g|png)$/i.test(file.name)) {
+        if (!/\.(jpe?g|png)$/i.test(file.name)) {
           this.log(`錯誤類型`, "");
           return;
         }
diff --git a/view/src/views/settings.vue b/view/src/views/settings.vue
index f683d60..0a92b14 100644
--- a/view/src/views/settings.vue
+++ b/view/src/views/settings.vue
@@ -102,7 +102,9 @@ export default defineComponent({
     },
   },
   async created() {
-    this.$ws.get("config", undefined).then((res) => (this.config = res.data));
+    this.$ws
+      .get("config", undefined)
+      .then((res) => (this.config = Object.assign(this.config, res.data)));
   },
 });
 </script>