更新日期：2020-12-21

在後台『設定』項目中有一個子項目『媒體設定』，裡面就有三種圖片尺寸可做設定。這用在上傳圖片後，系統會根據這些值，自動產生不同的尺寸圖片，但是很多人都利用各種方式把它閹割了，理由是…圖片很占空間。

當我們上傳一張圖片的時候，自動再生成三種圖片尺寸，分別是 large(大型尺寸)、medium(中型尺寸)、humbnail(縮圖尺寸)。但其實還有一個，叫做 medium_large，它的圖片寬度被設定在 768px，所以加上原本的圖片，一共有五張，根據經驗，一張 2MB 的原始圖檔上傳後，產生的另外四張圖片加起來通常不太會超過 500KB，甚至更少。

為何不應該關閉自動縮圖功能？

這關係到 WordPress 4.4 之後的 Responsive Images 功能

當你在文章中插入圖片時，應該有發現到 img 標籤多了兩個屬性，一個是 srcset，另一個是 sizes。這兩個是 html5 的屬性，用法和 css 下 media queries 一樣，可以為了節省不必要的傳輸浪費時間，先判斷使用者螢幕寬度下載不同圖檔。
舉下面的例子來說明：

srcset = "/wp-content/uploads/image.jpg 1800w, 
 /wp-content/uploads/image-1200x800.jpg 1200w, 
 /wp-content/uploads/image-768x512.jpg 768w"
  • 1800w 的意思是當螢幕小於 1800px 的時候顯示 image.jpg 檔。
  • 1200w 同理，再當螢幕小於 1200px 的時，以 image-1200×800.jpg 檔顯示。
  • 768w 最後再小於 768px 時，則使用 image-768×512.jpg 圖檔。
  • 若螢幕大於 1800px 時，就載入原本的 src 裡面的值。

所以利用 srcset 屬性，也可以讓小螢幕、或是行動裝置的人，完全避開原本的 src 的大圖檔。是不是這樣子一來就可以快速把網頁整個載入完成了？

如果你用了下列方式，那你真的就無法享受到它的好處了。

  • remove_filter( ‘the_content’, ‘wp_make_content_images_responsive’ );
  • 或是用 wp_calculate_image_srcset 移除了 srcset