｜Blogger 教學：文章重點預覽
- Blogger 文章中圖片的畫質低：簡介前言
- Blogger 文章中圖片畫質較低：解法分享
｜Blogger 文章中圖片的畫質低：簡介前言
如果你也是 Blogger 的作者，也有用 Blogger 經營個人網站的話，那你一定曾發現過文章中的圖片畫質好像不夠高的問題，這是因為 Blogger 會自動的調低原始照片的畫質，來降低圖片檔案大小，自然在用戶手機載入文章時，就不會花太多的流量，也能較快的完成文章載入。
不過為了不讓文章載入太久，也還是有別的方法，同時也能維持圖片、照片的高畫質，在後面的段落就會分享我自己的做法＆教學。
｜Blogger 文章中圖片的畫質低：解法分享
－Blogger 圖片 HTML 解說
首先如果你在 Blogger 文章中加入圖片的話，以「HTML 檢視」的模式來看，它的程式碼可能會長這樣：
<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/.../s256/...jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="600" data-original-height="78" data-original-width="256" src="https://blogger.googleusercontent.com/img/b/.../s600/....jpg"/></a></div>
仔細看，除了最外層的 HTML <div> 標籤，你會發現它其實主要是一個 HTML 的 <a> 標籤包一個 <img> 標籤，內層的 <img> 標籤就是用來調整圖片的顯示，而外層的 <a> 標籤則是讓用戶在點擊照片時會放大圖片或是轉至只有該圖片的網頁。
－Blogger 圖片 HTML 修改：提高畫質
所以如果我們要調高 Blogger 文章中照片的畫質的話，就是要調整 <img> 標籤內的設定，仔細看裡面有一個 src=，後面放的就是圖片網址，而在這串照片網址中有「/s600/」，其實這指的就是圖片解析度為 600，一般我會把它調成 1080，像這樣「/s1080/」，而如果圖片中有文字的話則會改成「/s1440/」才不會有點模糊。
－Blogger 圖片 HTML 修改：延遲圖片載入
雖然上面我們將圖片的解析度調高了，但其實這會有一個副作用，那就是會讓文章的載入時間變長，因為圖片的檔案變大了，這樣容易讓用戶沒耐性，或甚至在還沒載入完成讀者就不等了，直接跳開，這都會影響我們網站的 SEO 與排名。
這裡有一個非常簡單的做法！就是在 <img> 標籤內加入 loading="lazy"，這會讓圖片出現在裝置畫面時，才執行載入，所以並不會影響到最一開始的文章載入程序，圖檔再大都沒關係。