2009-02-19

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~以上範例也都是用那張圖上傳後的網址和程式碼貼過來的~)

回應: 14