2017年8月1日 星期二

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

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

Wayne Fu 0 A+
picasa-rwd-image-srcset-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. 範例效果

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


以 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" 代表的含意,需要補充的資料又更多了,請先瞭解這個名詞「設備像素比」:


簡單來說,是蘋果使用的 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbzLozjmgBGHo6b4X57Dk3N2HYMq1RDlf4ABWiqiC44pqY8-auVcT6v8TfwCSw4iWE5-zIhEpI5Iz57kOllL4VbT0NdrLHfE7tP7WzqiAe_tUaRtDu7Q9nSGNVXve7HyIe6MYsF_iVj-u/s1600/wfublog-2017.jpg

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

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

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


2. Picasa 自適應圖片語法

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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbzLozjmgBGHo6b4X57Dk3N2HYMq1RDlf4ABWiqiC44pqY8-auVcT6v8TfwCSw4iWE5-zIhEpI5Iz57kOllL4VbT0NdrLHfE7tP7WzqiAe_tUaRtDu7Q9nSGNVXve7HyIe6MYsF_iVj-u/s1600/wfublog-2017.jpg" srcset="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbzLozjmgBGHo6b4X57Dk3N2HYMq1RDlf4ABWiqiC44pqY8-auVcT6v8TfwCSw4iWE5-zIhEpI5Iz57kOllL4VbT0NdrLHfE7tP7WzqiAe_tUaRtDu7Q9nSGNVXve7HyIe6MYsF_iVj-u/w480/wfublog-2017.jpg 480w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbzLozjmgBGHo6b4X57Dk3N2HYMq1RDlf4ABWiqiC44pqY8-auVcT6v8TfwCSw4iWE5-zIhEpI5Iz57kOllL4VbT0NdrLHfE7tP7WzqiAe_tUaRtDu7Q9nSGNVXve7HyIe6MYsF_iVj-u/w600/wfublog-2017.jpg 600w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbzLozjmgBGHo6b4X57Dk3N2HYMq1RDlf4ABWiqiC44pqY8-auVcT6v8TfwCSw4iWE5-zIhEpI5Iz57kOllL4VbT0NdrLHfE7tP7WzqiAe_tUaRtDu7Q9nSGNVXve7HyIe6MYsF_iVj-u/w720/wfublog-2017.jpg 720w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGbzLozjmgBGHo6b4X57Dk3N2HYMq1RDlf4ABWiqiC44pqY8-auVcT6v8TfwCSw4iWE5-zIhEpI5Iz57kOllL4VbT0NdrLHfE7tP7WzqiAe_tUaRtDu7Q9nSGNVXve7HyIe6MYsF_iVj-u/w960/wfublog-2017.jpg 960w"/>


以上的語法,在不同的手機、平板寬度時,例如:

  • 最大寬度為 480px 的螢幕就會載入 480px 寬的圖片
  • 最大寬度為 720px 的螢幕就會載入 720px 寬的圖片

選擇合適的圖片尺寸載入,跟總是載入原圖尺寸相比,是不是能讓行動裝置的網頁速度變快呢!


3. Picasa 自適應圖片範例



上圖就是前面 Picasa 自適應圖片語法範例的效果,可用「Chrome 開發人員工具」來看效果,就能知道在網頁上、在哪支手機上,會載入哪張圖片。


picasa-rwd-image-srcset-1-Picasa 圖床的獨家應用:製作 RWD 自適應圖片,讓手機自動載入小圖,加快讀取速度

上圖是模擬 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 站長們才有的福利喔



更多 Picasa 相關文章:


更多提升網站效能相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP