標籤: 圖片

  • 臉書分享網頁文章連結的預覽圖片(link preview)尺寸該用多少像素?

    臉書分享網頁文章連結的預覽圖片(link preview)尺寸該用多少像素?

    在臉書(Facebook)成為國內社交平台的主流文化後,大量網頁文章被轉發分享在裡頭。為了讓文章能吸引讀者眼球注意力,設計一張好的預覽圖片讓文章有機會被一眼關注就顯得至為重要。

    而在設計一張專門用於臉書上分享的圖片之前,我們必須先對影像解析度的尺寸有個清楚而正確的認知。

    臉書適合分享網頁連結預覽圖片的尺寸

    在設定網頁文章的預覽圖片(精選圖片)時,要注意最適合臉書分享的尺寸至少需要 1200*630像素(pixel)。

    如果想提供更好的畫質,可以用更高解析度的圖片,例如7200*3780px。但請注意,高解析度只是畫質好,不代表一定能完美呈現內容。

    例如Nikon數位單眼相機原始檔(RAW)尺寸為3680*2456,對比FB的1200*630,寬為3倍,高為3.8倍!換言之,原始照片的高度不符合臉書圖面比例。如果硬上圖,就會造成圖像在顯示時被自動裁切。

    想想看,完全無法預料的自動裁切,很可能將會變成斷頭照片,對於網站甚至是粉絲專頁本身來說,絕對是破壞觀感的負面因子。

    如果想放置大圖,可以取相同倍率放大的尺寸。例如3680寬的照片,我們可以手動裁切高度至1890像素,藉以自主決定重要的視覺呈現效果。

    結果與討論

    請注意,適合FB臉書的圖片,不一定適合其他例如 Twitter 或 Line 等社交媒體,畢竟不同的開發者和版面都有其各自使用文化上的考量。

    因此比較適合的通用做法,是把想表達的重點盡量設計在圖片中心位置處,即使被裁切也不用擔心。

    最後順便一提,上傳照片其實只要不要太小,倒也不用特別選用高畫質影像,因為臉書顯示時都會自動劣化縮圖的。

  • 部落格、網站媒體的影像圖檔應該轉用 WebP 圖片格式嗎?

    部落格、網站媒體的影像圖檔應該轉用 WebP 圖片格式嗎?

    今天網路開發、寫部落格時常見網路媒體的問題是關於「部落格、網站媒體的影像圖檔應該轉用更有效率的優化過 WebP 圖片格式嗎?」

    WebP 是一種同時提供了有損壓縮與無失真壓縮的圖片檔案格式,前者號稱比 Jpeg 更小但能維持相同畫質,後者提供透明色和動態模式,可用來取代 PNG 與 GIF,算是一種通吃格式。WebP 是由 Google 在購買 On2 Technologies 後發展出來,在 2010 年以 BSD 授權條款釋出。

    由於 WebP 影像格式標榜比傳統 Jpeg 圖檔更好的影像品質和傳輸效率,又能提供 PNG 和 GIF 的透明與動畫圖像功能,原本也是受到各方期待。甚至一些專業線上圖檔優化服務已經開始提供將網站內大多數格式圖檔通通轉換成 WebP 圖檔。

    有強大的效能以及通用的格式,原本應該是網路世界上的美談。然而諸般種種好處卻有一個人不願意了,那就是最難啃的蘋果!Apple 公司在自家 macOS Sierra 及 iOS 10 的早期 beta 版本中其實已經加入 WebP 格式支援。卻在 2016 年 9 月 7 日釋出的 iOS 10 和 macOS Sierra GM 種子版本中移除對 WebP 的支援直到現在(最新測試版本為 macOS Catalina 10.15)。

    因此讓我們回頭看到今天的問題,如果要問我能不能將網站內所有影像媒體通通改用 WebP 格式發布,我個人是不建議的!畢竟使用 Apple Mac、Macbook、iPhone 和 iPad 裡頭 Safari 瀏覽器的人還是相當多!不過你如果不在乎蘋果用戶的話,我個人還是挺建議轉用 WebP 格式的,網路應用的效能確實比較好,而且下載後大多還得轉檔才能使用也可以給一些人帶來麻煩(壞心)。

    WebP Testiing Image Media Files

    如果你想測試自己常用的瀏覽器是否支援 WebP 網路媒體格式,可以用你的瀏覽器打開本頁面,如果你能看到上面那棵樹的話,恭喜你的瀏覽器正好支援 WebP 格式喔!