真的要用圖片嗎？

要實現(xiàn)需要的效果，真的需要圖片嗎？這是首先要問自己的問題。瀏覽器和Web標準的發(fā)展速度極快，記得數(shù)年前我在用微軟Silverlight 1.0寫視頻播放器的時候，中文還不能使用自定義字體顯示，所以那時候寫了很多糟糕的代碼把需要的文字在服務器上生成圖片并緩存起來。用戶下載起來很慢，搜索引擎也完全無法檢索這些文字。

但是現(xiàn)在不一樣了，很多特效（漸變、陰影、圓角等等）都可以用純粹的HTML、CSS、SVG等加以實現(xiàn)，實現(xiàn)這些效果少則寥寥數(shù)行代碼，多則加載額外的庫（一張普通的照片比非常強大的效果庫也大了許多）。這些效果不但需要的空間很小，而且在多設備、多分辨率下都能很好的工作，在低級瀏覽器上也可以實現(xiàn)較好的功能降級。因此在存在備選技術的情況下，應該首先選擇這些技術，只有在不得不使用圖片的時候才加入真正的圖片。

備選技術

CSS效果、CSS動畫。提供與分辨率無關的效果，在任何分辨率和縮放級別都可以顯示得非常清晰，占用的空間也很小。

網(wǎng)絡字體。現(xiàn)在連很多圖標庫都是用字體方式提供，保持文字的可搜索性同時擴展顯示的樣式。

前端工程師最好能和設計師、產(chǎn)品經(jīng)理保持溝通，幫助他們了解到什么樣的效果比較“簡潔、高效、可維護”，畢竟對于CSS來說改變圓角矩形的Radius可以實時看到效果，用圖片的話至少要重新生成圖片、切圖并替換資源。Retina、高分辨率屏幕、多尺寸的設備，這些都加快了非圖片特效的發(fā)展，想想在高分辨率屏幕下Windows 7的慘不忍睹，就知道原生的圖片資源絕對不是多多益善。

圖片格式的選擇

如果效果真的需要圖片來表現(xiàn)，那么選擇圖片格式是優(yōu)化的第一步。我們經(jīng)常聽到的詞語包括矢量圖、標量圖、SVG、有損壓縮、無損壓縮等等，我們首先說明各種圖片格式的特點：

其中APNG和WebP格式出現(xiàn)的較晚，尚未被Web標準所采納，只有在特定平臺或瀏覽器環(huán)境可以預知的情況下加以采用，雖然均可以在不支持的環(huán)境中較好的功能降級，但本節(jié)暫不討論這兩種格式

天津國泰醫(yī)院