[痞客] 上傳圖片之圖片大小迷思

看板Blog (部落格)作者 (wei)時間10年前 (2014/09/15 17:59), 編輯推噓4(400)
留言4則, 4人參與, 最新討論串1/1
網誌好讀版: http://weilife.pixnet.net/blog/post/390614531 以下純文字複製------------------------------------------------------- 不是痞客VIP的朋友,上傳圖片時痞客會自動幫你的圖片降低解析度 若想要以原圖呈現該怎麼做? 又或是以照片為主的痞客VIP部落格,文章中放了許多照片拖慢了網頁下載速度 非常惱怒啊! 這篇文章是要告訴大家,在痞客上傳的圖片,我們可以做哪些事情 上傳圖片時,會有顯示尺寸這個選項 VIP會員與非VIP會員的差別在於多了最後的 "原始尺寸" 這項 不過多了這項根本沒有用,請讓我娓娓道來 總之"顯示尺寸"這個目的在於想讓訪客看到圖片的大小是多少 同一張照片上傳到痞客相簿後,有不同的尺寸可以選擇,更有VIP會員擁有的原始尺寸權 利 以本篇文章的首圖來說,原始尺寸為1500*1000 上傳圖片時選擇的顯示尺寸為"中(不超過600)" 所以插入文章時,圖片寬度變成600 pixel,此時將文章編輯模式切換成HTML模式 檢查該圖片的網址: http://pic.pimg.tw/weilife/1410698597-2635055827_n.jpg
(若後面有?v...請忽略) 檔名最後的 _n 是關鍵,把 _n 去掉了會怎樣呢?會是原始尺寸的圖檔喔! 對於像banner的圖檔很容易超過寬度1024,可用這個方法得到原始大小 其實痞客將我們上傳的每一張照片經過處理,分別存成不同的尺寸,以供它之後方便使用 例如上方的三張圖,都是同一次上傳的照片,只是後方的網址做了些修改 那這些不同尺寸的照片有甚麼好處呢? 正方形的縮圖之後可以當作文章的代表圖示,像我個人會拿來做相關文章的整理 範例如該篇文章的最下方 http://weilife.pixnet.net/blog/post/85766404 另一優點是依據用途載入不同尺寸的圖片,可以減少網頁的下載流量,讓訪客瀏覽更順暢 好,說了這麼多,以下整理各個不同尺寸的修改方式,以首圖做例子 原始尺寸 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左右的尺寸或以上,看到電腦都要當掉了 (快檢查一下你的部落格是否造成訪客的負擔呢?) 所以寫部落格時,切記要選擇適合的顯示尺寸上傳啊! 不過痞客的上傳圖片的寬度最大就是1024,會覺得1024小了一些嗎? 若寬度1024不夠表達圖片的細節 那麼建議將所有上傳的照片都先壓縮到寬度2000以下再上傳 不僅可以節省上傳時間,對訪客來說也是一個很大的幫助 :) ps. 免費軟體XnView可以批次將照片調整大小,非常方便 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.96.76.60 ※ 文章網址: http://www.ptt.cc/bbs/Blog/M.1410775173.A.999.html

09/15 18:02, , 1F
感謝原po的樣式分享,拿走一個了
09/15 18:02, 1F

09/15 18:05, , 2F
大貓耶
09/15 18:05, 2F

09/26 23:57, , 3F
09/26 23:57, 3F

10/08 00:31, , 4F
推詳細整理
10/08 00:31, 4F
文章代碼(AID): #1K5hY5cP (Blog)
文章代碼(AID): #1K5hY5cP (Blog)