逍遙の窩

我懂得不多;分享我懂的。

2018/07/30

Blogger 基礎篇:文章添加圖片,自訂尺寸大小與解析度

在文章添加幾張圖片會有加分效果,若有附上圖解說明,相較於文字敘述更能讓讀者明瞭。上一篇 Blogger 基礎簡單介紹發佈文章的設定,要寫一篇圖文並茂的文章,將圖片上傳 Blogger 的操作相當簡單,還有無限容量的儲存空間。但圖片插入後該如何調整尺寸大小,圖像模糊又從哪裡修改呢?這次的基礎篇就介紹圖片的設定方式。


Google Blogger 擁有無限量的圖片儲存空間,只要圖片的高度或寬度不超過 2,048 像素都不會列入計算,撰寫文章時點選「插入圖片」可從電腦上傳或連結網路圖片,而上傳的圖片都會儲存到 Google 相簿封存檔案
延伸閱讀:Blogger 的圖片空間、容量?




如何在 Blogger 文章中添加圖片?

Blogger 編輯文章時有「撰寫」、「HTML」兩種模式都可以添加圖片,只是設定方式略為不同,點擊「插入圖片」將圖片添加到文章中。


「新增圖片」→「上傳」選擇檔案(JPG、GIF、PNG)後會自動上傳,點擊「加入所選圖片」添加到文章中。


「撰寫」模式加入所選圖片後,預設會以中尺寸、置中對齊的版面配置,點選圖片可逐一調整大小與對齊方式。


「HTML」加入所選圖片後會有「選擇版面配置」視窗,可套用到所有圖片不需逐一調整。


Blogger 圖片有五種預設尺寸(小、中、大、特大、原始大小),除了原始大小外其他尺寸會自動縮放,以高度或寬度較大的一邊為基準,調整為 200、320、400、640 像素。


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

在「HTML」編輯模式可手動調整圖片尺寸:
「data-original-width(height)」:原始尺寸大小。
「height」「width」:網頁圖片大小,可自行修改數值須注意長寬比。

<img border="0" data-original-height="603" data-original-width="1200" height="160" src="https://1.bp.blogspot.com/-VtzrEeTPbPA/W15rPK_1YuI/AAAAAAAAlpU/KhMQfJGuC3cRFrd6dGmRb6EKRmGsVqrqwCLcBGAs/s320/blogger-photo01.png" width="320" /></a>
Google Blogger 添加圖片會自動調整長寬像素,最大不超過 1600,即使上傳高畫質圖片如:6400X3200,能檢視的解析度也只有 1600X800。選擇預設尺寸200(小)、320(中)等,那網頁圖片解析度就如同尺寸。

查看圖片的語法中有兩個網址,「a href」開啟圖片連結(燈箱檢視),「src」插入圖片連結,而 s1600 和 s320 代表圖片解析度。
a href="https://1.bp.blogspot.com/-VtzrEeTPbPA/W15rPK_1YuI/AAAAAAAAlpU/KhMQfJGuC3cRFrd6dGmRb6EKRmGsVqrqwCLcBGAs/s1600/blogger-photo01.png"

src="https://1.bp.blogspot.com/-VtzrEeTPbPA/W15rPK_1YuI/AAAAAAAAlpU/KhMQfJGuC3cRFrd6dGmRb6EKRmGsVqrqwCLcBGAs/s320/blogger-photo01.png"

將兩個連結開啟檢視就會發現差異處,用「中(320)」插入圖片,即使修改大小成 560,顯示的圖片也只是 320 放大版,可能會圖像模糊,而 S320 這數值可以調整,讓圖片不會模糊。


結論:Blogger 插入圖片後可以修改 width、height 數值,自訂圖片尺寸。s1600 讓圖片不管哪種尺寸都是最高解析度。
<img border="0" data-original-height="603" data-original-width="1200" height="260" src="https://1.bp.blogspot.com/-VtzrEeTPbPA/W15rPK_1YuI/AAAAAAAAlpU/KhMQfJGuC3cRFrd6dGmRb6EKRmGsVqrqwCLcBGAs/s1600/blogger-photo01.png" width="520" /></a>
使用心得:
上述是 Blogger 圖片的預設方式,若要省下每次手動修改,還可以添加 CSS 代碼控制圖片呈現的樣式,插入圖片只需選擇原始尺寸。

沒有留言:

張貼留言

● 與本站聯絡:電子郵件FB 粉絲專頁
● 站內提供下載的軟體經由網路取得,版權皆屬於原創者(公司)。
● 影音下載介紹網站/軟體功能,隨意下載、散播影片可能觸法,請自行注意。
● 本著作係採用創用 CC 姓名標示-非商業性-禁止改作 4.0 國際 授權條款授權。
創用 CC 授權條款