Picasa 圖床的獨家應用：製作 RWD 自適應圖片，讓手機自動載入小圖，加快網頁讀取速度

過去曾在「加快 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. 範例效果

先來看一下自適應圖片的效果，請進入這個網站：

• http://srcset.salcode.com/

以 Chrome 為例，按 Ctrl +、Ctrl - 來縮放螢幕，就會看到隨著不同的螢幕寬度，網頁分別載入不同尺寸的圖片。

不過測試時需要注意的是，瀏覽器通常會快取圖片，導致多看幾次後，圖片可能就不切換了。

那麼請勿必參考這個網頁「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" 代表的含意，需要補充的資料又更多了，請先瞭解這個名詞「設備像素比」：

• web移動端，需要清楚設備像素比devicePixelRatio的應用

簡單來說，是蘋果使用的 Retina 螢幕顯示技術，用了 2x2 的 像素來顯示原本 1x1 的像素。例如我們知道 iPhone4 的螢幕寬度是 320x480 px，但實際上蘋果卻在這樣的螢幕尺寸，顯示了 640x960 px 這樣 4 倍大的面積，那麼圖片效果自然比起一般的 320x480 手機清楚太多了。

而每一台手機的「設備像素比」數值都不一樣，詳細列表可參考這個網頁：

• SCREEN SIZES

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoRx9EHmwmCJu3kuloNl3Kotvg4hGvcYNfZbW7pSlWi8fsvFvzvM8W-zdDtpdzzN4aKj8QG3QjqyYB2mrDAEfDoVXljU1JaJiikIQDEzNMEP04O4-zMUUing-fH716UR_KAKOlOERIi6h/s1600/wfublog-2017.jpg

將紅色字串 s1600 改成以下字串：

• w320 → 代表寬度為 320px
• w640 → 代表寬度為 640px
• w960 → 代表寬度為 960px

可自行貼在瀏覽器測試，有了這樣的機制，要產生自適應圖片語法就很容易了。


2. Picasa 自適應圖片語法

稍微修改一下前面範例網站的自適應圖片語法：

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoRx9EHmwmCJu3kuloNl3Kotvg4hGvcYNfZbW7pSlWi8fsvFvzvM8W-zdDtpdzzN4aKj8QG3QjqyYB2mrDAEfDoVXljU1JaJiikIQDEzNMEP04O4-zMUUing-fH716UR_KAKOlOERIi6h/s1600/wfublog-2017.jpg" srcset="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoRx9EHmwmCJu3kuloNl3Kotvg4hGvcYNfZbW7pSlWi8fsvFvzvM8W-zdDtpdzzN4aKj8QG3QjqyYB2mrDAEfDoVXljU1JaJiikIQDEzNMEP04O4-zMUUing-fH716UR_KAKOlOERIi6h/w480/wfublog-2017.jpg 480w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoRx9EHmwmCJu3kuloNl3Kotvg4hGvcYNfZbW7pSlWi8fsvFvzvM8W-zdDtpdzzN4aKj8QG3QjqyYB2mrDAEfDoVXljU1JaJiikIQDEzNMEP04O4-zMUUing-fH716UR_KAKOlOERIi6h/w600/wfublog-2017.jpg 600w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoRx9EHmwmCJu3kuloNl3Kotvg4hGvcYNfZbW7pSlWi8fsvFvzvM8W-zdDtpdzzN4aKj8QG3QjqyYB2mrDAEfDoVXljU1JaJiikIQDEzNMEP04O4-zMUUing-fH716UR_KAKOlOERIi6h/w720/wfublog-2017.jpg 720w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoRx9EHmwmCJu3kuloNl3Kotvg4hGvcYNfZbW7pSlWi8fsvFvzvM8W-zdDtpdzzN4aKj8QG3QjqyYB2mrDAEfDoVXljU1JaJiikIQDEzNMEP04O4-zMUUing-fH716UR_KAKOlOERIi6h/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 需要設定，另外還有一個重要屬性 sizes，設定方法舉例如下，需要有一點 RWD 的 CSS 語法概念比較容易懂：

<img sizes="(max-width: 320px) 300px, 500px" .../>
以上語法代表的意思為：

• 螢幕最大寬度為 320px 時，圖片顯示的寬度為 300px
• 螢幕寬度大於 320px 時，圖片顯示的寬度為 500px
• 可依照 Media Queries 的概念，設定多組條件

由於本篇不著墨過多語法教學，關於 sizes 的概念與詳細說明，請參考這篇「响应式图片srcset全新释义sizes属性w描述符」。

四、自適應圖片語法轉換器

瞭解本篇的語法原理後，從 Blogger 上傳的每張 Picasa 圖片，都可使用 srcset, sizes 參數來製作自適應圖片。

只不過，自己手動產生語法是又慢又耗時的，這項工作可以交給程式代勞。

之前曾寫了「Blogger 圖片語法轉換器」，主要為了處理開頭提到的行動版圖片。

那麼這個轉換器現在會進行改版，變成可以轉換為自適應圖片的語法，近期就會發佈。

簡單做個結語吧，有了自適應圖片語法轉換器後，Picasa 不但可以說是最佳圖床，而且沒有任何對手可以看到車尾燈，這可是 Blogger 站長們才有的福利喔！

• 自適應 RWD 圖片語法產生器

更多 Picasa 相關文章：

更多提升網站效能相關文章：