★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,是網路的基本禮儀。




Blogger圖片大小的控制

2008-02-04

加入共享書籤: HEMiDEMi個人書籤 MyShare個人書籤 Yahoo分享書籤 Technorati分享書籤 Del.icio.us個人書籤 DiggIt! funP分享書籤

由於目前網誌用的圖片,是從後台直接從我的電腦中上載,並非利用Flickr或是其他的相簿網站,所以使用上總有些小問題,blogger官方的模式,只有位置水平排列及大中小三種格式,但是發現一個問題,就是每次選擇最大的,但是並非我圖片的原始尺寸,還是有經過縮圖處理,要再按一下圖片才會另頁顯示原始的圖片大小。

2009.9.30 更新
目前Blogger已經推出新版的編輯器,圖片上傳方式也有改變,請參閱,
Blogger文章編輯區新版模式正式啟用

最近研究了一下,原來blogger提供的大中小圖片格式,為400px、320px、200px,譬如我這張圖片大小為500px*375,

原始尺寸











所以最大的也只有400px,對於我想放風景照的圖片就很不方便,總覺得太小,後來發現只要更改一個地方就會讓他以原來的尺寸呈現,下面是我們插入圖片會產生的語法,注意下面語法紅色處

<a href="http://1.bp.blogspot.com/_c2aOyhdt6yA/R6cUf7T08JI/AAAAAAAABmA/yHerEbMM1yU/s1600-h/train.jpg"><img id="BLOGGER_PHOTO_ID_5162330399660371938" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="http://1.bp.blogspot.com/_c2aOyhdt6yA/R6cUf7T08JI/AAAAAAAABmA/yHerEbMM1yU/s400/train.jpg" border="0" /></a>
a href= 這一段語法是指圖片按下另頁呈現的原始圖片
img src= 這一段是原始圖片的來源,即是從你電腦上載經過blogger縮放的圖片
s1600-h以最最大尺寸呈現
s400 官方所設定"大"的尺寸,如果你上載圖片時選擇小,這時就不是s400而是s200,以此類推s320就是中。
所以我們在這裡將s400改成s1600(官方設定可呈現的最大值)就會讓圖呈現最大,也就是你原始圖片的大小(最大也只能到1600PX)。

其實我不知道google官方為何要這樣設定,我猜是為了讓網頁更快的顯示,圖形小顯示速度會較快,只是在我自己的習慣,我不喜歡按下圖片再去看原始的圖片大小,總覺得很浪費時間,又要多按一次鍵,除非是類似圖說的圖片,才有這必要,如果blogger的版面能容納,儘量就在圖片處理時將圖片整理好,否則一篇遊記的圖片,每張都需要網友去點閱看更大的圖,誰願意呢?我自己都不想呢!

其實這問題困擾我蠻久了,但在中文網站都看不到類似的說明,官方也沒有說明,最近看到一個日文網站有提到這個問題,雖然日文不是很通,但大概有個譜,就自己試試看,將圖片語法的img src裡的s400改成s1600,就能夠以原始的圖片大小呈現了。

而圖片格式除了上述的大小之外,還有72px、144px、288px、512px, 576px, 640px, 720px, 800px, 912px, 1024px, 1152px, 1280px, 1440px, 1600px的大小,最小是72PX,最大是1600PX,你都可以視版面自行變化,可以利用在超連結(a href)這部分圖片或是原始(img src)的圖片內容裡,要注意的是如果你原始圖片只有500px,就不可能拉大到576px大小,他會以500px呈現,反之你的圖片大過1600px,最大也只能呈現1600px大小。

像有的人喜歡用文繞圖,有時覺得圖片太大又要更改,這時就可以將語法改成s144(像左圖大小),然後圖片置左或是右,作彈性的運用,所以發現這個秘訣之後,以後運用圖片就能夠更多變化了。

其實最佳利用圖片的方式應該是存在網路相簿裡,以指定url的方式來利用,那你就不用改設定,直接連結即可,目前blogger上載的相片都是指定存在PICASA的相簿裡,你也可以另開相簿本來存你要利用的圖片,將整理好的圖片直接匯入,這樣會方便許多。

如果你不是BLOGGER的使用者,也還沒有PICASA的相簿,建議可以利用PICASA的免費相簿,這套軟體是免費的,可以管理、組織、為你的相片加上標籤,也可以修圖及作種種運用,是一套很專業的相片管理程式。而目前免費所提供的功能限制為,儲存空間為1GB、相片不可以大於 20MB,詳細情形可參閱PICASA網站說明。

2008.11.24更新
Blogger內建圖片語法增加了width及height,如何解決,請見
Blogger內建圖片語法改變

參考網站
Blogger で画像の表示サイズを変更する方法

43 意見:

綸太郎 提到...

flash的語法通常是用<embed....或是<script language="text/javascript" ,是不一樣的。

Summon Aeon Gulid 提到...

謝謝您的回答
目前正苦於製作出的flash過大超過邊界
我正在製作專題的blog
以後會常常打擾您 先說聲抱歉

andypopo 提到...

你好.很多謝你這個post.我差點為了100px的分別而轉去yahoo開blog~~這個資料十分實用~~

綸太郎 提到...

有的人會嫌麻煩還要自己改,其實常用的人複製貼上習慣就好,我也是一張一張改。

Frondget 提到...

其實最佳利用圖片的方式應該是存在網路相簿裡,以指定url的方式來利用

請問連結要貼在 ''撰寫'' 還是 ''修改 Html'' 用連結還能調整大小嗎?

相簿裡的圖片連結是http://picasaweb.google.com.tw/nusjmevms/FrondgetSBlog/photo?authkey=RI2dwxr4xf8#5217679632761466290
就貼上就好了嗎?

綸太郎 提到...

你的語法應該是有另外設一個專用相簿吧,不是部落格預設的那一個,在picasa後台介面不是有專供調整大小的選項嗎?用那個調整後再把與法貼到"修改 Html'裡即可,我這篇文章的用法是直接在撰寫裡插入圖片所產生的語法,不知這樣解釋你能了解嗎?可以再討論。

Frondget 提到...

"你的語法應該是有另外設一個專用相簿吧"請問語法是只我的網址嗎?

''後台介面''是什麼?

部落格預設是上傳圖片時,他幫我放到picasa相簿的嗎?

其實那個相簿不是我建的,是我在張貼blog時要上傳圖片時,他幫我放到picasa相簿

"調整大小的選項"找不到,只有離線的picasa軟體可以改

之前我把圖片上傳在到"修改 Html"修改語法是成功的,只是還是不太懂''指定url的方式''


有一張圖是這樣的,就不知要怎麼改了

語法網址http://docs.google.com/Doc?id=ddnm5572_4fpphfcd9

-------------------------------------------------------
你的blog首頁有《 閱讀全文... 》
我是參考http://jas9beta.blogspot.com/2006/12/beta.html


語法網址http://docs.google.com/Doc?id=ddnm5572_5fvqs6vdd

來寫,可是我又習慣在windows Live Writer寫blog所以沒辦法設文章範本結果最後每次po玩後又要改語法
把多的< / span >刪掉

不知道您是用這種語法還是不一樣的,哪一種語法是可以加快速度?
聽說有些只是隱藏起來,其實還是會讀取,另一種的好像可以不預先讀取全文

非常感謝您的教導

綸太郎 提到...

是啊,一般picasa自建的語法應該是http://bp0.blogger.com/_c2........可是你的語法是http://picasaweb.google.com.tw/nusjmevms...這是自己有另設相簿的語法,所以我才覺得奇怪,要在web上使用picasa語法,進入picasa後台就可找到調整的語法,你有Google帳號就可啟動,picasa線上服務,離線的picasa軟體我很少用在,如果是指定url你就把圖片裁剪成你要的大小,然後插入<img src="你的網址">,就可插入圖片,指定url就是不要再利用語法控制大小的作法,而是將實際的圖片上載到部落格上。
我是用羊男的繼續閱讀,每次都要自己加上<span class="fullpost">不用預跑全文應該會快一些。

Frondget 提到...

請問picasa自建的語法的相簿在哪裡?

我在建blogger之前就有開picasa相簿,沒放圖片,直到建blogger之後張貼文章上傳圖片後相簿才多了圖片,那些圖片刪掉blogger圖片就會不見

這種"實際的圖片上載到部落格"的方式沒有1600px的限制嗎?

最大的問題是"picasa後台"到底在哪裡,到處都找不到

------------------------------------------------------------------------------------
如果要引用別人的blog的文字,而該blog沒有明講引用方式,除了在自己blog註明,還要在被引用的blog通知嗎?如果b引用a,c引用b的文章那要
c要註明b寫的還是a寫的
假設我要在我的blog寫上"背叛"的歌詞,這也要引用之類的嗎?
-------------------------------------------------------------------
"本網誌文章授權使用創用CC"我的blog也想遷入這個東西,但都找不到程式碼
------------------------------------------------
我看到很多blog都有recent reader的功能我去申請了mybloglog但是找不到遷入blog的方法

綸太郎 提到...

要回的東西太多,下午我會把picasa的教學文寫出來,引用部份目前只有相同是blogger的可以引用,其他都是自己用註明的,通知對方留下自己文章的網址,就看自己的習慣,引用的文章,如果是一模一樣的文章,當然是註明原始的,其它的自己判斷,其他問題晚一點我再回覆你。

綸太郎 提到...

創用CC使用這個網站http://creativecommons.org/license/?lang=zh_TW
選擇你要的,然後按下"選擇一份授權條款"就會出現語法了。
進入Mybloglog後台,你的部落格圖案下方有個widget選項按下就會出現語法的設定,但你的部落格要先認證才行。

M.K 提到...

好文!非常實用, 這個問題困擾我好久, 今天終於有解了^^

綸太郎 提到...

謝謝,不過最近picasa好像有改版,好像有些地方不一樣,有空要再測試看看。

Morpheus 提到...

謝謝你的詳細教學,真的獲益良多。

關於上載圖片,我遇到一個令人費解的問題。雖然已依你的指導更改語法設定為原始圖片的大小,但是呈現出來的圖片總有明顯的失真情況,如模糊了、雜訊多了等;奇怪的是,在一般圖像軟體上看是正常的。這是甚麼原因引致?有解決方法嗎?請指教。謝謝!

綸太郎 提到...

文章最下方11.24更新那篇你可以看看,是不是有用,我們再來討論,因為你的網誌沒有開放,我看不到你的圖片。
http://01mistery.blogspot.com/2008/11/blogger.html

Morpheus 提到...

謝謝你的回覆。

之前有參考過那篇更新文章,不過它與我的問題並無直接關係。

如果你不介意,我過兩天把網誌開放給你看看,好嗎?

綸太郎 提到...

你也有把width和height改成實際的大小吧,你可以先把圖片語法貼上來給我看看即可,先看語法哪裡有問題,記得將<>改成全形,不然無法在留言區貼成功。

Morpheus 提到...

以下是把width和height改成圖片實際大小的語法,也有把s400改成s1600。請看看:

<img style="width: 640px; height: 480px;" src="http://1.bp.blogspot.com/_C56Cxi30Vwc/SZ1uIaQId5I/AAAAAAAAAWc/L3gZIf-A_zM/s1600/3+new+books.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5304517026877306770" />

綸太郎 提到...

你的語法沒有錯誤,應該不至於影響圖片的展示,我想你可以參考這篇文章的解釋
http://blog.dcview.com.tw/article.php?a=UmwGYgJnCj8%3D#replyDzIGYwZhBzc=
因為這方面我不是很了解,是否是因為browser支援色彩的關係。

Chris 提到...

綸太郎,您好

我的部落格在pixnet,
http://chris8106.pixnet.net/blog
每次都要將滑鼠移到圖片上面才會顯示原來大小,請問我需要改什麼才能固定圖片原來的大小呢?

謝謝解答^^

綸太郎 提到...

Pixnet問到這裏,真佩服你,進入後台,到部落格»部落格管理»基本/進階設定,有一個"文章顯示相關設定",把文章圖片大小,強制調整至400px選項取消,改成不調整即可。

Morpheus 提到...

謝謝你的幫忙。可是那篇參考文章中提供的CMSProxy下載點已失效,因此無法試驗一下。

噢!請問為何在Firefox可正常呈現自訂的背景圖,但在IE卻看不到呢?

綸太郎 提到...

我知道IE6不支援透明圖層的圖檔,或是你的IE功能選項針對某個圖檔的連結有阻擋,因為我沒有網址可看,只能這樣猜測。

Christine 提到...

綸太郎,

我已經改設完成了,無限感激啊~
我要把你的網站加入連結,為你宣傳啦~
甘嗯啊~^^

健哥仔 提到...

請教站長.
文章首頁顯示的圖片能夠縮放的嗎?
就是我的圖可能太大了,而圖片只顯示一半.
謝謝

綸太郎 提到...

你應該是從後台標頭處直接上傳首頁圖片吧,建議可以直接修改後台html用語法代替,找到#header-inner將裡面的圖片網址改成你現在的http://lh6.ggpht.com/_3yauRk4JgU8/SgZaNbgyXNI/AAAAAAAAJiU/M-rvqOcdwUA/s800/%E6%9C%AA%E6%A0%87%E9%A2%98-1.jpg
記得備份先 還有我不知道我現在看到的是否是你已經改好的東西,因為圖片應該已經是顯示全部。

小又 提到...

我想請問有關blogger圖片的問題,但和大小控制無關。blogger文章內的圖片,是否能設定把圖片鎖住,換句話說,讓瀏覽者無法點照片就會跑到另一頁面,或是無法按右鍵複製?
謝謝。

綸太郎 提到...

在文章介面找到圖片的語法,類似<a href...><img src...></a>,把前後的<a href...>及</a>拿掉就不會有超連結的效果,另在picasa介面也有提供不連接到圖片頁的語法,你注意看一下就可找到,至於不要右鍵複製,如果對方用的是Firefox瀏覽器就破功了,不想被複製,只好自己在圖片上加浮水印是比較建議的方式,不然鎖右鍵很容易被破解,Google一下,"鎖右鍵"就會找到很多方法了。

Vera 提到...

你好
我想請教一下,我的banner版型的語法要怎麼改才能讓我的圖片符合他版型的大小.圖片不重覆的話,我的banner右旁總會多一塊空白出來,我試過放大我的圖片大小,可是它會縮小我的圖片,請問有辦法救嗎?我試很多都沒用。先謝謝你了。

綸太郎 提到...

你把圖片網址從s720改成s1600應該就可以了

Ryan 提到...

有問題想再請教你
想請問如何限制圖片在文章中的大小
我想控制所有圖片最大只有800x600
這樣要去哪裡修改html呢
謝謝

Ryan 提到...

謝謝
我已經可以調整圖片大小了
可是為什麼還是會出現手指頭可以點圖片..
這要怎樣取消
我已經是放到最大了
圖片本身是800x400
文章欄寬都調整好了
可是沒法取消手指頭
@_@"

綸太郎 提到...

手指頭會比較麻煩,你必須要將<img src=...>前後的<a href=....>和最後的</a>都去除才行。