Blogger 文章添加圖片，自訂尺寸大小與解析度

經營部落格撰寫文章，圖文兼具的內容會比於純文字敘述更吸引訪客閱讀，上次介紹 Blogger 發布文章的幾項設定，要在 Blogger 文章添加圖片也相當簡單，只是上傳圖片後該如何調整尺寸大小，影像模糊又從哪裡修改呢？本文就來說明圖片設定方式。

Google Blogger 擁有無限量的圖片儲存空間，只要圖片的高度或寬度不超過 2,048 像素都不會列入計算，撰寫文章時點選「插入圖片」可從電腦上傳或連結網路圖片，用戶可以在「媒體管理工具」查看及管理網誌圖片。

一、如何在 Blogger 文章中添加圖片？

1. Blogger 編輯文章時有「撰寫」、「HTML」兩種模式都可以添加圖片，只是設定方式略為不同，點擊「插入圖片」將圖片添加到文章中。
Blogger 文章添加圖片，自訂尺寸大小與解析度
2.「新增圖片」→「上傳」選擇檔案(JPG、GIF、PNG)後會自動上傳，點擊「加入所選圖片」添加到文章中。
Blogger 文章添加圖片，自訂尺寸大小與解析度
3.「撰寫」模式加入所選圖片後，預設會以中尺寸、置中對齊的版面配置，點選圖片可逐一調整大小與對齊方式。
Blogger 文章添加圖片，自訂尺寸大小與解析度
4.「HTML」加入所選圖片後會有「選擇版面配置」視窗，可套用到所有圖片不需逐一調整。
Blogger 文章添加圖片，自訂尺寸大小與解析度
5. Blogger 圖片有五種預設尺寸(小、中、大、特大、原始大小)，除了原始大小外其他尺寸會自動縮放，以高度或寬度較大的一邊為基準，調整為 200、320、400、640 像素。
Blogger 文章添加圖片，自訂尺寸大小與解析度

二、如何自訂 Blogger 圖片的尺寸大小與解析度？

在 HTML 模式可自行調整圖片尺寸，其中 data-original-width (height) 為原始尺寸，「height」與「width」則是網頁上的圖片大小，修改數值時需注意長寬比。

＜img data-original-height="603" data-original-width="1200" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFEkmZluSjoJSbHkltFbMLyyKduCfbhlS7SWCdbjAm1Cn2YYFfpqGClRTo4Npzw0h404tW0mlbNoeq5fEHrb8SpaYb2Cm8hqpbIQkYMlpkLCZ3yAzoBv7XFAx1Iafv_U9l-jCruLKn0WM/s320/blogger-photo01" width="320" /＞

Google Blogger 添加圖片會自動調整長寬像素，最大不超過 1600，即使上傳高畫質圖片如：6400X3200，能檢視的解析度也只有 1600X800。選擇預設尺寸200(小)、320(中)等，那網頁圖片解析度就如同尺寸。

查看圖片的語法中有兩個網址，「a href」開啟圖片的網址(燈箱檢視)，「src」插入圖片的網址，而 s1600 和 s320 代表圖片解析度。

＜a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/...fv_U9l-jCruLKn0WM/s1600/blogger-photo01.png"＞
＜src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/...fv_U9l-jCruLKn0WM/s320/blogger-photo01.png"＞
開啟兩個網址檢視圖片就會發現差異，用「中(320)」插入圖片，即使將大小改為 560，顯示的圖片也只是 320 放大版(有點模糊)，只需將 s320 數值改為更高就會清晰。
Blogger 文章添加圖片，自訂尺寸大小與解析度

結論：Blogger 插入圖片後可以修改 width、height 數值，自訂圖片尺寸。s1600 讓圖片不管哪種尺寸都是最高解析度。

＜img data-original-height="603" data-original-width="1200" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/....yAzoBv7XFAx1Iafv_U9l-jCruLKn0WM/s1600/blogger-photo01" width="520" /＞＜/a＞

補充：上述是 Blogger 圖片的預設方式，若要省下每次手動修改，還可以添加 CSS 代碼控制圖片呈現的樣式，插入圖片只需選擇原始尺寸。