ImageToPixel.Art 免費像素畫工具,照片不上傳就變復古遊戲風

ImageToPixel.Art 是免費免註冊的線上像素畫產生器,實測照片轉紅白機、GameBoy 風格全程在瀏覽器完成、圖片不上傳。本文拆解它的真硬體色板、遊戲風格預設原理,以及行銷頁與程式碼對不上的規格落差。

用 AI 摘要這篇文章:

把一張照片丟進 ImageToPixel.Art,看它變成紅白機時代的像素畫,這中間你的照片從來沒有離開過瀏覽器。我實際上傳圖片測試時,全程盯著開發者工具的網路流量:整個上傳與轉換的工作階段共 61 個請求,沒有任何一筆帶著圖片資料,真正發出去的 POST 只有兩個,一個是 Google Analytics 的瀏覽統計,一個是 Cloudflare 的效能監測;而轉換本身,其實一個請求都沒有發出。換句話說,它號稱的「安全私密產生」在行為層面是成立的,而且比它自己寫的隱私權頁還要保守。

這個網站做的事很單純:上傳 JPG 或 PNG,挑一種復古風格,下載 PNG。免費、免註冊、有完整的繁體中文介面。但把它拆開看,會發現一件有趣的事:它比自己的說明文件更值得信任,因為文件寫的架構跟程式碼根本對不上。

隱私頁說圖片會進 Cloudflare Workers,程式碼說不會

ImageToPixel.Art 的隱私權頁寫得相當正式:上傳的圖片會在 Cloudflare Workers 的記憶體中處理,渲染完成後立刻丟棄。關於頁也說圖片只存在揮發性記憶體,關掉分頁後伺服器端什麼都不留。

讀起來合理,但問題是:這套描述的架構,在它的前端程式碼裡找不到。這個網站沒有打包壓縮,16 支 JavaScript 全部是可讀的原始碼。上傳的處理流程寫在 app.js 裡:瀏覽器用 FileReader 把檔案讀進記憶體,畫到一個暫存的 canvas 上,接著 getImageData 拿到像素陣列就地運算。全部的 fetch 呼叫都在載入工具介面的 HTML,一個主路徑加一個舊版備援,跟圖片無關。下載也一樣,按鈕按下後直接從 canvas 產生 PNG 的資料流存在本機,檔名叫 pixel-art.png,全程不經過任何伺服器。

所以實際情況是反過來的:隱私頁描述了一個「圖片會送到雲端處理」的架構,而真正上線的版本連上傳都沒有。對使用者來說這是好消息,你的照片確實不出家門;但也代表這份文件的維護有點隨意,寫的跟跑的是兩回事。這種文件落後於實作的狀況,後面還會看到好幾處。

實測:千萬像素 0.27 秒轉完,輸出維持原尺寸

我準備了兩張測試圖實際跑過一遍。

操作本身不需要說明書:進網站、點上傳區、選檔案,畫布直接顯示像素化結果,接著挑預設或拉滑桿,滿意了按下載。整個介面有繁體中文版,連風格預設名都中文化了,NES 譯作紅白機,分頁標籤是預設、基本、顏色、效果。有個小地方值得留意:Minecraft 在介面上譯作「我的世界」,用的是中國官方譯名而不是台灣習慣的「當個創世神」,繁中介面讀得懂,但用詞不完全是台灣口味。

一張 1600×1200 的風景圖,上傳後畫布立刻顯示像素化結果,切到 GameBoy 風格,整張圖變成深綠、淺綠、黃綠的四階綠,正是初代 GameBoy 螢幕的那組顏色;切到紅白機風格,畫面回到彩色,但顏色明顯被收斂成一組固定的老色票,右上的太陽被壓成飽和的黃橙塊,天空的漸層變成一格格可數的色階。按 下載,存出來的是一張 1600×1200 的 PNG,跟我上傳的尺寸一致。我在 GameBoy 狀態按下載,檔案打開正是畫面上那片四階綠:畫布上看到什麼,檔案裡就是什麼。

ImageToPixel.Art 套用紅白機風格後的彩色像素化結果與左側風格預設面板截圖Pin
切到紅白機風格後回到彩色,但色票被收斂成一組固定的老色板;左側是完整的風格預設面板。
ImageToPixel.Art 繁中介面把測試風景圖轉成 GameBoy 四階綠像素畫的工作區截圖Pin
ImageToPixel.Art 繁中介面:同一張測試圖套用 GameBoy 風格後,整張畫面收斂為四階綠。

另一張 4000×3000 的大圖,約一千兩百萬像素,從上傳到畫布更新只花了 0.27 秒,輸出畫布維持 4000×3000,沒有被偷偷縮小。app.js 裡其實留有一行 MAX_DIMENSION = 1280 的上限常數,後面跟著註解說明它沒有作用,縮圖邏輯整段被移除了。這解釋了為什麼大圖這麼快:運算全部在本機的 canvas 裡跑,用的是你電腦的記憶體,不需要排隊上傳、排隊等伺服器算圖。

也因為如此,它的速度上限取決於你的裝置。我在桌面電腦上測千萬像素很順,但老舊手機丟一張超大圖,吃的是手機的記憶體,體感會不一樣;我只測了桌面環境,行動裝置的表現要自己留意。

復古感是照硬體色板算出來的

很多「照片變像素」工具的做法其實就是縮圖再放大,配個馬賽克感,輪廓和光影全糊掉。ImageToPixel.Art 走的是另一條路:色板限制加抖動演算法,這兩個正是復古遊戲美術的核心技術。

色板是真的硬體資料。image-config.js 裡的預先定義色板就五組:紅白機 64 格、去除重複後 55 色;GameBoy 四階綠;Pico-8 十六色;CGA 四色;VGA 十六色。我逐組核對過數值,GameBoy 那組 [15,56,15]、[48,98,48]、[139,172,15]、[155,188,15] 正是經典 DMG 螢幕的綠色階,紅白機那組也符合 2C02 晶片色票的結構,同一排黑色重複出現的排列方式都對。這表示它的復古感是照著歷史硬體的限制重算出來的,把照片丟進 GameBoy 風格,得到的就是四種綠色的排列組合,跟當年掌機螢幕的物理限制一致。

抖動則是老遊戲在色數受限下製造漸層的手法。它提供兩種:Bayer 與 Floyd-Steinberg。Bayer 的強度可調,會產生規則的網點紋理,像老報紙印刷;選 Floyd-Steinberg 時強度滑桿會收起來,誤差怎麼往相鄰像素擴散由演算法自己決定,漸層看起來比較自然。色板加抖動加掃描線、CRT 遮罩這類後製,就是它所有風格的原料。

手動參數的深度,比預設面板看起來多

介面用四個分頁組織:Presets 放風格預設,Basic、Color、Effects 放手動參數。真正值得花時間的是後面三個分頁,因為那裡藏著不少進一步控制。

Basic 分頁塞最多東西:像素大小滑桿從 2 到 50,決定每個色塊吃掉多少原始像素,是抽象程度的主開關;色數從 2、4 一路到 256,或者直接交給五組預設硬體色板接管;抖動演算法與強度、色調分離(posterize)、Alpha 閾值、像素寬高比也都在這個分頁。色調分離能把色階壓成幾個台階,做漫畫網點感的圖很合用;Alpha 閾值則是做素材的人的實用細節,低於門檻的像素直接整塊變透明,做遊戲 sprite 或貼圖時匯出就是透明背景,不用事後去背。像素寬高比是個容易被忽略的時代細節,老遊戲因為非方形像素與電視掃描的關係,畫面其實不是正方形格子,把比例設成 2:1 或 4:3 會更接近當年在電視上看的樣子。

Color 分頁等於一套小型調色盤:亮度、對比、飽和、色相偏移、色溫(2000K 到 10000K)、色調,加上九支色彩平衡滑桿;亮度上下限則能把太暗或太亮的區域整段壓掉,做出剪影感。Effects 分頁是氣味最重的一區:掃描線強度、輪廓描邊、銳化、雜訊、色差、光暈,加上三種 CRT 遮罩(aperture grille、slot mask、shadow mask)。

遊戲風格預設的真相:超級瑪利歐是一組參數

介面上最顯眼的是一排遊戲風格預設:超級瑪利歐、Stardew Valley、八方旅人、當個創世神、泰拉瑞亞、VA-11 Hall-A。看起來像六種不同的引擎,翻開設定檔會發現它們其實是同一條管線的參數組合。

以超級瑪利歐為例,它的定義是:紅白機色板、亮度 105、對比 120、飽和 110、掃描線強度 30。就這樣。Stardew Valley 換成另一組色溫與色調平衡的搭配。理解這件事之後你會用得更好:預設只是起點,任何一組都可以再進 Basic、Color、Effects 分頁微調,像素大小、抖動強度、色相、色溫都是滑桿,色數與遮罩之類少數幾項是下拉選單。

濾鏡風格裡的 Glitchcore 更有意思,它的絕大多數視覺參數是按下按鈕的當下用亂數擲出來的:亮度在 ±10 之間浮動、色相 0 到 360 度隨機、三成機率套用 CGA 色板、雜訊固定會加。所以點兩次 Glitchcore 得到不同結果不是故障,是設計。它的「故障感」真的是隨機的。

行銷頁的規格,對著程式碼看只剩一半

前面提過文件與實作的落差,這裡把對不上的地方集中攤開,因為它們會直接影響你對規格的期待。

首頁研究筆記宣稱做了 NES、PC-98、Mega Drive、Game Boy Advance 與自訂色板的硬體級色彩對照表,關於頁也說預設校準過 NES、SNES 與 PC-98;但程式碼裡的色板只有前面說的五組,這些名單裡的大半,PC-98、Mega Drive、GBA、SNES,都不存在。首頁說抖動演算法混合了 Bayer、Floyd-Steinberg 與藍雜訊矩陣,實際的下拉選單只有 none、bayer、floyd-steinberg 三個選項,藍雜訊不存在,而且一次只能選一種,談不上混合。使用說明寫上傳後會「並排顯示原始圖像與像素化預覽」,實際的介面只有一個結果畫布,原圖預覽的程式碼被註解掉了,你要看原圖只能自己開圖片檔。研究筆記還說預設可以輸出 JSON,讓美術指導與模組作者維持一致的工作流程,這個功能在全部 16 支程式裡都沒有對應實作,介面上也沒有任何匯出按鈕。

這些落差有一個共同樣貌:行銷文案寫的是理想中的產品,程式碼出貨的是務實的版本。核心功能沒有灌水,色板是真的、抖動是真的、本機運算也是真的,但規格表上多出來的那些名詞,在下拉選單裡找不到對應。

還有兩件事你該知道。一件是測試當天(2026 年 9 月)整個網站的圖片目錄回傳伺服器錯誤,首頁 Logo、功能圖示、示範畫廊全部顯示破圖,蒙娜麗莎、戴珍珠耳環的少女那些官方範例圖一張都載入不出來,只有轉換器本身正常。另一件是營運背景:它的原始碼註解以簡體中文撰寫,網域 2025 年 5 月註冊在 Spaceship,註冊人掛 Delaware 的隱私代理,站上找不到營運公司名,唯一管道是 [email protected]。匿名營運加上站齡一年多,這個免費服務沒有任何存在保證,哪天關站,你連個求償對象都沒有。

限制與風險集中在這裡

先講一個它跟多數同類服務真正有差的地方。一般「線上圖片工具」的標準做法,是把檔案上傳到伺服器,排隊等伺服器運算,再回傳結果給你,這代表你的圖會在別人的機器上停留一段時間,服務也可能對檔案大小、格式、每日次數設限制。ImageToPixel.Art 把運算搬進你的瀏覽器,速度取決於你的硬體,沒有排隊、沒有伺服器端額度,也因此沒有官方公告的檔案大小上限,上限就是你的記憶體。這類本機運算工具都有這個結構性優勢,它比較少見的地方是把徹底貫徹到連下載都不經伺服器。

隱私要分兩層看。圖片內容不出你的瀏覽器,這層我驗過了;但網站本身有 Google Analytics 統計、Cloudflare 監測,也載入了 Google AdSense 的廣告指令碼,你的瀏覽行為是被分析的,「免費」的代價在這裡,不在圖片上。實測畫面中沒有看到廣告版位,廣告指令碼載入了但沒有渲染出版位,可能是自動廣告在特定條件下才會出現。

功能面:輸出只有 PNG 一種格式,沒有批次處理,一次一張;沒有離線模式,首次開啟需要網路載入頁面;它也不是像素繪圖軟體,轉完的圖不能逐像素手動修改,想修要匯出到別的編輯器。像素大小滑桿上限 50,對多數照片夠用,但如果你要極度抽象的大塊馬賽克,50 之後就沒了。

穩定性面:示範圖片在測試當天全部載入失敗,而且跨多次造訪都沒有恢復;工具核心(HTML 與 JavaScript)一切正常。但一個首頁破圖持續放著的服務,你很難期待它有積極的維運節奏。

頭貼與佔位素材用它,逐像素創作請繞路

我的判斷:拿它做社群頭貼、活動配圖、遊戲開發的佔位素材、或者純粹想看自己照片變成 GameBoy 四階綠的樣子,安心用。它解決「快速把照片轉成有誠意的復古像素風」這件事做得又快又乾淨,而且照片不外送這一點,比多數要你上傳檔案的線上圖片工具實在。成功很容易確認:下載的 PNG 打開來就是你在畫布上看到的樣子,所見即所得。

如果你的需求是逐像素創作,它是轉換器不是畫布,做完還要修,請直接找繪圖取向的工具;如果你要批次把一整個資料夾的圖都轉掉,它沒有這個功能,去找批次型的圖片壓縮工具線上圖片編輯器會更實際。想找現成像素風素材而不是自己轉,可以看免費像素風向量插圖合集

最後提醒一件使用上的小事:上傳後像素大小固定從 10 開始,不管你的圖多大(程式裡有照短邊自動設定的意圖,但會被重設邏輯蓋掉),先動這個滑桿再調風格,你會更快找到想要的顆粒感。紅白機風格配 Floyd-Steinberg 抖動是我這次測起來最耐看的組合。

Sliven 褚崇名
Sliven 褚崇名

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

文章: 1171

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *


Share to...