別讓網頁圖片降低網站效能 - 談談網頁圖片處理新趨勢

如果你的網頁只是設計來自己玩玩, 或者它很明確的只有少數使用者會上來, 那麼你大可以不必用到我在這裡要介紹的方法。但是, 如果你的網站是供作大量使用者(例如超過上千個 current session), 那麼你一定不得不開始想方設法的提升網站的效能。

其中, 網頁中的圖片, 始終是網頁效能瓶項中的一環。別以為你的圖片很小; 當有大量使用者在同時存取時, 問題馬上就會突顯出來。

在這裡我要介紹一下業界怎麼處理這類問題的。首先, 如果你設計的是商業網站 (再強調一次, 如果你做的只是小規模網站, 我真的奉勸你不用麻煩了), 那麼當你設計好網頁圖形之後, 一定要想方法把它的檔案大小盡可能的壓縮。我建議你可以考慮採用 PNG 格式, 因為這種格式可以把圖形壓縮到非常的小, 而且當今絕大多數瀏覽器都已支援。如果你不相信的話, 你可以上 http://www.punypng.com/ 這個網站試一試, 把你的圖片(使用 PNG 格式)丟上去, 看看它能不能再被擠出一點空間出來。

其次, 像 YouTube 這種大型網站, 坦白說, 它的網頁上的靜態圖形真的不多, 也不大, 但是他們也針對這一方面做了效能上的調整。他們是怎麼做的呢? 他們是把網頁上所有用得到的圖片都放在一張大圖裡面, 然後利用 CSS 去截出所需要的片段。其實這一整張「大」圖也不會很大, 容量更是只有 12K 而已。但是從這點你就可以看出來, 人家對這一丁點容量都是斤斤計較的。我相信, 如果你的網站規模已經大到具有上億使用者時, 你的思慮也要這麼細密才行。

在他們的理論中, 下載一張較大的圖, 比下載多張小圖要來得快速而有效率。我個人是沒有做過這種評比, 但是看在人家有上億使用者的份上, 我相信他們絕對不可能是吃飽了撐著; 我相信他們絕對有他們的理論基礎。如果你有興趣的話, 不妨上網搜尋一下 CSS Sprites 關鍵字, 了解一下我所謂的「大圖」是指什麼。

在實務上, 人家是怎麼辦到的呢? 你看看以下的 CSS 碼就可以了然於胸:

<style type="text/css">
    .bigpicture
    {
        background: transparent url(http://"MyBigPictureUrl") repeat-x scroll 0 0;
        border: 0;
        padding: 0;
    }
    .smallpicture1
    {
        width: 18px;
        height: 18px;
        background-position: -108px -680px;
    }
</style>

...

<img class="bigpicture smallpicture1" />

在這裡我定義了 bigpicture (在這裡指定大圖的位置) 與 smallpicture1 兩種樣式, 然後藉由在個別 img 控制項中調整樣式組合, 再把所需要的那個圖形片段給截出來。在這個範例中, 你可以先設定好 smallpicture1 的樣式, 再指定 class="bigpicture smallpicture1" 以截出這個小圖。如果你要截出另一個圖, 那麼就再設定 smallpicture2 的樣式, 再指定 class="bigpicture smallpicture2" 就行了。不過要去找出那個 background-position 的值, 恐怕要額外花費一番小功夫, 這就是採用這種方法的小小代價。