追蹤
沙哇啦的無聊發想
關於部落格
Blog開始轉型中!
  • 40836

    累積人氣

  • 4

    今日人氣

    2

    追蹤人氣

無聊的龜毛行為~關於網頁圖片

1999 年底,我和幾位朋友搞了一個網站。那個網站是幹麻的其實不重要,重要的是在那一段時間,認識了一些有趣的人。

有一天晚上,我和我們網站的 ART 金爺熬夜做網站。由於金爺以前做平面的,所以對於網站設計不是很熟悉。於是,我跟他協調好,他畫圖的時候,我在旁邊看;等他的網頁圖畫出來之後,我負責把大圖切成小圖,再製成網頁。

1999 年,當年的數據機好像正邁向 56K ,於是,當時搞網站的,十分重視網頁的檔案大小。當然了,我和金爺對於圖檔的大小也是十分的在意。

整個晚上,我們不停的作實驗,要怎麼樣才能在圖片品質與大小兼顧的狀態下,做出檔案最小的網站呢?其實,網站的圖早已經畫好,但是龜毛的兩個人,不停的作圖、切圖。好像是到了凌晨兩點吧,我們終於做出了一個雙方都滿意的版本。這時候,金爺大大的嘆了一口氣:「我們搞了四個小時,結果是網頁少了4KB ?

我很懷念當年那種的龜毛精神,因為現在重視這種事的人已經越來越少了。不過呢,當時我們做的網站也不怎麼樣。金爺啊,當時的我們有太多的想法,但是我們做不到的事情太多,然而,當時我們的龜毛精神,到現在仍然有許多製作公司都比不上啊!

當然了,以另一種眼光來看,我們兩個人居然耗了這麼多時間在處理4 KB ,這也許不是件有經濟效益的事?我們的企劃「鬼擋牆先生」,如果當年你知道我和金爺是這樣搞網站的,你會不會拍桌子叫我們快一點,不要耗四小時卻只讓網友快一秒鐘下載完整張網頁呢?

嗯,往事不需多提,趕快來看看「Yahoo!奇摩生活+ 時尚館 美體健身」出了什麼事!

一開始,看到萬歲少女的圖就覺得怪怪的,於是往下看,看到高貴辣妹維多利亞時,我就知道發生了什麼事。這張網頁裡面的圖片處理方式不佳。

在這裡,我們做一個實驗。在維多利亞的圖片上按右鍵選內容,看看這張圖片的資訊。嗯,圖片的長寬是「 154*324 」畫素,檔案大小「 255654 個位元組」,就是「 249K 」。這時候,按右鍵另存這張圖,在硬碟裡,這張圖片的長寬是「 200*426 」畫素,檔案大小不變。

出了什麼事?

此圖片擷取自:Yahoo!奇摩生活+ 時尚館 美體健身

維多利亞的照片,長寬實際上是「 200*246 」,但是,在網頁製作上,我們可以任意的調整圖片的大小。也就是說,假設一張圖是「 800*600 」的圖片,我們可以利用 HTML 語法,直接讓圖片在網頁上呈現「 200*150 」。

這樣就又快又直接把大圖變小圖了喔! 但是,這是有爭議的做法

明明給網友看的是小圖,但是,網友卻下載了大圖的檔案 Size 。理想的做法是,內頁的大圖歸大圖,首頁的小圖歸小圖。也就是,同一個圖片,我們應該依照需求做一張大圖和小圖。

於是我做了一個實驗。本章網頁有三張圖有問題,於是我用繪圖軟體改成實際大小,看看省了幾K?

 

總計

圖片一
圖片二
圖片三

Yahoo 的做法

200*281 (32.7KB)

200*300 (9.85KB)

200*426 (249KB)

291.55KB

我的做法

154*216 (23.3KB)

154*231 (9.75KB)

154*328 (20.9KB)

53.95KB

結算

節省了237.6KB

附註:

1.其中,維多利亞的圖片似乎少了很多,這應該是原始圖片的 JPEG 壓縮比在 95 以上吧,所以圖檔有過大。
2. 「我的做法」的意思是,使用繪圖軟體將圖片的原始尺寸改成Yahoo!奇摩生活+ 時尚館 美體健身這一頁的尺寸

 好吧,少了 237KB ,到底有什麼好處呢?這應該是見仁見智吧!有人會要求,也有人不要求。這一點是很自由心智的。

因為,我們從另一方面來看,當網友下載了大圖,這張圖就會存在網友的電腦裡面,我們稱為暫存。當網友點進去看內頁時,其實不會再做下載的動作。也就是說,在「網友看完首頁再進內頁的閱讀行為」之定義下,照 YAHOO 現在的做法,網友只要下載 291.55KB ;照我的做法,網友反而要下載 345.5KB ,於是,我的做法反而造成網友負擔。反之,若此定義不成立,就是「網友看完首頁就閃了」的情況下,我的做法較為經濟。

但是,我覺得真正的問題是出在於,我為何會發現這個問題呢?

大家仔細看看,有沒有發現高貴辣妹維多利亞的手臂、大腿呈現鋸尺狀,眼睛也看不清楚,一張美美的圖片似乎搞的很粗糙?但是點進去看內頁,你會發現維多利亞這張照片拍的很傳神,尤其是那對眼睛非常的冷艷!

也就是說,「因為網頁製作上的問題,使得這張照片失去了原本該傳達的訊息」,我個人認為這就是一個錯誤!

當然,我還是要說, Yahoo! 奇摩生活 + 真的是一個很優的頻道喔!因為他們把頻道內容與會員機制綁在一起了。比如說,當你在這個頻道看到你有興趣的餐廳,你可以把餐廳資訊記錄起來。這樣你就可以依個人喜好建立起自己的「餐廳名錄」。當然,這不是什麼新概念(來自於美味的書籤?),但是,在設計上卻很有巧思。

身為一位在網際網路工作的小員工,看到 YAHOO 常有一種無力感,因為會感覺到「追的好辛苦啊!」有時候還會有「居然連..車尾燈都看不到... Orz 」的感嘆! 總而言之,大家都是在為網路盡一份心力....

相簿設定
標籤設定
相簿狀態