當 Favicon 變成整個網站:創意隱寫術的實踐
外國有位高手將成個網頁嘅資料,好似變魔術咁塞入去瀏覽器標籤頁上面嗰個細細粒嘅圖示(Favicon)入面。
點解重要
呢單新聞話畀我哋聽,其實網頁唔一定要整到好大好複雜。對於做生意嘅人嚟講,呢種「極簡」思維可以啟發我哋點樣喺有限嘅資源(例如好慢嘅網絡)下傳遞最重要嘅資訊。
術語小字典
Favicon:即係「網頁圖示」,當你用電腦開網頁時,喺瀏覽器最頂分頁標籤左邊見到嗰個細細個嘅 Logo。
Byte (字節):電腦儲存資料嘅基本單位,你可以想像成係超市入面嘅一個細膠袋,裝住少少數據。
UTF-8:一種全世界通用嘅文字編碼方式,確保唔同電腦都能夠正確顯示繁體中文或英文。
當 Favicon 變成整個網站
將隱藏數據放在鮮為人知的地方,可以是一個有趣的愛好,甚至是一項專業職業。對於 [Tim Wehrle] 來說,這只是前者。他在這個領域的最新項目使用了一個 Favicon(網頁圖示)圖像來儲存一個基於 HTML 的網站,並在下載 Favicon 後於瀏覽器中渲染其內容。
為了實現這一點,一個非常基礎的 HTML 頁面被轉換成一系列 UTF-8 編碼的字節,然後被聲明為一個標準的 PNG 圖像。原始的 208 字節有效載荷加上 4 字節的 PNG 標頭,僅使用了 9×9 像素 Favicon 的一部分。如果使用通常情況下較大的 Favicon 圖像,你就可以輕鬆儲存更多數據,無論是像這裡一樣表現為視覺雜訊,還是隱藏得更深一點。
當然,這當中有一個竅門,在這種情況下,是用於從「圖像」中解包字節並進行渲染的 Typescript 代碼;你必須另外加載該代碼。儘管如此,在現今那些功能繁雜、渲染時間極長的網站時代,看到能用如此少的字節(甚至能塞進一個 Favicon)來完成的事情,確實令人耳目一新。
至於這種方法的用途,則留給讀者自行思考,但非常歡迎你查看 GitHub 項目和演示網站。
