圖片取代文字

No

這是最近一再遇到的例子,文章本身單純只是想表達為何不該再用圖片取代一般文字內容。

很久很久以前,在自己還在用 <table> 切版時,為了美觀也非常喜歡用圖片取代應有的文字內容,在那個年代,不懂什麼是網頁標準、不懂什麼是使用者經驗、不懂 CSS,只知道為了美觀就應該不厭其煩的用圖片,因此,三分鐘可以做好的事要花三個小時甚至更長的時間處理,做自己的網站也就罷了,時間成本自己吸收,但做別人的東西時就開始知道痛在哪裡了,即使只有一個字的變動也是要大費周章的開啟 Photoshop 重切圖片。然後,開始一昧的怪罪中文字型:「為什麼那麼多鋸齒!為什麼只有兩種字型可以用!」,最後連為什麼要生在台灣非得用中文都出來了。在那個時期完全沒想過根本就是自己能力的不成熟,只想用圖片消滅一切的中文字。

現在看中文當然還是有看不順眼的時候,會注意 sIFR 這樣的技術,會希望所有瀏覽器趕快支援 CSS3 @font-face(愚蠢的想法),但不管怎麼不順眼都不會再想到用圖片取代文字內容了,除非是主視覺或一些技巧性的小地方,否則多花點心思在整體設計與質感上應該多少可以彌補中文字型的不足。

到底有哪些缺點讓我們不應該再用圖片取代文字?先試試把 CSS 拿掉看看網站還能不能正常閱覽吧,如果不能就表示你無法參加一年一度的 CSS Naked Day(4月9日)了。CSS Naked Day 有什麼用?老實說一點用也沒有,這完全是一種自發行為,測試你的網站是否合乎標準。網站存在的最終目的是提供資訊,因此在拿掉所有裝飾性物件後應該依舊是可以正常閱覽的,如果做不到這點就已經有點本末倒置了。

最嚴重的部分應該是親和性,對於使用者用圖片取代文字到底是不是一個友善的行為。使用者百百種,有的人習慣把文字內容用滑鼠圈選起來閱讀或當做一種記號,有色盲者更可能必須靠圈選內容才能進行閱讀。有些人會把字串當做關鍵字進行搜尋,搜尋本文中是否有相同字串出現,或把這個字串丟到 Google 搜尋相關的內容,甚至進行字串翻譯。有些文字內容非常重要,地址、電話、email、名稱、時間..,這些重要的資訊有些人會想 copy 起來放在自己的備忘錄什麼的,這樣當他需要這些資訊時就不需要再上網站查詢。如果用圖片取代文字,以上使用者可能會進行的行為都無法或不再方便進行,除非內容對於使用者真的非常非常重要,重要到使用者願意再自行打字進行搜尋、備份,但最終這樣不便的經驗還是很快就會被不耐的使用者所淘汰。

再說說圖片取代文字對網站本身的影響。一張圖片 1kb 就好,一個頁面 10 張圖片就是 10kb,架設網站當然希望越多人瀏覽越好,因此 100 位使用者進入網站就是 1,000kb,1,000 個人就是 10mb。很多虛擬空間基本款每個月也才提供 50mb 的頻寬流量,這樣網站每個月只能讓 5,000 人瀏覽,還只是單頁!這樣的流量相信不是業主所期望的,除非是 Hinet 網站,否則加重頻寬預算更不會是業主想要的。

再來像上面提過的,即使只改一個字母也得大費周章開啟 Photoshop 重新編輯,更別說為了合乎標準用 CSS Image Replacement 技巧得多花數倍的時間成本。

話說回來,適當的使用圖片取代文字還是必要。最常見的是網站 Logo,有時 search submit button 也會採用圖片處理,header 部分通常屬於主視覺的一部份,因此難免還是需要這樣的手段。

其實一切在於適當於否,如果文字內容是可能會被變動的,那麼它就該只是字串或文字內容,當用圖片取代它,將來、萬一、不小心這個文字內容需要更新時,一切都將為時已晚矣。

Tuesday, July 28th, 2009

Category: CSS, Design

Bookmark and Share