過去曾在「加快 Blogger 行動版圖片載入速度的密技」告訴讀者，Blogger 使用的圖片只要從後台上傳，也就是使用 Picasa 圖床，行動版就會自動改為載入小尺寸的圖片。因為有這樣的獨家功能，Picasa 只要上傳一張圖片，就會產生手機版尺寸的圖片，我一直認為 Picasa 是當今最佳圖床，沒有之一。
只不過知道這件事的使用者不多，偶爾還是會有站長問我這件事：「手機版的圖片好像比較模糊？」(請參考「Blogger 各種圖片異常狀況處理」→「四、手機圖片模糊」→「2. Blogger 行動版的圖片」)
這正是因為 Blogger 手機版 Picasa 圖片，寬度被自動縮小為 280px，在目前智慧手機規格越來越高的情況下，幾年前 Blogger 官方這樣的設計，看起來跟不上科技發展了，因為現在的手機傳輸速度更快，也能顯示更高品質的圖片。
因此，今年官方推出的「全新自適應 RWD 範本」，行動版已經取消了 "圖片自動縮小為 280px 寬"這件事。
但是，並非所有使用者都配備高檔手機，還是得顧慮低階手機處理圖片的能力。那麼現在行動版圖片不會自動縮小的話，能有辦法完美處理所有行動裝置的圖片嗎？
我在這篇「Blogger 新版 RWD 範本，對 SEO 有哪些加分之處？」→「三、自適應圖片尺寸」看到了曙光，官方新版的程式碼，示範了如何產生自適應圖片，在不同尺寸的螢幕會各自載入不同尺寸的圖片，本篇會介紹作法及原理。
P.S. 一定會有讀者詢問「Picasa 不是關閉了？」，若有此疑問請先看這篇「其實 Google 相簿依然是 Picasa，你可能不太相信」。
(圖片出處: picjumbo.com)
一、SRCSET 使用說明
照理來說，一個 IMG 標籤只能顯示一張圖片，而能夠使用自適應圖片的關鍵，在於使用了新的 IMG 屬性 SRCSET，可以設定多張圖片，根據不同螢幕寬度來顯示對應的圖片。
1. 範例效果
先來看一下自適應圖片的效果，請進入這個網站：
以 Chrome 為例，按
不過測試時需要注意的是，瀏覽器通常會快取圖片，導致多看幾次後，圖片可能就不切換了。
那麼請勿必參考這個網頁「Disabling Chrome cache for website development」，有圖片說明如何關閉 Chrome 的快取功能。
2. 基本語法
範例網頁提供的自適應圖片效果，使用的語法如下：
<img src="images/2000x1000.png" srcset="
images/500x250.png 500w,
images/1000x500.png 1000w,
images/1500x750.png 1500w,
images/2000x1000.png 2000w,
images/3000x1500.png 3000w"/>基本的語法說明請參考這篇「用 srcset 屬性做簡單的 Responsive Image」，本篇非語法教學，以下用最簡單、但不完全正確的敘述，來說明運作原理：
- 若瀏覽器太舊看不懂 srcset，會讀取 src 的圖片網址來顯示
- 當偵測到瀏覽器為不大於 500px 寬時，顯示 500x250.png 這張圖
- 當偵測到瀏覽器為不大於 1000px 寬時，顯示 1000x500.png 這張圖
- 其他螢幕尺寸以此類推
- 找不到合適的螢幕寬度設定時，顯示所有設定中最大的那一張
為什麼說以上說明不完全正確呢？因為 "500w"的 "w"，並不是代表 "px"的意思。
目前先看成 px 比較容易理解，有興趣的讀者可繼續看後面的進階說明。
3. 設備像素比
要說明這個 "w"代表的含意，需要補充的資料又更多了，請先瞭解這個名詞「設備像素比」：
簡單來說，是蘋果使用的 Retina 螢幕顯示技術，用了 2x2 的 像素來顯示原本 1x1 的像素。例如我們知道 iPhone4 的螢幕寬度是 320x480 px，但實際上蘋果卻在這樣的螢幕尺寸，顯示了 640x960 px 這樣 4 倍大的面積，那麼圖片效果自然比起一般的 320x480 手機清楚太多了。
而每一台手機的「設備像素比」數值都不一樣，詳細列表可參考這個網頁：
4. 實際像素值
所以 iPhone4 的「設備像素比」為 2，代表螢幕寬度 320px，背後是使用 640px 來顯示，我們可以看做 640px 寬才是 iPhone4 的 "實際像素值"。
那麼前面無法理解的 "w"現在就可以懂了，"w"代表的就是 "實際像素值"。
我們再重新闡釋一次前面提到的 srcset 基本語法，這樣就沒錯了：
- 當偵測到瀏覽器的 "實際像素值"小於 500px 寬時，顯示 500x250.png 這張圖
- 當偵測到瀏覽器的 "實際像素值"小於 1000px 寬時，顯示 1000x500.png 這張圖
二、Picasa 自適應圖片語法
有了以上概念後，可以開始來看 Picasa 如何處理自適應圖片。
前面的範例網頁，為了顯示不同尺寸比例的同一張圖片，必須上傳多張圖片，但 Picasa 完全不需要這麼做，只需要上傳一張圖片!
1. Picasa 網址參數
從 Blogger 上傳圖片到 Picasa 的流程可參考「Blogger 使用圖片的各種技巧：上傳+取得網址」。
Picasa 網址有參數可以設定，直接調整參數就能控制圖片大小，詳細原理可參考「使用 Picasa 的三大好處」→「二、使用 Google Drive 當圖床的影響」→「3. Picasa 的網址參數」。
舉例來說，這是一張 Picasa 圖片網址：
https://2.bp.blogspot.com/-wef9oDXpQ2M/WX3ssoXww3I/AAAAAAAAQDY/hduoXB-NPsMNpMrQs4knQKHCy4rOwNo5wCLcBGAs/s1600/wfublog-2017.jpg將紅色字串 s1600 改成以下字串：
- w320 → 代表寬度為 320px
- w640 → 代表寬度為 640px
- w960 → 代表寬度為 960px
可自行貼在瀏覽器測試，有了這樣的機制，要產生自適應圖片語法就很容易了。
2. Picasa 自適應圖片語法
稍微修改一下前面範例網站的自適應圖片語法：
<img src="//2.bp.blogspot.com/-wef9oDXpQ2M/WX3ssoXww3I/AAAAAAAAQDY/hduoXB-NPsMNpMrQs4knQKHCy4rOwNo5wCLcBGAs/s1600/wfublog-2017.jpg" srcset="
//2.bp.blogspot.com/-wef9oDXpQ2M/WX3ssoXww3I/AAAAAAAAQDY/hduoXB-NPsMNpMrQs4knQKHCy4rOwNo5wCLcBGAs/w480/wfublog-2017.jpg 480w,
//2.bp.blogspot.com/-wef9oDXpQ2M/WX3ssoXww3I/AAAAAAAAQDY/hduoXB-NPsMNpMrQs4knQKHCy4rOwNo5wCLcBGAs/w600/wfublog-2017.jpg 600w,
//2.bp.blogspot.com/-wef9oDXpQ2M/WX3ssoXww3I/AAAAAAAAQDY/hduoXB-NPsMNpMrQs4knQKHCy4rOwNo5wCLcBGAs/w720/wfublog-2017.jpg 720w,
//2.bp.blogspot.com/-wef9oDXpQ2M/WX3ssoXww3I/AAAAAAAAQDY/hduoXB-NPsMNpMrQs4knQKHCy4rOwNo5wCLcBGAs/w960/wfublog-2017.jpg 960w"/>以上的語法，在不同的手機、平板寬度時，例如：
- 最大寬度為 480px 的螢幕就會載入 480px 寬的圖片
- 最大寬度為 720px 的螢幕就會載入 720px 寬的圖片
選擇合適的圖片尺寸載入，跟總是載入原圖尺寸相比，是不是能讓行動裝置的網頁速度變快呢！
3. Picasa 自適應圖片範例
上圖就是前面 Picasa 自適應圖片語法範例的效果，可用「Chrome 開發人員工具」來看效果，就能知道在網頁上、在哪支手機上，會載入哪張圖片。
上圖是模擬 iPhone4 的效果：
- 可看到手機螢幕寬度為 320x480
- 請參考前面提到的「設備像素比」，iPhone4 的實際像素寬度為 640px (而非 320px)
- 所以在 srcset 中，會找到最接近的 600w，所設定的對應圖片來顯示
- 請注意紅框的 "w600"，是我們將 Picasa 圖片網址參數設定為 600px 寬的那張圖。
- 這就證明了使用 srcset 不會載入原尺寸的那張圖。
- 在螢幕上顯示的尺寸，由於手機螢幕寬 320px，扣掉左右 padding 各 10px 後，圖片呈現的寬度為 300px
三、Sizes 屬性
RWD 圖片除了 srcset 需要設定，另外還有一個重要屬性
<img sizes="(max-width: 320px) 300px, 500px" .../>以上語法代表的意思為：
- 螢幕最大寬度為 320px 時，圖片顯示的寬度為 300px
- 螢幕寬度大於 320px 時，圖片顯示的寬度為 500px
- 可依照 Media Queries 的概念，設定多組條件
由於本篇不著墨過多語法教學，關於
四、自適應圖片語法轉換器
瞭解本篇的語法原理後，從 Blogger 上傳的每張 Picasa 圖片，都可使用 srcset, sizes 參數來製作自適應圖片。
只不過，自己手動產生語法是又慢又耗時的，這項工作可以交給程式代勞。
之前曾寫了「Blogger 圖片語法轉換器」，主要為了處理開頭提到的行動版圖片。
那麼這個轉換器現在會進行改版，變成可以轉換為自適應圖片的語法，近期就會發佈。
簡單做個結語吧，有了自適應圖片語法轉換器後，Picasa 不但可以說是最佳圖床，而且沒有任何對手可以看到車尾燈，這可是 Blogger 站長們才有的福利喔！
更多 Picasa 相關文章：
更多提升網站效能相關文章：