OURInsights
/
/
網站圖片尺寸指南,了解圖片的尺寸、大小與壓縮方式

網站圖片尺寸指南,了解圖片的尺寸、大小與壓縮方式

目錄

網站圖片會影響網站的效能和使用者體驗。適當的圖片尺寸能減少載入時間,提高網站載入速度,增進使用者體驗。過大的圖片尺寸會導致網站載入過慢,進而影響網站的 SEO 排名。對於行動裝置的使用者,網站圖片的最佳化更加重要,因為全球網路流量中有近 60% 來自行動裝置,確保圖片可以正常在每個裝置顯示,可以讓使用者有更好的使用者體驗,也能提高網站的競爭力和信賴感。

網站圖片尺寸的設定

選擇合適的圖片檔案格式

選擇合適的圖片檔案格式是網站設計中非常重要的一步,這會影響網站的載入速度和使用者體驗。

  1. JPG:JPG 格式的圖片適用於照片彩色圖片,因為它具有高壓縮率,可以減小檔案大小,並保持良好的圖片品質,也是最常見的圖片格式,適合使用在網站上的大多數的圖片。
  2. PNG:PNG 格式的圖片可以有透明的背景,適合用於需要透明度的圖片,例如圖示、去背圖片等。檔案大小通常比 JPG 大,但圖片品質比較好。
  3. GIF:GIF 格式的圖片可以製作動畫,適用於簡單的動畫圖片。但它的顏色和圖片細節受限,因此不適合用於照片或彩色圖片。
照片和彩色的圖片適合使用 JPG 格式

理想的網頁圖片大小

理想的網頁圖片大小取決於網頁的需求和設計,以下是一些建議的網頁圖片大小:

  1. 滿版圖片:通常建議使用寬度為 1920 像素 (px) 的圖片,以適應大多數桌上型電腦的螢幕。
  2. 內容圖片:依照網頁設計可以使用寬度為 800 至 1400 像素 (px) 的圖片。

圖片的尺寸與檔案大小並無直接關聯。一般而言,盡量讓圖片檔案大小不超過 500 KB。近年來,網站的單一頁面平均大小約為 2 MB,有些部落格甚至更大,為了保持網頁大小在 2 MB 以下。Google 建議網頁圖片的檔案大小應該保持在 500 KB 以下,因此需要盡可能的壓縮圖片,並確保畫質不受太大的影響,使用合適的圖片檔案大小,能提升網站的開啟速度,為使用者提供更佳的體驗。

專案案例:蟬說,在首頁使用了滿版圖片展示了品牌形象

壓縮圖片的方式

檔案較大的圖片會影響網站的開啟速度,如果網站速度過慢,可能導致使用者離開並轉向其他搜尋網站,所以壓縮圖片的檔案大小很重要,透過壓縮可以減少圖片的檔案大小,有許多線上平台可以協助壓縮圖片:

  1. iLoveIMG:支援處理 JPG、PNG、GIF 等圖片格式。可以透過它來進行圖片壓縮、調整尺寸、裁剪和轉檔等操作。
  2. Tinypng:支援壓縮 JPG 和 PNG 兩種檔案格式,而且還提供批次處理功能,可以同時壓縮多張圖片。不過,每次批次壓縮的上限是 20 張圖片,且每張圖片的檔案大小不能超過 5MB。
TAG

目錄

CATEGORIES
SHARE
Related Posts
圖片的替代文字 (Img Alt) 可以用於描述和代替圖片的內容。當瀏覽器無法順利載入圖片時,替代文字會顯示為圖片的描述文字,讓使用者能夠理解圖片的內容和意義;...
一篇文章擁有完整的文章架構,是有助於 Google 理解其內容,提升網站文章 SEO 排名,Google 爬蟲的檢索會透過文章的 H標籤 (Heading ta...