2015年7月30日

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

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

Wayne Fu 0 A+
picasa-google-photo-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 網路相簿」後:

picasa-change-url-1

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


wfublog-anniversary

上圖的網址為:

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


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

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


picasa-change-url-2

這是上圖的網址參數:

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 的站長,圖片都是從文章編輯的畫面上傳,那麼一點都不會受到影響。

wfublog-anniversary

上圖是後台上傳產生的圖片,網址為:

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+ 相片的圖片網址

google-plus-image-url-1

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

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

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://lh3.googleusercontent.com/T4V29Dh1pnHA_z5hz7mtE-OJkMcaLejzfQiH2oj99Xo=w623-h641-no
看得出「Google 相片」的圖片網址格式跟以往大相逕庭,完全沒有檔名,且參數 "w623-h641-no" 挪到了最後。

這樣的參數一樣能夠修改,只不過測試的結果:
  • 跟 Blogger 不相容,無法產生縮圖
  • 跟 G+ 相容,可以產生縮圖



六、總結


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

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

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

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


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

沒有留言:

張貼留言注意事項:

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

TOP