WordPress 媒體庫圖片大小(尺寸)研究筆記

WordPress 的媒體庫在上傳圖片後,會自動生成複數個不同尺寸規格的圖檔,用來提供 WP 不同佈局應用與佈景主題(Theme)所需的圖片大小。目的是為了用最適合的圖片大小呈現在網頁上,藉以提供最快的展示速度。

試想想,如果只是為了呈現尺寸 100×100px 的圖片指引,就要載入 2000×2000px 的原圖,再縮小呈現,這樣不僅讀者開啟網站的速度會變慢,也會佔用相當多的網路流量 —— 而流量是要算錢的。

其中佈景主題需要的圖片大小是由主題設計師自行決定,早早寫在網頁指令中,除非手動修改否則無法改變。如果你終究還是想要禁止佈景主題的自動縮圖,可以在佈景主題的「functions.php」檔案中,尋找「add_image_size」、「set_post_thumbnail_size」等函數進行修改。

至於文章需要的圖片大小可由網站主、部落客輕易地自行設定,相關選項可在後台(Dashboard)的「設定(Setting)」下的「媒體(Media)」中找到縮圖大小、中等大小與大圖大小等圖片大小的尺寸設定,主要作用是在撰寫文章時可直接導入。

由於尺寸建立越多越佔用硬碟空間,因此我建議媒體大小的尺寸可以選出最常用的尺寸後(例如中等大小),其餘的都填入 0 值,藉以禁止產生縮圖。

不過除此之外,基本上這些圖檔的存在並不會影響網站效能,因此在一些號稱 Unmetered website space 無容量限制的主機(例如:Bluehost)可以設定各種尺寸也無所謂。

自動建立不同尺寸的媒體庫圖片

將一張檔名為「Vedfolnir-Images.png」,檔案大小為 181911 Bytes 的圖片,上傳到 WordPress 媒體庫後,依照系統設定(只保留中等大小的尺寸)與佈景主題內建規範後,將自動生成下面七個檔案:

  1. Vedfolnir-Images-1320x500.png,檔案大小為307841。
  2. Vedfolnir-Images-160x160.png,檔案大小為12838。
  3. Vedfolnir-Images-300x169.png,檔案大小為30462。
  4. Vedfolnir-Images-320x320.png,檔案大小為30164。
  5. Vedfolnir-Images-520x245.png,檔案大小為77597。
  6. Vedfolnir-Images-720x340.png,檔案大小為103277。
  7. Vedfolnir-Images-980x450.png,檔案大小為241061。

從這邊可以發現,這組佈景主題已經內建六種格式。弔詭的是其中兩個檔案的大小甚至比起原圖還要更大。

由於 WP 系統設定下的媒體圖片大小是依照原始照片的長寬去等比例縮小照片,但是佈景主題卻是將原圖片裁切出需要的尺寸,等於是新建立一張圖片,因此才會有圖片尺寸變小,但是檔案容量反而變更大的情況。

原本一張 181KB大小的圖片,上傳後佔用的硬碟空間將會是 985181 Bytes(約985KB),等於增長了5.44倍,而一個小型網站的圖片量就可能上千張,如此一來自然會佔用相當多的硬碟空間。

另外值得一提的,如果在媒體庫中刪除圖檔,那其他因此產生的縮圖也會被自動移除,不用擔心會有殘餘檔案留下。

發表意見