SPARKFUL

Blog

Insights from the SPARKFUL teams

簡單的縮圖規則

Wei-Fan Chenuser-interface-design
name

本文有大量圖檔遺失,我們正在努力恢復中了!

在現在的網站上,多媒體資料佔了許許多多的資訊空間,許多時候我們都會需要製作縮圖(Thumbnail)來增加可以容納圖片的空間,或是減少圖片的檔案大小,以增加網站的整體速度。但是許多網站在製作縮圖的時候,都缺少考慮圖片的可讀性,讓這些原本包含許多資訊的圖片,在縮圖之後就變得無法辨識。當然,越容易辨識的圖片越容易讓使用者瞭解,也越能增加圖片的點擊率和瀏覽率。接下來,我們利用上面這張照片來解釋縮圖與可讀性的關係。

一般而言,我們將縮圖的方式分為兩種:縮小(Resize)與切割(Crop)。縮小是將整張圖直接縮至我們所需要的大小,切割則是切除圖片四周我們不需要的部份,只留下我們需要的大小。以上面這張圖為例,下圖的左邊使用的方法是縮小,右邊的方法則是使用切割。我們可以很明顯的看出來,使用縮小的時候,照片裡面的吉他手整個都縮小了,我們失去了許多重要的線索,甚至我們也無法看清楚吉他手的性別,但縮小可以保留圖片四周的環境與背景。如果使用切割,圖片中吉他手的的大小則不會有改變,可是四周的背景消失了,我們無法判斷他到底是一個人在演奏,還是旁邊有其他的樂手,四周的環境與背景也都被切割掉了。

比較好的方法是,如果我們需要製作 1/10 的縮圖,先進行 0.32 的縮小,然後進行 0.32 的切割。換句話說,如果你要縮小一張圖至 1/10,那麼你應該先縮小 sqrt(1/10),然後切割 sqrt(1/10):

縮圖 A = 縮小 sqrt(A) x 切割 sqrt(A)

結果就如同下圖所示:

如此一來,我們便可以同時保留大部分的畫面細節與環境資訊,讓使用者能夠容易得取得圖片的內容,以提高這張照片的可讀性,也能夠大大的提高網站的整體使用性,方法雖然簡單,卻也容易被忽略,許多重要的問題都是從這種小細節裡面產生的呢!


Reference

  1. Photo by Mylene Tremoyet on Unsplash
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
Entrepreneur in entertainment and play for wellness / Author of Playable Design / Active indie game developer 🎉
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...Read more