避免使用 PICASA 網路相簿圖片外連，會造成 Google+ 及 Blogger 縮圖失效

之前曾寫過一篇「Google Drive 當圖床對 Blogger 的不好影響__使用 Picasa 的三大好處」，主要是因為 PICASA 的圖片網址，能夠產生各種縮圖尺寸，這算是 Google 非常高竿的獨家技術。

不過 Google 前陣子推出了同質性的新產品「Google 相片」，這個決策似乎影響了「PICASA 網路相簿」，從七月以來發生了一些災情：

1. Blogger 縮圖失效：詳細情形請見「Blogger 相關文章 V2__安裝懶人包」的留言 #43 ~ #45。

2. Google+ 縮圖失效：

針對這些狀況，有必要瞭解一下如何因應，如果習慣使用 PICASA 網路相簿的讀者，請詳讀本文的分析，我們要討論可能的替代方案：

• Blogger 上傳圖片
• Google+ 相片(相簿)
• Google 相片(相簿)

一、G+ 與 Blogger 的縮圖網址

雖然這個情況看起來很嚴重，不過 WFU 認為會受到影響的讀者沒有想像中多，因為相信絕大多數 Blogger 站長文章中使用的圖片，多半是從後台編輯文章時上傳，那麼就不必擔心此事。

要瞭解因應之道，得先知道 G+ 與 Blogger 的縮圖原理。請先閱讀「使用 Picasa 的三大好處」，大致瞭解以下幾點：

• Blogger 後台上傳的圖片，網址參數最後都會有 ".../s???/檔名.jpg" 這樣的格式 → ??? 就是代表這張圖片的尺寸
• Blogger 會從每篇文章的第一張圖片網址，將 "s???" 這個參數，改為 "s72-c"，在 feed 裡存成縮圖 → 這代表 72px 的正方形縮圖
• G+ 則會將 "s???" 這個參數，改為符合當下寬度尺寸參數，來顯示縮圖
• 我們如果想自行產生 300px 寬的縮圖，那麼只要將參數改為 s300 即可，其他尺寸可以此類推。

有了以上基礎知識後，我們再繼續看下去。

二、PICASA 網路相簿

1. 參數改變了

現在我們進入「PICASA 網路相簿」後：



隨意找張圖片來測試，如上圖，按右鍵取得圖片網址。




上圖的網址為：

https://lh3.googleusercontent.com/-hMRDr2V-aXs/U1osx1KDYAI/AAAAAAAAJTQ/MUCYt2BFiOk/s420-Ic42/wfublog-anniversary.png
請注意紅字的參數，格式跟以前完全不一樣了，後面多了 "IC42" 這樣的字串。


2. 無法取得各種尺寸縮圖

根據「一、G+ 與 Blogger 的縮圖網址」我們知道，若將參數改為 "s300" 可產生 300px 寬的縮圖。但現在 PICASA 網路相簿完全失去了這個功能，改了網址參數後，只會看到以下畫面：




這是上圖的網址參數：

https://lh3.googleusercontent.com/-hMRDr2V-aXs/U1osx1KDYAI/AAAAAAAAJTQ/MUCYt2BFiOk/s300/wfublog-anniversary.png
所以現在讀者可以了解，PICASA 網路相簿的圖片網址，以後將無法改變網址參數。如果某篇文章第一張圖片使用了這樣的圖片，會導致無法產生 Blogger 縮圖，同時該篇文章分享到 Google+ 時，也無法產生縮圖了！！


3. 可能的原因

前面提過，能夠產生各種縮圖尺寸，是 Google 的獨家技術，不過這需要大量的伺服器 CPU 運算。

個人猜測，也許 Google 同質性的產品太多，因此 PICASA 網路相簿是取捨下的犧牲品，Google 決定減少 PICASA 網路相簿的 CPU 使用率，導致拔除了「產生各種縮圖尺寸」這項功能。

三、Blogger 的圖片網址

如果是純粹使用 Blogger 的站長，圖片都是從文章編輯的畫面上傳，那麼一點都不會受到影響。



上圖是後台上傳產生的圖片，網址為：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7rHjbCokobGhwTKxYA7vLEbrAYK803C8YhAFff2bTu0NdFmtgSktWeykkjB_pBASf5WQt_U2cMTmQAIO2QNlr15qLZdIiz_vJoy4xjtJlXiSKWCxJXZUKAfyaSw-42ZQ-IWU7ASRgkyhZ/s1600/wfublog-anniversary.png
我們可看到參數 s1600，代表這是原圖大小。

同時也可任意將參數改為 s100 → 就會產生 100px 寬的圖片 → 由於參數可任意修改，這代表要產生 Blogger 縮圖、或是 G+ 縮圖都是沒有問題的。

四、Google+ 相片

相信我，「Goolgle+ 相片」跟「Google 相片」，你一定會搞混。

1. 如何進入 Google+ 相片

這是原本 Google+ 相片的網址：

• https://plus.google.com/photos/

但是 Google 為了推廣 Google 相片，上面這個網址會強制跳到 Google 相片。

因此，要進入原本的 Google+ 相片請改由以下網址：

• https://plus.google.com/photos/highlights

2. 取得 Google+ 相片的圖片網址



隨便進入一張圖片來測試，如上圖，按右鍵取得圖片網址。

這張圖的圖片網址格式如下：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNiR4WwTlk-9KORZFSEx7hYdFbN6VtkfccyhpJlXS9IoKXG_G3tyQ9NDFGbiaLwlHGGQvTpo2NHwvO4u-Mkh-dfPiJmzgh3Ki4N1EELLx91-RVJvTG328TwEjuhs3DgNtfZWDUH3NMj8a/w945-h630-no/cc0-image-search-engine.jpg

• 我們可看到網址參數不太一樣 → "w945-h630-no"
• 這參數代表此圖 945px 寬、630px 高
• 若改成其他數字，一樣能呈現不同尺寸的縮圖

3. 無法產生 Blogger 縮圖

經過實測後，這樣的參數可以讓 G+ 產生縮圖，畢竟這是「G+ 相片」，沒什麼道理無法處理。

但是很可惜，無法產生 Blogger 縮圖。推測原因為，Blogger 需要 "s???" 這樣格式的圖片網址，系統才能夠處理。


4. 手動修改參數

為了讓 Blogger 順利產生縮圖，我們將 "w945-h630-no" 這個參數改為 "s1600"、或是 "s0" 也可，都是原圖尺寸的意思。

圖片網址成為：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNiR4WwTlk-9KORZFSEx7hYdFbN6VtkfccyhpJlXS9IoKXG_G3tyQ9NDFGbiaLwlHGGQvTpo2NHwvO4u-Mkh-dfPiJmzgh3Ki4N1EELLx91-RVJvTG328TwEjuhs3DgNtfZWDUH3NMj8a/s1600/cc0-image-search-engine.jpg
這樣就能讓 Blogger 產生縮圖了。

因此結論為：使用「G+ 相片」的圖片網址時，需要手動修改參數為 "s???" 這樣的格式。


5. 圖片無法顯示的原因

雖說「Google+ 相片」也能順利產生 Blogger 及 G+ 縮圖，但比「從 Blogger 後台上傳」的圖片稍微麻煩一些，而且也容易不小心設錯權限而讓訪客看不到圖片。

解決的方法請參考「Blogger 各種圖片異常狀況處理」→「六、圖片消失了」，將 G+ 相簿的權限設定為 "公開"。

五、Google 相片

最後來測試「Google 相片」。

隨意點選一張圖片，按右鍵複製網址後，圖片網址格式如下：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU66e32gRSIMqCQsEJDG0FPwLzkpOAqVorueIpRAUp3mRT7oJHgG1xA8FcYE_8jFmriZit3R9RgTY9kLnBIZriGGbPEq93IUYz9pdqQ4p5EOZT_E6Q1fic3H0TWZMwZtqKvLsRe4-lDAGF/w623-h641-no
看得出「Google 相片」的圖片網址格式跟以往大相逕庭，完全沒有檔名，且參數 "w623-h641-no" 挪到了最後。

這樣的參數一樣能夠修改，只不過測試的結果：

• 跟 Blogger 不相容，無法產生縮圖
• 跟 G+ 相容，可以產生縮圖

六、總結

看完全部的測試結果，相信讀者也都知道該怎麼做了。如果你是 Blogger 站長，那麼以下是簡單的結論：

1. 不要使用「PICASA 網路相簿」、「Google 相片」產生的圖片網址 → 無法產生 Blogger 縮圖 → 會導致各種需要縮圖的 Blogger 工具失效，例如「熱門文章」、「相關文章」、「隨機文章」、「首頁輪播」等等。

2. 最好利用「Blogger 後台上傳圖片」來取得圖片網址。

3. 不嫌麻煩的話，可以使用「G+ 相片」來取得網址，再修改參數為 "s???"，並注意權限要設定為 "公開"。

更多 PICASA 相關文章：