本文有大量圖檔遺失,我們正在努力恢復中了!
在現在的網站上,多媒體資料佔了許許多多的資訊空間,許多時候我們都會需要製作縮圖(Thumbnail)來增加可以容納圖片的空間,或是減少圖片的檔案大小,以增加網站的整體速度。但是許多網站在製作縮圖的時候,都缺少考慮圖片的可讀性,讓這些原本包含許多資訊的圖片,在縮圖之後就變得無法辨識。當然,越容易辨識的圖片越容易讓使用者瞭解,也越能增加圖片的點擊率和瀏覽率。接下來,我們利用上面這張照片來解釋縮圖與可讀性的關係。
一般而言,我們將縮圖的方式分為兩種:縮小(Resize)與切割(Crop)。縮小是將整張圖直接縮至我們所需要的大小,切割則是切除圖片四周我們不需要的部份,只留下我們需要的大小。以上面這張圖為例,下圖的左邊使用的方法是縮小,右邊的方法則是使用切割。我們可以很明顯的看出來,使用縮小的時候,照片裡面的吉他手整個都縮小了,我們失去了許多重要的線索,甚至我們也無法看清楚吉他手的性別,但縮小可以保留圖片四周的環境與背景。如果使用切割,圖片中吉他手的的大小則不會有改變,可是四周的背景消失了,我們無法判斷他到底是一個人在演奏,還是旁邊有其他的樂手,四周的環境與背景也都被切割掉了。
比較好的方法是,如果我們需要製作 1/10 的縮圖,先進行 0.32 的縮小,然後進行 0.32 的切割。換句話說,如果你要縮小一張圖至 1/10,那麼你應該先縮小 sqrt(1/10),然後切割 sqrt(1/10):
縮圖 A = 縮小 sqrt(A) x 切割 sqrt(A)
結果就如同下圖所示:
如此一來,我們便可以同時保留大部分的畫面細節與環境資訊,讓使用者能夠容易得取得圖片的內容,以提高這張照片的可讀性,也能夠大大的提高網站的整體使用性,方法雖然簡單,卻也容易被忽略,許多重要的問題都是從這種小細節裡面產生的呢!
Reference
- Photo by Mylene Tremoyet on Unsplash