Blogger承襲了Google的簡潔風格，它提供的網站版面主題（也就是範本template）數量不多，這幾年來貌似也沒增加新的，算是一款佛系服務吧！我最欣賞它的一點是網頁中不會有不請自來的廣告；它不會因為提供免費的網路空間，就認為它要用推廣信息、彈窗廣告，肆意打斷作者的文章脈絡，干擾讀者的閱讀。這一點，堪稱大氣！
真心的恭維話說完了，現在進入主題：使用blogger內建的版面主題建立部落格，發布文章和圖片之後，可能會發現，「咦，為什麼我上傳到網頁的圖片，看起來比我的原圖模糊，看不清楚？」
圖片模糊的狀況
本文所指的圖片模糊，是出現在以下的狀況中：在Blogger後台發布新文章，在「撰寫」模式點圖片icon來插入圖片。圖片出現後，選擇圖片顯示尺寸。Blogger內建有「小」「中」「大」「特大」「原始大小」這幾個選項。如果自己不手動選的話，系統會自動設為「中」。
實際測試，會發現「中」和「大」兩種尺寸似乎比較合用。若選「特大」和「原始大小」，圖片往往會超出文章區的寬度。
問題是，不管是中尺寸的圖片還是大尺寸的圖片，看起來都比我印象中原始的圖片模糊。
我曾試著回頭把自己的圖片，在電腦的影像軟體內調來調去，包括更改像素（pixel，例如寬度調成1500）或解析度（dpi，例如調成300），結果上傳後圖片還是變得模糊。
既然無法靠自己的良知良能摸索出解答，只好向Google大神求助。在輾轉於一連串的網友分享之後，終於測試出有效的解方。
問題何在
看過網友的分享，才發現問題是出在，圖片在上傳和插入使用的過程中，系統都會對圖片動一些「手腳」，也就是會自動進行設定，使得圖片變得和我們的原始圖片不太一樣。
查看「有問題」圖片的HTML原始碼，會看到類似以下內容：
這張圖片的原始碼可以分成兩部分來看，第一部分是錨接標示<a>，第二部分則是圖片標示<img>。
<a>代表點擊圖片時，會開啟標示中的鏈接網址，那是（比較大也比較清晰的）同一張圖。注意長長的網址中有一個數字s1600，這個是有關「清晰度」的信息。
<img>標示的是文章在瀏覽器上顯示時圖片的鏈接網址，可以看到長長的網址中有一個數字s320，另外還有尺寸數值（例如width="320" height="320"）。
仔細比對這兩個鏈接網址，除了s1600和s320不一樣之外，其他部分是相同的。
其實就是這裡隱含著blogger後台對圖片「動手腳」的痕跡。
簡而言之，當一張圖片上傳到後台時，系統內設的圖片最大寬度為1600。意思就是，如果原始圖片的寬度大於1600，就會自動縮小為1600；如果原始圖片小於1600，則不縮小也不放大。我試了一下，還發現解析度dpi也會被改動，也就是系統會自動把原始圖片dpi大於72的，縮小為72。
圖片上傳時第一次被動完手腳，圖片變成dpi72、寬度不大於1600。此時的清晰度就是s1600（也是最大值）。
這就是為什麼，在<a>原始碼當中，看到的清晰度數值總是s1600（我認為這個設定的用意是，當讀者點擊文章中的圖片，可以看到放大的、較清晰的圖片）。
至於在<img>原始碼裡的參數，則跟我們插入圖片時選擇的尺寸大小有關。
選「小」：清晰度s200，width 200、height則依每張圖比例而定
選「中」：清晰度s320，width 320、height則依每張圖比例而定
選「大」：清晰度s400、width 400、height則依每張圖比例而定
選「特大」：清晰度s640、width 640、height則依每張圖比例而定
選「原始大小」：清晰度s1600
意思就是，圖片在被插入文章中時，系統第二次動手腳：根據你選擇的圖片大小，改動了圖片的寬度和高度，也改動了圖片的清晰度。這第二次動的手腳，（一般情況下）不但把圖片縮小了，也使圖片變得模糊，等於是二重「傷害」！
改善Blogger圖片清晰度的原理
想把圖片變得清晰，其原理就是把<img>裡設定的清晰度數值調高。
調高清晰度數值的方法分為兩種：
一種治標，需要在發布文章、上傳圖片之後，打開文章的HTML模式逐一修改每張圖片的原始碼。這個方法會有點麻煩，但操作步驟相對簡單、易理解。
一種治本，必須打開部落格主題範本的HTML文件去修改內設值。這個方法會有點技術性，有點風險，但是一旦改好之後，未來上傳圖片就不用逐一修改圖片的HTML原始碼了。
改善圖片清晰度的治標法：
1. 文字和圖片在後台上傳，先儲存、發布，看一下圖片效果。（假設圖片在這步驟內設為「中」尺寸。）
2. 再次編輯文章，切換為HTML模式，找到圖片的原始碼，在<a>的網頁鏈接中，確認清晰度是s1600。
3. 接著，在<img>的網頁鏈接中，把清晰度s320改成最大值s1600。（需要的話可以順便修改寬度和高度，例如width="500" height="auto"。）
4. 更新文章後，檢視網誌，應該可以感覺到圖片變清晰了！如果覺得圖片顯示尺寸太大或太小，請回到第3步驟修改寬度width即可。
5. 溫馨提醒，這種修改方式必須逐張圖片進行修改。修改的時候請看清楚了再下手。萬一改壞了又找不到哪裡有錯，只好刪掉文章重新發。
以下圖片示範，在圖片尺寸相同的情況下，把清晰度調高的效果是很明顯的。
 |
| 把圖片尺寸設為「小」（自動設s200, width=200） |
|
| 把圖片尺寸設為「小」（手動改s1600, width=200） |
|
| 把圖片尺寸設為「中」（自動設s320, width=320） |
|
| 把圖片尺寸設為「中」（手動改s1600, width=320） |
|
| 把圖片尺寸設為「大」（自動設s400, width=400） |
|
| 把圖片尺寸設為「大」（手動改s1600, width=400） |
改善圖片清晰度的治本法：（本方法涉及修改網址的HTML原始碼，適合略懂HTML和CSS的朋友，請謹慎操作）
1. 進入Blogger後台，選擇左側選單上的「主題」後，點擊主頁面中的「編輯HTML」。此時可以看到部落格的原始HTML文件。
2. 點一下原始碼區（只是點一下，讓游標在原始碼區域），然後按Ctrl+F，此時會跳出搜索框，在框內輸入「.post-body img」（注意最前面有個英文句點），並按Enter。
3. 這個就是HTML原始碼裡的文章區圖片設定CSS代碼。如圖所示，加入max-width: 500px;和max-height: auto; 兩行代碼。
.post-body img {
max-width: 500px;
max-height: auto;
....此處還有其他代碼
}
新增這兩行代碼的意思就是，把文章區（post-body）的圖片，設定顯示的最寬值為500px，高度則依比例變化。如此一來，這個文章區圖片的設定值，將適用於此部落格所有文章中設為「原始大小」的圖片（你另外手動更改的話，就不受此限制。）
原始寬度大於500px的圖片，都會自動顯示為500px。不需要自己一張一張地修改代碼，圖片寬度都是小於或等於500px。
4. 把文字和圖片在後台上傳，先儲存、發布，看一下圖片效果。發現系統自動把圖片尺寸設為「中」。
5. 再次編輯文章，在「撰寫」模式下，逐一點選每張圖，把圖片尺寸選為「原始大小」。改完後，存檔。原始大小的清晰度會是s1600，但寬度和高度會被調整為你在網頁主文件中的設定值（本文範例為500px）。
6. 再次查看文章發布後的效果。
|
| 把圖片尺寸設為「原始大小」（自動設s1600，尺寸也自動縮小） |
清晰度改善之後，整個文章看起來順眼得多，也不會覺得該去眼科掛號，或是有換電腦的衝動！
您好，我的HTML裡面，只有顯示寬和高，清晰度他就是有一串圖片網址，所以找不到S，不知道這個狀況該怎們改清晰度，感謝 :)
回覆刪除謝謝您的留言～我確認了一下，現在新上傳的圖片，圖片網址的格式跟我文章裡介紹的不太一樣（應該是Google改了網址格式），但還是可以找到解析度的數字。
刪除請再回到文章的HTML模式，查看圖片的<img src="這裡的網址很長，但是結尾的地方應該會是=s320"。把s=320改成s=1600，圖片會變清晰。
希望對您有幫助！謝謝！