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

當我們上傳一張圖片的時候,自動再生成三種圖片尺寸,分別是 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