開發(fā)自適應(yīng)WordPress站點的時候，我們需要實現(xiàn)圖片的自適應(yīng)，最簡單的方法就是給圖片設(shè)置一個max-width:100%的屬性，圖片會在手機或平板等小屏幕上自動縮放為屏幕顯示寬度的100%。

在web前段性能優(yōu)化原則中，有一條是需要多大的圖片，就提供多大的圖片，以避免額外的帶寬消耗。WordPress通過縮略圖為我們提供了自動裁剪上傳的圖片的功能，很簡單的支持了這個原則。然后卻沒有對自適應(yīng)提供足夠的支持，因為我們在移動設(shè)備上往往不需要像桌面設(shè)備那么大尺寸的圖片，最理想的辦法是，在移動設(shè)備上提供移動設(shè)備需要的較小尺寸的圖片。

通過srcset屬性實現(xiàn)不同寬度的設(shè)備加載不同尺寸的圖片

為了實現(xiàn)這個功能，現(xiàn)代瀏覽器為我們提供了srcset屬性，用來聲明不同尺寸的設(shè)備需要加載的圖片，具體用法是這樣子的。

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">

從上面的代碼中，我們可以看出，srcset里面可以聲明多組圖片，支持以下三個參數(shù)：

• 圖片src，也就是圖片的路徑。
• 屏幕寬度，也就是屏幕的顯示寬度，注意，不是屏幕的分辨率寬度。
• 像素放大倍數(shù)，1x就是一個物理像素顯示一個像素，也就是我們普通的電腦顯示器，2x就是兩個物理像素顯示一個像素，一般在手機上才會有這種情況。

明確了以上幾點，想在WordPress中實現(xiàn)不同設(shè)備加載不同圖片，我們只需要在輸出圖片的時候加上srcset就可以了。

通過RICG Responsive Images插件實現(xiàn)實現(xiàn)不同寬度的設(shè)備加載不同尺寸的圖片

插件使用起來非常簡單，只需要把插件安裝激活，然后在顯示圖片代碼的時候使用the_post_thumbnail，插件會自動為我們加上srcset屬性，如果沒有意外，最終輸出的圖片顯示代碼應(yīng)該是這樣的。

<a >
<img
    src="https://c.wpzhiku.com/uploads/2015/01/image.jpg"
    srcset="
       https://c.wpzhiku.com/uploads/2015/01/image-150x150.jpg 150w,
       https://c.wpzhiku.com/uploads/2015/01/image-300x300.jpg 300w,
       https://c.wpzhiku.com/uploads/2015/01/image-1024x1024.jpg 1024w,
        https://c.wpzhiku.com/uploads/2015/01/image.jpg 1800w
    ">
</a>

需要注意的是，一定要通過the_post_thumbnail顯示圖片，插件才可以起作用。當(dāng)然通過后臺添加媒體插入文章中的圖片一樣也是可以的。