Photo


I'm Wei [更多關於我]

Traveler / Photographer / Designer

一個愛旅行的女孩,期盼未來能看看更多這個世界。旅行除了沿途的風景,最重要的是途中發生的點點滴滴,唯有照片與文字的交織才能讓美麗的回憶不朽,也是部落格取名為"Dribs & Drabs 點點滴滴"的涵義。
Travel for me, is the source of restore youthful vitality.

Dribs & Drabs

Dribs & Drabs - Designs

dribs__drabs

weilife.blog@gmail.com

Pixnet訂閱

01

不是痞客VIP的朋友,上傳照片時痞客邦會自動幫你的圖片降低解析度,若想要以原圖呈現該怎麼做?又或是以照片為主的痞客邦VIP部落格,文章中放了許多高解析度照片拖慢了網頁下載速度,真的有必要嗎?這篇文章是要告訴大家,在痞客邦上傳圖片時,我們可以做哪些事情。

 

 

# 上傳檔案介面

02

各位在上傳圖片時,會有"顯示尺寸"這個選項,VIP會員與非VIP會員的差別在於多了最後的 "原始尺寸" 這項。"顯示尺寸"這個目的在於放在部落格上的圖片的大小是多少。

 

# 同一張照片上傳到痞客邦相簿後,有不同的尺寸可以選擇,更有VIP會員擁有的原始尺寸權利

以本篇文章的首圖來說,原始尺寸為1500*1000像素,上傳圖片時選擇的顯示尺寸為"大(不超過1024)",當圖片插入文章時,該圖片寬度會是1024像素。此時將文章編輯模式切換成HTML模式,檢查該圖片的網址: http://pic.pimg.tw/weilife/1410698597-2635055827_l.jpg (若後面有?v...請忽略)。

 

檔名最後的 _l 是關鍵,把 _l 去掉了會是原始尺寸的圖檔喔!

 

對於像banner的圖檔很容易寬度超過1024px,可用這個方法得到原始檔案。痞客邦將我們上傳的每一張照片經過處理,分別存成不同的尺寸,以供它之後方便使用,我們可以好好利用這個機制來做一些事情。

 

# 應用

01       01       01

例如上方的三張圖,都是同一次上傳的照片,只是後方的網址做了些修改,那這些不同尺寸的照片有甚麼好處呢?

正方形的縮圖之後可以當作文章的代表圖示,像我個人會拿來做相關文章的整理。另一個優點是依據用途載入不同尺寸的圖片,可以減少網頁的下載流量,讓訪客瀏覽更順暢。好,說了這麼多,以下整理各個不同尺寸的修改方式,以首圖做例子。

 

原始尺寸 http://pic.pimg.tw/weilife/1410698597-2635055827.jpg

大 1024  "_l"  http://pic.pimg.tw/weilife/1410698597-2635055827_l.jpg

中 600  "_n"  http://pic.pimg.tw/weilife/1410698597-2635055827_n.jpg

小 450  "_m"  http://pic.pimg.tw/weilife/1410698597-2635055827_m.jpg

大縮圖 170*170  "_q"  http://pic.pimg.tw/weilife/1410698597-2635055827_q.jpg

中縮圖 120*120  "_s"  http://pic.pimg.tw/weilife/1410698597-2635055827_s.jpg

小縮圖 90*90  "_t"  http://pic.pimg.tw/weilife/1410698597-2635055827_t.jpg

 

# 圖文部落格該知道的事

很多攝影為主的痞客邦VIP部落格,通常為了展示高畫質的照片,上傳照片時會選擇 "原始尺寸" 上傳。而部落格版面或部落格設定會幫照片縮小至適合部落格寬度,所以在瀏覽文章時看起來沒有甚麼太大的問題。但是,這個縮小的動作是顯示時看起來較小,對訪客來說還是下載原始尺寸的圖片。原始尺寸檔案都非常大,訪客通常會花一段時間等待,常常看到一些攝影部落格是以相機拍攝的原始尺寸顯示,每張都是4000*3000左右的尺寸或以上,下載到電腦都要當掉了,更不用說用手機瀏覽的訪客。所以寫部落格時,切記要選擇適合的顯示尺寸上傳,不要造成訪客的負擔!

快檢查一下你的部落格是否造成訪客的負擔呢?

 

# 痞客邦相簿的流量怎麼都不夠用

痞客邦提供每月300M的上傳流量,其實對一般人來說是夠用的,我每個月都還剩很多。上傳圖片時請注意圖片大小,最好就是符合現在版面大小或再稍大一些,請不要偷懶直接將照片原始檔上傳,這樣流量很快就用完了。即使上傳了原始圖檔,但顯示時還是只有寬度1000px以下,這樣不是很冤枉嗎?

 

♥ 部落格樣式 - 實用教學: http://www.dribs-drabs.com/blog/category/1358731

文章標籤
創作者介紹
創作者 Dribs & Drabs 的頭像
Dribs & Drabs

Dribs & Drabs 點點 滴滴

Dribs & Drabs 發表在 痞客邦 留言(11) 人氣()


留言列表 (11)

發表留言
  • Hunt
  • 不錯喲...解釋的非常清楚...推啦~
  • :D

    Dribs & Drabs 於 2014/09/14 23:10 回覆

  • RUBY | 露比
  • 我想請問要如何上傳圖片到文章呢?
    有沒有推薦的轉網址程式? 謝謝
  • 痞客邦撰寫文章時可以直接上傳圖片,新版的後台是把圖片拖曳到文章中就能上傳。我比較少在用轉址,所以不太清楚。

    Dribs & Drabs 於 2015/10/26 23:08 回覆

  • Maggie*
  • 想請問要如何上ˊ傳圖片畫質才不會被壓縮呢?
  • 因為我不清楚痞客在上傳圖片時是否有壓縮,但跟你分享我的做法,先在電腦將圖片壓縮成你要的尺寸且存成JPG,這步驟你可以在影像軟體掌握圖片壓縮的品質。再上傳到痞客的相簿,用原始尺寸顯示圖片,圖片的畫質應該會跟原本的差不多。

    Dribs & Drabs 於 2016/09/20 11:00 回覆

  • 鳳梨頭
  • 請問一下,若刪除了相簿中的照片
    會影響文章內的圖片嗎
    抱歉問的有點奇怪
    (因為不了解pixnet的後台原理)
    我是有用一兩張試
    好像並無影響,
    所以這麼說來,相簿就算刪去,只要文章裡還有圖,
    全文並無影響,這樣說對嗎??
    謝謝
  • 文章裡的圖若是存在痞客邦的相簿裡,只要刪除相簿裡的圖,文章的圖就會消失
    你的測試應該是瀏覽器cookies的關係,若你清除cookies應該就看不到圖了

    Dribs & Drabs 於 2016/09/20 22:50 回覆

  • 鳳梨頭
  • 謝謝喔,我懂了
    感謝您(大大的版風超美呀,希望我有一天有能力才敢用,基本上對CSS我還不會控制)
  • 謝謝你的稱讚 :D
    CSS網路上有很多教學文,有興趣的話可以研究一下 !

    Dribs & Drabs 於 2016/09/22 11:20 回覆

  • wealth99
  • 很實用的資訊,感謝你的分享
  • 不客氣 :D

    Dribs & Drabs 於 2017/09/10 07:46 回覆

  • Lirr
  • 很棒 解決我的問題 ~~
    看您的部落格真的很舒服
  • 很開心有幫助您 :)

    Dribs & Drabs 於 2018/01/30 09:20 回覆

  • zoeyalee肉芽粒
  • 你好,想請問如果我已經上傳相片,但原始上傳的尺寸就太大。
    有辦法修改已上傳的相片尺寸嗎@@?
    或是只能重傳呢?

    謝謝格主。
  • 你可以藉由修改圖片網址得到較小的圖片,如這篇教學裡提到的 _l、_m、_q等,如果尺寸都不是你想要的就只能重傳了
    另外如果是要顯示在部落格中,你可以藉由CSS來改變顯示圖片的大小,但可能會稍微有些失真

    Dribs & Drabs 於 2018/08/30 11:26 回覆

  • ebay
  • 請問格主~一般來說網站上使用的圖片解析度都是設多少呢?
    謝謝您!
  • 我的文章圖片寬度為1000px :)

    Dribs & Drabs 於 2018/10/06 12:15 回覆

  • 念念愛唸唸
  • 感謝分享,不過因為都是直接手機上傳,所以300m就被吃光光了嗚嗚嗚
  • 手機也可以先用APP縮小再傳會比較省流量

    Dribs & Drabs 於 2018/11/20 09:13 回覆