wordpress如何載入屬性srcset和sizes
WordPress 4.4 開始新增了響應式圖片屬性 srcset和sizes
這幾天把手上一部分WordPress網站升級到最新版4.4,就學到新東西了。發現4.4版給所有在文章內容區的圖片都加上了兩個屬性:srcset和sizes。比如: 這倆個屬性的作用是為不同顯示尺寸加
這倆個屬性的作用是為不同顯示尺寸載入不同的圖片源,這樣就能在圖片本身做到「響應式」,而不僅僅是跟隨屏幕尺寸了。
比如上面圖中的srcset為
<img
xxxxx
srcset="
http://127.0.0.1/startbootstrap/wp-content/uploads/2020/03/img_fjords_wide-1.jpg 1000w,
http://127.0.0.1/startbootstrap/wp-content/uploads/2020/03/img_fjords_wide-1-300x105.jpg 300w,
http://127.0.0.1/startbootstrap/wp-content/uploads/2020/03/img_fjords_wide-1-768x269.jpg 768w"
xxxx
/>
其中每一段的格式為srcset=」[圖片URL] [圖片寬度], [圖片URL] [圖片寬度]…」,按最新的標準,單位「w」表示當前顯示寬度的像素值。解釋起來就是這張圖片在低於300px寬度的時候,顯示小圖「gt-scavenger_1-300×507.jpg」;高於300像素且低於606像素時,顯示中等尺寸圖片「gt-scavenger_1-606×1024.jpg」;當圖片顯示尺寸大於1407像素時就顯示全尺寸圖「gt-scavenger_1.jpg」。
另外一個屬性sizes的寫法
sizes="(max-width: 1407px) 100vw, 1407px"
其格式為sizes=」[media query] [視窗寬度], [media query] [視窗寬度] …」。這裡的寬度為視窗寬度,即我們常說的viewport寬度。和我們在媒體CSS中寫的媒體查詢是一致的,這裡最後一個「1407px」指默認狀態下,即前面的媒體查詢沒有描述到的情況下這張圖片顯示的寬度。以上代碼的通俗解釋是,這張圖片在1407px寬的視窗內撐滿視窗(100vw),而視窗寬度超過1407px,圖片就按1407px的最大尺寸顯示。
srcset和sizes為HTML5的最新屬性,合理使用它們,尤其是srcset,可以有效避免資源的過度載入,在移動端通過按需載入,減少圖片的載入量,加快網頁打開速度。不過在實際開發中這樣分級顯示圖片是很麻煩的,要製作多個尺寸的圖片,HTML里還要加那麼多代碼…想想就頭疼。
令人驚喜的是在最新版WordPress中你完全不需要進行任何額外操作,只需像平時那樣在文章中插圖片即可。WordPress會自動根據你上傳的圖片給,按照各級縮略圖規划出適合的顯示分級,真的很強大!
不過在一些舊的WordPress項目中我們也碰到了問題。比如在有些頁面中我已經做了「懶載入」,即預先在img的src里放一張空圖片,把實際URL寫到data-original屬性里,再根據頁面滾動的高度,把data-original的值放到src屬性里。當圖片被賦予了srcset屬性時,所做的這一切就形同虛設了。頁面載入的時候,瀏覽器已經從srcset屬性中讀取了一張適配的圖片到src屬性中:
要避免這種情況,我只能在懶載入和srcset之間二取其一。如果要在WordPress中禁用srcset和sizes,你可以把以
//disable srcset on images
function disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );
禁用WordPress響應式圖片屬性srcset和sizes
方法1:在主題的 functions.php 文件末尾追加下面的函數
//disable srcset on images
function disable_srcset( $sources ) {
return false;
}
add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );
方法2
//wordpress禁用圖片屬性srcset和sizes
add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) );