SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

為你的臉書打造高畫質的專頁封面

Decill Changuser-interface-design
name

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

相信大家都有把圖片上傳到臉書的經驗,臉書身為全球擁有最多圖片的服務供應商,截至 2011 年 9 月的統計,上傳的圖片數量已達到 1400 億張,且持續以倍數方式成長。

也許是為了節省空間、或是控制流量的關係,圖片上傳至臉書後常常因為過高的壓縮比導致畫質低落。許多注重圖片品質的使用者,會在上傳之前事先處理圖片的解析度尺寸以及檔案大小,甚至對圖片先作銳利化(unsharp mask filter)等處理,藉以降低圖片上傳至臉書後畫質模糊的問題。

自從 Facebook 把頁面造型全面改成 Timeline 之後,最引人注目的就是頁面頂端那吸引人目光的封面圖片,版型上儼然已經是一種官方網站的氣勢。不管對於個人或是粉絲專頁而言,都是一個展現個人風格特色、品牌精神的最佳位置。

當然,這個專業封面圖片也是受到臉書圖片壓縮品質控制的,我們找到臉書對於專業封面相片規格的說明:

也就是說,不但必須控制好圖片解析度在 851X315 像素,還必須是 sRGB 的 JPG 檔案,大小也得控制在 100KB 以內,超過這個大小或者使用 JPG 以外的圖檔,系統可是會強制幫你重新壓縮一次的。

想要精確的控制圖檔檔案大小,得透過 Photoshop 這類的專業繪圖軟體來達到,Photoshop 提供了專門輸出網頁用途的選項,就在「檔案」>「輸出為網頁與裝置用」:

在新跳出的對話框選擇 JPEG 模式,並且記得勾選底下的「轉換為 sRGB」,然後就可以調整 「品質」的數值(其實就是壓縮比),圖片壓縮之後的效果會直接在旁邊顯示出來,並且底下可以看到檔案尺寸:

當然我們要追求最佳品質的情況下,只要控制數值讓檔案大小在 100KB 以內就可以了。

另外,個人頭像的尺寸要求為 180X180(以上)的圖檔,並且實際上顯示會被縮小到 160 X160 的尺寸來顯示,出現在塗鴉牆上則是被轉換成 50X50、32X32 等等各種不同的尺寸。雖然臉書上並沒有關於個人頭像的規格資訊,不過我們依然找出適用的設定值:請將檔案事先處理 成 180X180 的 JPG 圖檔,並且大小控制在 15KB 以內,可以得到較好的品質。


Reference:

  1. Photo by Timothy Hales Bennett on Unsplash
Decill Chang
Decill Chang
Principal Designer
A しばいぬ lover.
divider
Related Posts
name

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

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

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

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

為使用者撒下「麵包屑」

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