部落格圖片尺寸的選擇

部落格或網頁中的最佳圖片尺寸,應同時兼顧清晰度與輕量,在最小的網路流量需求下盡量去填滿螢幕上的每一個像素點。不會因為過大的圖片尺寸使得下載緩慢,也不會因為圖片太小,造成顯示模糊。以現在多裝置網路環境來說,自然以符合桌面版網頁以及有著最大像素需求的視網膜螢幕(retina display)為優先。

以現行主流的內容式網站(如本站使用的 WordPress 的樣版)來看,常見的網頁架構是採用響應式網頁設計(RWD, Responsive Web Design),網頁內容會隨著瀏覽器或裝置的視窗大小而改變。以本站的網頁樣版設計來說,圖片的最大寬度需求出現在 iPhone 6, 7, 8 plus 的橫向模式下。它需要的圖片橫向解析度為 525px。太大或太小的圖片會進行縮圖或擴圖至 525px 的寬度,以附合顯示尺寸。

img1.png

網頁的直向(縱向)因為可以上下捲動,一般來說相片長度較不受限制。

另一個是由網頁的 CSS 原始碼著手。這個網頁的內容面版的 max-width 是 1000px,兩側的 padding 為 3em,在 12px 的字高下為 48px,內容寬度為 904px(1000 – 48 – 48)。右邊的文章欄寬占 58 %,因此文章的內容寬度是 524.32px,進位後為 525px。

img2.png

以 retina 螢幕來說,是將 4 個像素代替 1 個傳統像素,因此精緻度變為 4 倍。也就是說,圖片的長與寬的都需要加倍才能完整地填滿 retina 螢幕下的每一個顯示像素。以上面的例子來說,若圖片的最大容許寬度是 525px,在 retina 螢幕下,圖片的寬度需要 1050px 才能完全地填滿。

當然瀏覽器會根據網頁內容將圖片縮圖或放大並顯示到螢幕上。在 RWD 網頁上追求每一個像素都一一對映到傳統或 retina 螢幕上的每一個顯示像素沒太大意義。選擇圖片尺寸略大於長寬需求的通用顯示比例,是個兼顧輕量與便捷性的好辦法。

若以寬度是 525px 的傳統像素來看,retina 螢幕的需求寬度是 1050px。若以主流的相片寬長比 4:3 來說,1280 × 960 px 是很合適的選擇。

若是 iPhone 5 以及其後系列手機所拍攝的相片,其原生解析度為 4032 × 3024 px,一般的風景照檔案大小從 1.5MB 到 6MB 都有可能。在輸出成 1280 × 960 後,檔案大小普遍都能降到 1MB 以下。

當然每個網站的內容對於圖片寬長的最大需求都不一樣。從 SEO 的角度,在不影響網頁顯示品質下,採用最低限度的圖片尺寸是加快瀏覽速度的好方法。現在行動裝置與 retina 螢幕當道,這個部分也需要併入考量。最後也建議出圖時搭配圖片最佳化工具來批次作業。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s