說到像素級還原，我常常會想起自己在深夜裡對著那個「QQ2006」登錄畫面敲敲鍵盤的情景——那種珊瑚藍漸層的視覺衝擊，真的讓人一秒穿越回千禧年。這樣的懷舊感並不是偶然產生的，它背後蘊含了許多細緻的設計與技術決策，從圖像資源的提取到前端程式碼的編寫，都必須做到「像素不走樣」的極致。
從原始安裝包到 SVG/PNG 切片的過程
最先的挑戰是把 2006 年版 QQ 的安裝檔裡那堆 256 × 256、24‑bit 真彩色的圖標完整抽出。根據 官方資料，原始介面共計 1,842 個獨立像素點，包含了聊天氣泡、訊息框、表情圖示等。開發者通常會使用 Resource Hacker 之類的工具，將 .exe 內的資源匯出為 BMP，再利用 Photoshop 或 GIMP 轉成 PNG，最後再根據 UI 佈局手動切成 32 × 32、48 × 48 等尺寸的切片。這一步若不細心，哪怕是 1 個像素的偏移，都會在高對比度的螢幕上顯得格格不入。
CSS 重現像素精準度的技巧
在前端層面，最常見的做法是以 CSS Sprite 結合 background-position 來一次性載入全部圖示，這樣不但減少 HTTP 請求，還能保證圖標在不同解析度下的對齊。舉例來說，QQ2006 的「傳送檔案」圖示在原圖中位於 (96, 128)，尺寸為 16×16，對應的 CSS 如下：
.icon-send {
width: 16px;
height: 16px;
background: url('qq2006-sprite.png') -96px -128px no-repeat;
image-rendering: pixelated; /* 確保放大時仍保持像素感 */
}
值得一提的是，image-rendering: pixelated 這行在現代瀏覽器中仍能保持「最近鄰」插值，讓放大後的圖形不會被平滑化，完美呈現原始的粗糙感。若要兼容舊版 IE，則需要加入 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader 等 hack。
互動細節：JavaScript 與 Canvas 的結合
除了靜態圖像，QQ2006 的聊天視窗還有許多動態效果，例如滑鼠懸停時的按鈕陰影、訊息氣泡的淡入淡出。這些細節往往透過原生 JavaScript 搭配 requestAnimationFrame 實作，並利用 <canvas> 繪製微小的陰影層。根據 GitHub 上的開源復刻專案（retro-qq/qq2006-replica），開發者在 2023 年的一次性能測試中發現，使用 Canvas 只佔用約 12 KB 記憶體，動畫幀率穩定在 60 fps，足以保證使用者在低端設備上也能流暢體驗。
最後，我想說的是，像素級還原不只是「把圖像搬過來」那麼簡單，它是一場跨領域的協作：需要美術對每一個像素的執著、前端對瀏覽器渲染機制的深刻理解，以及程式設計對效能的嚴格把控。只有把這些細節都打磨到位，才能讓我們在點擊「登入」的那一瞬間，真正感受到「時間倒流」的奇妙。
評論（14）
這珊瑚藍的漸層真的會讓人想起以前熬夜掛QQ的日子
用CSS Sprite來還原像素感也太講究了吧
image-rendering: pixelated 這屬性現在瀏覽器都支援了嗎？
光是為了1個像素的偏移在那邊調半天，感覺很折磨人
Canvas只佔12KB？也太省資源了
有那個年代的感覺，但現在看真的有點醜😂
深夜對著舊版登入畫面，確實很有穿越感
手動切圖標聽起來就超累的
懷舊復刻做到這種細節，作者是真愛吧
以前按鈕滑過去還有陰影，現在介面都扁平化了
這麼搞，有沒有考慮過行動裝置的顯示啊？
感覺就是情懷驅動的專案，實用性不高
那個年代的設計雖然粗糙，但很有生命力
為了完美重現連IE hack都寫進去，太拚了