Blogger 和 Picasa 的圖片上傳和外連限制

好久沒 Po 文了，這次來整理一下 Blogger 和 Picasa 對圖片上傳的限制和處理方法吧！大家都喜歡看「圖文並茂」的文章，尤其是 Blog，於是乎大部分 BSP 系統都會有其後端的圖片上傳和文章連結的機制，舉凡無名小站、痞客幫都有，不過我覺得弔詭的是，難道 Blog 文章會放的「圖」，都一定只有「照片」嗎？一般 BSP 搞的都是「相簿」+「Blog」，那像寫些其他的文章，需要貼些 Logo 和插圖，這些只有一兩張、只和文章有關的小圖片，是要怎麼分類、放在哪個「相簿」哩？扣掉直接盜連的作法，也有人放在免費的「圖床」，但這些「圖床」在管理和保留上都有不少限制，沒人希望哪天看到文章圖片的部份都變成「叉燒包」的失效連結吧！所幸 Blogger 的圖片管理方式，雖還是結合 Picasa 網路相簿，但只要透過 Blogger 的圖片上傳介面來嵌入文章用圖，它會在網路相簿裡自動建立一個給該 Blog 專用不公開的「相簿」，方便管理和保存 Blog 用到的所有圖片（這一點之前也提過），於是乎，我 Blog 用的圖片、偷來的照片，就可以「專門」放在 Blogger -> Picasa 的「圖床」，至於自己拍的「相片」，那就外連到 Flickr 那邊，算是把 Blog 圖片和網路相簿的照片分開管理。（Picasa 用得最好的典範，首推「索爾王」）

但也因為這樣，有時候寫 Blog 需要的圖片，透過 Blogger 後台上傳到 Picasa 後常會有些疑問，像圖片上傳後會被自動「縮圖」、Blogger 也會自動產生一些 HTML code 方便顯示圖片和連結原始檔，偏偏這些自動的東西不一定合用啊，因為嵌入文章的圖片大小會影響版面的排列，一旦無法掌握，文章的圖文排版就會不如預期，而插圖，也不一定需要連結（尤其是連結到原始圖）。經過幾個測試，終於把規則找出來了（線上 Help 也都沒提到），在這就順便紀錄下來。

首先，上面是 Blogger 上傳圖片的介面，不管你上傳的圖片多大多小，也只有三個選項：「小」「中」「大」，看到這些選項，使用者根本不知道待會上傳的圖片會變成多大？是原圖大小，還是被縮成多小？原來，這三種縮圖 Size 代表的是三種解析度限制，分別是 200 (小)、320 (中)、400 (大)，但為了不破壞圖樣比例，它會以較長的那邊做等比例縮小。例如假設一張 800x600 的原圖被上傳、選擇圖片大小為「中」，那麼文章裡被嵌入的會變成一張 320x240 的圖片（把長邊 800 縮到 320 中等圖片的上限，短邊 600 等比例就變成 240 啦），知道圖的大小，才能知道該圖片的安排了（看是要文繞圖、靠左靠右還是置中）！之前也有網友發問，說為什麼自己上傳用數位相機拍的照片（N 百萬像素），貼到 Blog 後變好小？因為根據限制版面最長或最寬就 400 pixels （「大」，400x400 相當於十六萬像素），當然照片的細節就看不清楚啦！除非點到該照片、開新頁面連到該照片的「原始圖檔」，不然在文章裡最大就 400x400 啦！因此，如果你打算放張更大的圖，很抱歉，預設 Blogger 的上傳介面不允許（但，還是有手動的方法，請容後述），如果就只要插入一張 400 pixels 以下的圖檔，乾脆自己先縮圖再上傳，一方面比較快、另一方面也比較不會浪費網路相簿的總容量空間（目前 Picasa 提供的免費空間總共有 1024 MB，也就是只有 1 GB，放「照片」應該是很不夠，但放 Blog 的小圖應該綽綽有餘，可以在這個頁面查詢使用狀況，視需要還可以花錢升級）。原來在 Picasa 裡是限制單張圖最大 20 MB（或五千萬像素），Blogger 卻只允許最大 8 MB，這裡也看得出來並不鼓勵你在 Blog 上塞大圖，其實 Blog 文章重點應該是在「文字」，圖片和照片算是「點綴插花」，量太多不但拖慢大家瀏覽的速度（有興趣的自己會去點大圖看細節、或直接瀏覽網路相簿）、浪費頻寬，只看圖也會讓讀者對文字失去焦點，自己點網路相簿看圖說故事不就行啦！

上面之所以建議「自己先縮圖」，好處當然是自己也能掌握縮圖的品質，上傳到 Picasa 的圖片品質並不會縮水，但經過自動縮圖後結果可能會遠不如預期（同一張 JPEG 圖檔縮到一樣解析度，也可能因為取樣方法導致檔案大小和品質相差甚大），讓你本來打算給人家看到的細節反倒模糊了。圖檔最好是用全彩的 PNG 或 BMP 格式（但檔案較大、很舊的 IE 還不支援 XD），選 GIF 只能有 256 色，JPEG 檔則是最常用的格式，但 JPEG 縮圖很容易讓細節一整個糊掉出現格子，所以自己縮圖時除了大小，格式品質也要注意。

最後提到的是圖片外連的問題。假設用 Blogger 上傳一張圖片，在文章 HTML 原始碼會出現像下面的一段程式碼：

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NWKy6RYo98EW38YSaob_JFIWxSvMNmqh82kPc4GJmATPtqx-DQa_5mPBjwbXvJgSQEGVxHvtyDMPKb-dyaojAYsZE0IvjTp02hfSZBhjZ3jJ966XtzbVLMf7UKMTGmCpbe6s-upQWtd1/s1600-h/BloggerUpload.png">
<img style="cursor:pointer; cursor:hand;width: 400px; height: 216px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NWKy6RYo98EW38YSaob_JFIWxSvMNmqh82kPc4GJmATPtqx-DQa_5mPBjwbXvJgSQEGVxHvtyDMPKb-dyaojAYsZE0IvjTp02hfSZBhjZ3jJ966XtzbVLMf7UKMTGmCpbe6s-upQWtd1/s400/BloggerUpload.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5304446511228360850" />
</a>

除了一些特效和 CSS 外，原始碼主要包含一個連結網址 (<a href=""></a>)、和實際顯示的圖片語法 (<img src="" />，像上面說的，最大就 400 pixels)。連結網址會幫你 redirect 到原始大圖的網頁，但如果直接把這個網址貼到文章裡面，該大圖在文章內是出不來的（注意看一下，這邊的連結網址是 blogspot.com 的）！硬要嵌大於 400 pixels 的圖檔在文章裡，又想透過 Blogger 來管理和上傳，這時候只要在圖片上傳後、手動修改文章內文被插入的程式碼，就可以自行決定圖片顯示的大小囉！熟悉 HTML 的人應該知道，<img> 標籤是用來顯示圖片的語法，分析上面這段自動產生的程式碼，裡面有原始圖檔的連結網址：

http://2.bp.blogspot.com/_mDXx3vcmH6Q/SZ0t_2_TmJI/AAAAAAAACGc/AH8SDDj-le4/s1600-h/BloggerUpload.png

以及縮圖後的圖片網址：

http://2.bp.blogspot.com/_mDXx3vcmH6Q/SZ0t_2_TmJI/AAAAAAAACGc/AH8SDDj-le4/s400/BloggerUpload.png

看出差異了嗎？其實網址幾乎一模一樣，只差在「檔名」的前面，多了一個標示解析度的「路徑」，由於上面範例上傳的是用「大」圖片、於是解析度會被限制在 400 pixels，因此路徑是 /s400！所以假設是要貼大圖、不需連結和啥 CSS，上面那一大段只要替換成：

<img src="http://2.bp.blogspot.com/_mDXx3vcmH6Q/SZ0t_2_TmJI/AAAAAAAACGc/AH8SDDj-le4/s800/BloggerUpload.png" border="0"/>

就拿掉不必要的 CSS 和註解、指定顯示的大小，大圖就出得來啦（如果不指定顯示大小，也就是沒有那個路徑，感覺應該就是原始圖，但有時候外連會怪怪的顯示出不來）！其實那個路徑就是 Picasa 相簿處理縮圖的關鍵，假設不打算自己縮圖，又想用各種不同尺寸的圖片大小，只要手動調整那個路徑名稱，改成像是 /s144, /s288, /s400, /s800, 甚至更大的 /s1024, /s1440, /s1600，或直接拿掉路徑用原始圖的解析度大小，就可以任意決定 Blogger 文章裡面的圖片大小（當然那個「值」並不是任意值，但至少上面提到過的解析度都應該有，如果大於原圖的解析度，就相當是顯示原始圖啦）！不過請注意，原始圖檔的連結網址有個 /s1600-h，我懷疑 -h 是阻止嵌入文章外連的語法，詭異的是直接開啟網址卻能夠使用，可能也是類似 redirect 的作法吧！要嵌入文章使用的圖片記得避開 -h 就行了。

另外，當然也可以直接跑到 Picasa 裡找該圖片的網址，再把該網址嵌入文章內也有一樣的效果（當然這樣比較累），同樣的，Picasa 也能用上面提到的「以路徑決定縮圖解析度」的規則，雖然圖片網址和在 Blogger 顯示出來的伺服器好像不大一樣（網址變到 ggpht.com），但指的應該是同一張圖片，例如上面提到的大圖網址，在 Picasa 裡面就變成：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NWKy6RYo98EW38YSaob_JFIWxSvMNmqh82kPc4GJmATPtqx-DQa_5mPBjwbXvJgSQEGVxHvtyDMPKb-dyaojAYsZE0IvjTp02hfSZBhjZ3jJ966XtzbVLMf7UKMTGmCpbe6s-upQWtd1/s800/BloggerUpload.png

知道這個規則後，相信結合 Blogger 和 Picasa 來處理 Blog 文章內的插圖，就能更得心應手吧！（本文上面貼的圖，就是手動修改原始碼做的，所以圖片寬度能夠超過 640 pixels～以上範例也都是用那張圖上傳後的網址和程式碼貼過來的～）