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

匿名 提到...

abin 你好,
'硬要嵌大於 400 pixels 的圖檔在文章裡... 只好把圖片上傳後、打開 Picasa...' 這段可能可以修正一下...
你把 img src 改成 http://2.bp.blogspot.com/_mDXx3vcmH6Q/SZ0t_2_TmJI/AAAAAAAACGc/AH8SDDj-le4/s800/BloggerUpload.png 了, 大圖還出不來的原因,
是因為 被前面的 style width: 400px; 限制住了!

所以要顯示大圖的人, 只要:
1. 把 width: xxxpx; height: xxxpx; 拿掉
2. 把 s400 改成 s800, s1024, s1440, s1600 就好了,
不用大費周章, 還去開 picasa 找圖.

沒大圖可以測試的話, 我貢獻一張: http://2.bp.blogspot.com/_qC0QBcVjmlw/SZ2PxdW5BqI/AAAAAAAAIPg/sMX0qecNtqo/s1600/-IMGP0688.jpg

Abin 提到...

To mania:
謝謝你的提醒,我修改了一下內容。
基本上 Blogger 原始圖出不來的原因,和 style width: 400px; 沒關係(因為我從來都不用那段 CSS,都會手動拿掉),關鍵在那張大圖,它用的是 /s1600-h/ 這個路徑,-h 好像會阻擋直連(放在 html 裡面試試看就知道,但是貼網址直接開啟卻沒問題),所以即便是你拿掉 CSS 的設定也出不來,不過,只要改成 /s1600/,或是直接把這個子目錄路徑拿掉也就可以了!
不過你說的對,不用再大費周章去開 picasa 找圖檔網址了!

匿名 提到...

你好:
我在picasa的相片外連上也遇到困難
在使用語法貼圖時有試著將(img src="" /)語法最後的”/”給刪除
並將圖片大小改為”/s1024”
但貼上部落格之後只能顯示叉燒包(非Blogger)
好像只有”/s144”、”/s288”、”/s400”、”/s800”這幾種大小才能正常顯示
不知該如何解決
謝謝

Abin 提到...

最大或原始檔是用 /s1600,你可以試試看...

購物狂 提到...

感恩喔~~

學了一招~~ 謝謝

提到...

不好意思Abin兄,想請教您一個問題...
這幾天把自已的blog,註冊一個新的網堿之後問題來了!
原本舊網堿www.tsu921.blogsopt.com 一切安然無樣,
購買一個新網堿,轉換成後www.tsu921.com之後,發現..
之前上傳到picasa的照片,貼在blogger的圖片全部失效
不曉得該怎麼著手解決,方便指導一下嗎?謝謝您^^

Abin 提到...

To 祖:
原來 Blogger 上傳圖片的作法,是在 Picasa 開一個「不公開」的私密相簿、對應到該 Blog 來使用,雖然是個不公開相簿,但根據 Blog 的「網址」設定,該照片在該網址的 Blog 上顯示不會有問題(但只能在該 Blog 使用)。
你現在的狀況是,因為換了網址、Picasa 原先對應到的相簿卻對不到其 Blog,所以換了網址的 Blog 圖片連結都失效了。我想到有三個作法,第一個最笨,就是編輯每篇文章、重新上傳照片。第二個作法是,你到 Picasa 裡把那個失效的 Blog 相簿改成公開相簿,雖然 Blog 相簿暴露出來,但外連的問題可能可以解決。最後一個辦法就是求助於 Blogger/Picasa 囉,看他們能不能幫你無痛遷移過去,不需要用第一個作法自己手動再上傳。

黃企鵝 提到...

Picasa似乎有提供這麼多的尺寸可以選擇:
32/64/72/144/160/200/240/288/320/400/512/576/640/720/800/1024/1440/1600

Unknown 提到...

研究外掛無意進到這邊看到這句(Picasa 用得最好的典範,首推「索爾王」)
Abin兄讚謬了 ~
我的"美女研究室"今年三月二日被blogspot給封鎖了 哭哭..
目前已轉到美女尤物寫真館 http://jpbeautyhouse.blogspot.com/
應該還是可以當個範例吧XDD

Abin 提到...

To 索爾王:
哈哈~沒想到索爾王本人也來留言了,我是你忠實的訂閱者啊~原來是被封鎖了,難怪久沒更新,趕緊改訂閱您的新站了~

Unknown 提到...

其實我去年底就有準備文章備份站"美女尤物寫真館"了 早有被封鎖的準備..
試過改網址解套 但是沒成功 試過申請解除也沒成功
只好繼續在美女尤物寫真館發文囉~

Emily 提到...

ABIN您好
小妹最近開始嘗試使用Blogger作為自己的另一個網誌
原本使用的網誌為雅虎奇摩所提供的網誌空間
由於PICASA的相簿空間是有限的
所以小妹在Blogger編寫文章所用的圖片,都是用雅虎奇摩網誌提供的相簿中自己上傳的圖片
接著使用img src語法在Blogger上貼圖
或是使用a href="" target="top"開新分頁看大圖
文章編輯完成並發布後,過了一段時間(可能一天或幾個小時)圖片就無法顯示了
(大概就是像原本該顯示圖片的地方出現叉燒包那樣......)
請問這問題的原因是什麼,還有要如何解決呢?非常感謝您的回答喔OWO!

♥ Catherine 提到...

哈咯:)我的部落好象出了点麻烦
我上传了照片,但是他却显示说
这个是我copy过来的,他是说这个部落已经不能在放照片了吗?
我玩这个部落3年了,如果真的不能在放照片了的话我会哭T^T


"上载过程中有错误。
以下图片未上载。

* DSC03279_副本.jpg : 您已经超过了上传照片总数的限额。
如何获取更多图片存储空间?
通过 Blogger 上传的图片和照片存储在您的 Google 帐户的 Picasa 网络相册,中。因此,可以上传的图片数量取决于您在 Picasa 网络相册中使用的存储空间大小。要了解您可以使用的存储空间大小,请参阅这些说明。
注意:如果您最近升级了存储空间限额,可能必须要登录您的 Picasa 网络相册帐户,才能使新的存储空间限额反映到 Blogger 中。

非常抱歉,您已超过照片的上传限额。有关详细信息,请查看此 Blogger 帮助网页。"


是什么意思呢?我的部落的限制已经到了吗?还是照片太大啊?
可是我已经去picasa那里改小了也
也是不可以:(

hsntust 提到...

真的解決了困擾我很久的問題~非常謝謝版主 : D

美編上班族

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!