Image Format Converter

圖片格式轉換器

互轉 PNG、JPG、WebP、AVIF — 拖放即用、即時下載。所有運算都在瀏覽器內,影像位元組不會離開你的分頁。

圖片格式轉換器 — TL;DR

互轉 PNG、JPG、WebP、AVIF — 拖放即用、即時下載。所有運算都在瀏覽器內,影像位元組不會離開你的分頁。

不會。整個工具就是這個分頁裡的 JavaScript。圖片用 createImageBitmap 解碼、畫到 canvas、再用 canvas.toBlob 重新編碼 — 每一步都在瀏覽器內完成。打開 DevTools → Network 即可驗證:轉檔過程中不會發出任何請求。可以放心使用個人照片、螢幕截圖、設計檔與機密文件。

PNG 是無損 — 每個像素完整保留。JPG 是有損,最擅長處理連續色階的照片。如果你的 PNG 是螢幕截圖、線稿或大色塊,JPG 反而比 PNG 壓得差,檔案就變大。截圖或 UI 素材建議維持 PNG 或改用 WebP;JPG 適合風景人像照片。

照片含位置與人臉、螢幕截圖可能含密碼、設計稿是還沒公布的產品功能 — 把這些貼到別人的伺服器,就是悄悄的資料外洩。iKit 的轉換器只是已載入瀏覽器分頁的 JavaScript。

僅對有損格式生效(JPG / WebP / AVIF);PNG 永遠是無損。一般照片以 75-85% 為甜蜜點。
拖曳圖片到這裡,或點擊選擇
PNG、JPG、WebP、AVIF、GIF、BMP — 可同時多檔。完全不上傳。

為什麼選 iKit 圖片格式轉換器

為設計師、開發者,以及任何曾被告知「檔案格式不對」的人而生 — 兩下完成,不需等伺服器。

四種格式、一個工具

PNG、JPG、WebP、AVIF — 任意方向互轉。一次丟一整批混合格式進來,全部統一輸出成同一個目標格式。

完整畫質控制

有損格式(JPG / WebP / AVIF)可在 40%-100% 區間自由調整,即時拉桿。PNG 永遠像素級無損。

隱私至上的設計

轉檔在瀏覽器透過 canvas API 完成。不上傳、不記錄、不經第三方。可在 DevTools → Network 驗證:零網路請求。

支援現代格式

WebP 與 AVIF 在同等畫質下通常比 JPG/PNG 小 25-50%。AVIF 編碼需要 Chrome 85+ 或 Safari 16.4+,我們會自動偵測並提示。

批次下載

一次轉換數十張圖,點「全部下載」即可一次儲存。每個檔案保留原始檔名,僅替換副檔名。

離線可用

頁面載入後所有轉檔都在本地完成 — 飛機上、火車上、企業防火牆後、甚至拔掉網路線都能用。

瀏覽器圖片轉檔的運作原理

整個流程沒有伺服器 — 瀏覽器本身就內建了所有需要的編解碼器。

  1. 1

    解碼來源

    呼叫 createImageBitmap(file),讓瀏覽器原生圖像編解碼器把原始位元組轉成可繪製的 bitmap。<img> 顯示得了的格式,這個方法都解碼得了 — PNG、JPG、WebP、AVIF、GIF、BMP。

  2. 2

    畫到 canvas 上

    建立一個與圖像原始寬高相符的 <canvas>,以原始解析度繪製 bitmap — 不重新取樣、不縮放,逐像素複製。

  3. 3

    重新編碼成目標格式

    canvas.toBlob('image/webp', 0.82) 把 canvas 像素交給瀏覽器內建的編碼器,回傳 Blob。在不同格式間,我們唯一更動的就是這個 MIME 字串。

  4. 4

    提供下載

    用 URL.createObjectURL(blob) 取得本地 URL,綁到下載連結 — 使用者拿到的檔案完全沒經過網路。

圖片轉檔常見任務

你會在哪些情境下需要圖片格式轉換器?

上傳前縮小照片

手機照片動輒 4-8 MB 的 JPG 或 HEIC。改用 WebP @ 75% 重新編碼後通常只剩約 1 MB,肉眼幾乎看不出差異 — 部落格、論壇、Email 都好用。

為 CMS 移除透明度

某些 CMS(以及許多 Office 程式)拒絕含 alpha 的 PNG,或顯示時背景出現怪色。轉成 JPG 並填入單色背景就解了。

把網站素材升級為現代格式

把 logo.png、hero.jpg 換成 WebP / AVIF,搭配 <picture> 標籤。Lighthouse 分數提升、LCP 下降,肉眼看不出差別。

把設計師的 PNG 轉成 JPG 上線

拿到 24 MB 的設計稿 PNG?網頁不需要這麼大。轉 JPG @ 88% 通常變 1-2 MB,觀感幾乎相同,而你的頻寬預算回來了。

為什麼本地轉檔很重要

照片含位置與人臉、螢幕截圖可能含密碼、設計稿是還沒公布的產品功能 — 把這些貼到別人的伺服器,就是悄悄的資料外洩。iKit 的轉換器只是已載入瀏覽器分頁的 JavaScript。

  • 轉檔期間零網路請求 — 可在 DevTools → Network 驗證。
  • 重新編碼會丟掉 EXIF 中繼資料(相機位置、裝置)— 額外的隱私紅利。
  • 可放心使用個人照片、螢幕截圖、內部設計稿與機密文件。

相關教學

來自 iKit 部落格的深入教學與工具比較。

常見問題

這安全嗎?我的圖片會被上傳嗎?

不會。整個工具就是這個分頁裡的 JavaScript。圖片用 createImageBitmap 解碼、畫到 canvas、再用 canvas.toBlob 重新編碼 — 每一步都在瀏覽器內完成。打開 DevTools → Network 即可驗證:轉檔過程中不會發出任何請求。可以放心使用個人照片、螢幕截圖、設計檔與機密文件。

為什麼我的 PNG 轉成 JPG 後變更大了?

PNG 是無損 — 每個像素完整保留。JPG 是有損,最擅長處理連續色階的照片。如果你的 PNG 是螢幕截圖、線稿或大色塊,JPG 反而比 PNG 壓得差,檔案就變大。截圖或 UI 素材建議維持 PNG 或改用 WebP;JPG 適合風景人像照片。

WebP、AVIF、JPG 該選哪個?

JPG:相容性最好(每台裝置、每個 CMS 都支援),適合照片。WebP:同等畫質下比 JPG 小約 25%,所有現代瀏覽器都支援,是最安全的「升級版 JPG」。AVIF:再比 WebP 小 20-30%,但編碼較慢、僅 Chrome / Safari 16.4+ / Firefox 支援。網站可用 AVIF 並透過 <picture> 提供 JPG 後備;一般替換選 WebP;相容性優先選 JPG。

為什麼我的瀏覽器顯示「不支援 AVIF」?

透過 canvas.toBlob 編碼 AVIF 需要 Chrome 85+、Safari 16.4+,或近期版本的 Firefox(需切換 image.avif.compliance_strictness)。解碼(顯示)支援度更廣,但寫出 AVIF 需要瀏覽器內建編碼器。iKit 會自動偵測並停用此選項。替代方案:改用 WebP,或切換到 Chromium 系列瀏覽器。

圖片的透明度會被保留嗎?

PNG、WebP、AVIF 都保留 alpha 透明通道。JPG 不支援透明 — 把透明 PNG 轉成 JPG 時,背景會被填成白色(或 canvas 預設值)。需要透明請選 WebP 或 PNG,千萬別選 JPG。