用一串程式碼做的畫,欣賞Chrome、Safari、Edge不同的「藝術」風格
用一串程式碼做的畫,欣賞Chrome、Safari、Edge不同的「藝術」風格

如果你的瀏覽器會畫畫,那它會畫出怎樣一幅畫呢?

如果瀏覽的小說文字多,那可能是文字組合多多的黑白圖畫;如果是線上看不同的動漫作品,那估計是色彩繽紛的普普畫作;要是每天都在看攝影美圖,那瀏覽器畫出的可能是一幅光影變幻的印象畫。

可惜瀏覽器不是AI,沒辦法根據自己的代碼、特性來畫一幅畫。

Web Browser1.jpg
Chrome的畫。
圖/ 愛范兒

但這也沒關係,數位藝術家黛安娜.史密斯(Diana Smith)設計了一串純web的程式碼,每個瀏覽器在加載頁面時都會將其呈現為繪圖。

史密斯一直以來都在進行的嘗試是用CSS和HTML作出畫作。所有的元素都是手動的輸入,僅允許使用Atom文本編輯器和Chrome的開發者工具進行操作,同時SVG元素的使用也可能受到限制。它的項目和源代碼都可以在GitHub中查詢。

這一次,史密斯的「作畫」和不同的瀏覽器有關。除了Chrome瀏覽器能夠呈現圖片本身預想的畫作外,其它瀏覽器都會「畫」出不同的圖像。這也展示了不同瀏覽器轉換工作的差別。

Web Browser2.jpg
▲ Diana Smith的其它藝術作品
圖/ 愛范兒

這不是說其它的瀏覽器都不如Chrome,只是作者在一開始並沒有考慮過跨瀏覽器兼容的問題。

但就是因為沒有兼容,這串代碼反而畫出了不同的「有趣」圖畫。

由於這個項目的藝術性,因此我不關心跨瀏覽器的兼容性,所以即時預覽可能在除Chrome之外的任何瀏覽器中看起來都很可笑。

在Safari瀏覽器中,蕾絲的花邊裝飾覆蓋在了女人的臉上,這片蕾絲本應該出現在女人的脖頸後方作為裝飾品。

Web Browser3.jpg
Safari的畫。
圖/ 愛范兒

而在2014版本的Opera瀏覽器中,畫作變得更加詭異了,有了一種全然不同的風格。脖子分成了三個部分,眉毛、頭髮、眼睫毛的位置都出現了偏移和錯位,以一種更像條碼的方式展現。脖子、眼睛也出現了位置的偏移,這是一張平面的、詭異的畫作。

Web Browser4.jpg
Opera的畫。
圖/ 愛范兒

而讓人感覺十分複雜的是Edge瀏覽器。雖然他的名字Edge有「邊緣」的意思,但在這次作畫中,它自動「畫」掉了所有的邊,讓項鍊消失,使整幅圖畫更為平滑。

這幅畫作還是所有畫中看起來最為陰沉的一幅。

Web Browser5.jpg
Edge的畫。
圖/ 愛范兒

還有曾是世界上最流行的瀏覽器——Netscape Navigator(網景領航員),儘管它的市場佔有率一度達到了90%,但今天可能很多人都沒有聽過它的名字了。

即便如此,它依然是最有風格的瀏覽器創作者,畫出的圖像自成一派。

臉變成了方塊,嘴巴、眼睛等五官都變成了不同大小的方塊,深色的毛髮變為了條碼狀的線條。有點像樂高,也有點像《當個創世神(minecraft)》風格。Vice覺得這個顏色和微軟的Edge瀏覽器基本保持了一致,或許是因為這兩家公司都曾統治了90年代。

Web Browser6.jpg
Netscape Navigator的畫。
圖/ 愛范兒

Diana Smith說:「當你在不同的瀏覽器上查看這張圖片時,你就像是在查看網路的歷史,以及當時用戶對瀏覽器的要求。」

事實上,雖然這個數位藝術完全是藝術方面的探索,但也很容易讓人聯想想到中國多年前的一場行銷活動——IE6殲滅戰。

Web Browser7.jpg
圖/ 愛范兒

當時還有很多用戶在使用存在較大安全隱患的IE6,於是奇虎360號召大家和周鴻禕一起「真槍實彈」地消滅IE6。用戶只需要登錄活動主頁就能自動檢測用戶瀏覽器的IE內核版本,檢測自己是否正在使用不安全的IE6。

若用戶瀏覽器內核為IE6版本,主頁的哆啦A夢就無法顯示出本來的形象,五官扭曲,分辨不清。而IE8內核的瀏覽器則能很清晰地顯示哆啦A夢,圖片顯示的直接不同也能提醒用戶升級瀏覽器。

Web Browser8.jpg
圖/ 愛范兒

七年前的行銷活動和今天的數位藝術品,二者都很有趣。

責任編輯:江可萱、蕭閔云
本文授權轉載自:愛范兒

關鍵字: #瀏覽器
往下滑看下一篇文章
從新零售到新商務,騰雲科技以兩大策略打造新世代成長引擎
從新零售到新商務,騰雲科技以兩大策略打造新世代成長引擎

騰雲科技持續展現強勁成長,不僅連續五年維持雙位數的營收增幅,更於 2025 年前三季累計營收來到 5.47 億元、淨利 1.03 億元,年成長率高達 67%,顯示騰雲科技已從智慧零售解決方案供應商擴展成為智慧社區、智慧城市解決方案供應商,並持續發揮高毛利、高成長、以智慧場域資料為核心驅動的代理式 AI 解決方案全方位供應商。

騰雲科技是怎麼辦到的?

騰雲科技董事長暨總經理梁基文不藏私分享兩大關鍵:「首先是以 AI 賦能的產品與服務,協助客戶提升效率、優化營收;其次是透過騰雲孵化器與其生態系中新創夥伴協作,打造零售、不動產、製造與數位保險等產業所需的新商務服務。」

以 AI 賦能全產品線,強化客戶黏著度、深化長期關係

梁基文表示:「AI 不是單一產品或立即變現的技術,要能有效消除資訊不對等,需協助企業先將散落的資料整合成數據資產,才能找出能驅動決策的洞察。」因此,要讓 AI 真正落地,需要同時理解產業現況與營運痛點的夥伴,才能把技術與數據轉化為具體價值,成為企業成長的新引擎。

有鑑於此,騰雲科技的策略是推出 AI Agent 平台 –TrendVotex,由深耕百貨零售、商業不動產等產業的專業團隊協助打造符合場景需求的 AI 代理服務。

例如,為百貨零售打造的「AI 品牌行銷專家」透過市場輿論進行趨勢及同業動態分析、以口碑行銷進行品牌塑造、針對會員數據進行自動化文案生成及傳播、針對行銷成果進行效益分析等自動化決策,「AI 招商助理」則能整合商圈熱度、樓層營運狀態等資訊,提出精準的櫃位調整與招商策略。至於針對複合式商業不動產管理場景推出「AI 能源智慧管理」服務,導入 AIoT 終端裝置佈署並運用其感測數據與歷史異常紀錄,預測設備故障風險,協助排程維修,降低停機時間,大幅提升營運績效。

梁基文補充說明:「除了協助企業打造專屬 AI 代理與串接代理式工作流程(Agentic Workflow),我們也推出 Marketing、Content、Sales、Manufacturing 等跨產業可重複使用的 AI 代理模組,加速零售、不動產、製造、旅遊與數位保險服務等產業的導入腳步。」

值得注意的是,為真正發揮、極大化 AI 價值,騰雲科技不僅提供技術,也協助企業梳理流程、整合分散數據,打造可支撐多場景的數據驅動營運中台。

梁基文表示,不只零售業正加速虛實通路整合,製造與金融服務業也十分重視「全通路數據」,例如製造業需要即時掌握生產過程關鍵數據指標與庫存狀況以確保良率及產能、數位保險業則積極深化對顧客旅程的掌握以完善服務能量等,騰雲科技推出「隨開即用」、雲地整合的 AI 平台,讓企業能在多場景中無縫串接數據並兼顧資訊安全,充分展現「From Insight to Intelligence」價值。

例如,協助數位保險整合顧客的「線上資料(如客戶資料、風險判斷」與「線下數據(如客戶活動數據、場域營運數據)」,透過 AI 進行產品推薦、簡化內部核保作業流程,並提供更加順暢的一致體驗,讓保險也能像零售一樣真正做到懂顧客。

「接下來,我們會把在百貨零售與商業不動產驗證過的技術,進一步擴大到製造、數位保險等產業,讓價值放到最大。」梁基文如是說道。

騰雲科技
騰雲科技董事長暨總經理梁基文
圖/ 數位時代

五大技術、四大產業,騰雲科技以孵化器成就下一個十年

梁基文表示:「過去 10 年,我們專注在『新零售・新生活』;接下來將延伸至『新商務・新生活』,透過收購、合資、投資等方式與外部夥伴共創新的成長動能。」

具體做法是以 ABCDE(AI、Blockchain、Cloud、Data、Experience)五大技術為核心,鎖定零售、不動產、製造與金融服務四大產業,透過外部合作與孵化機制強化解決方案的廣度與深度:整合現場設備、門市裝置、POS、排隊系統、取貨流程、感測器與後勤運作,推出 AIoT 智慧場域管理方案,滿足跨場域、跨產業與跨國企業的需求。

例如,協助泰國五星級酒店導入 AIoT 智慧場域管理方案以優化能源設備管理、降低營運成本並提升使用者體驗等。明(2026)年,騰雲科技計畫將 AIoT 智慧場域管理方案推向製造業廠房,協助客戶管理冷氣、燈光等能源設備並進行碳管理,同時,透過監控產線設備的振動與溫度等數據,提供 AI 預判的設備維修時機(Preventive Maintenance),擴大數位與綠色雙軸轉型的綜效。

除以集團力量推廣 AIoT 智慧場域管理方案,騰雲科技亦積極擴大相應的生態體系發展:首先是與跨業夥伴一同延伸 AIoT 智慧場域管理方案 的應用範疇,如與保險業者合資成立數位保險公司以提供 AI-Ready 數位應用方案;其次是建立消費者生態體系以發揮「新商務‧新生活」的相互影響綜效。例如,騰雲科技子公司騰加數位將擴大 AIoT 平台運營版圖,深入零售、商辦與飯店等多元場景,並以此為載體整合數位支付、會員數據與數位內容傳播等應用,藉此強化場域的智慧化能力,以及拓展騰雲解決方案的落地深度與廣度。

「透過 AIoT 智慧場域管理方案、營運中台與 TrendVotex 等產品與服務,我們不僅能更精準回應台灣、日本與東南亞市場在流程自動化、營運效率提升上的需求,也能同步改善大眾的日常體驗,真正落實『新商務・新生活』的共好價值。」關於未來的發展,梁基文如是總結。

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
進擊的機器人
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓