4/06/2020

如何調整Blogger圖片的清晰度

Blogger是Google提供的免費網誌(又稱部落格、博客,以下通稱部落格)服務,是發布日誌形式文章的網路空間。其實近幾年來,社群媒體興起之後,網友們的注意力和時間都轉移到手機端的FB和LINE了,對了還有IG。部落格的熱潮似乎已經過去。不過我很慶幸Blogger的服務還延續著,讓我的文章們有棲息之地。

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,尺寸也自動縮小)

清晰度改善之後,整個文章看起來順眼得多,也不會覺得該去眼科掛號,或是有換電腦的衝動!

2 則留言:

  1. 您好,我的HTML裡面,只有顯示寬和高,清晰度他就是有一串圖片網址,所以找不到S,不知道這個狀況該怎們改清晰度,感謝 :)

    回覆刪除
    回覆
    1. 謝謝您的留言~我確認了一下,現在新上傳的圖片,圖片網址的格式跟我文章裡介紹的不太一樣(應該是Google改了網址格式),但還是可以找到解析度的數字。
      請再回到文章的HTML模式,查看圖片的<img src="這裡的網址很長,但是結尾的地方應該會是=s320"。把s=320改成s=1600,圖片會變清晰。
      希望對您有幫助!謝謝!

      刪除