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

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

3 則留言:

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

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

      刪除
  2. War Blackjack® is an exciting side bet by which players have the option to make a War Wager of an quantity inside posted desk limits. The participant will obtain one card face up, which serves because the player’s War card and player’s first Blackjack card that can go against the dealer’s up card. The object is to make the sum of your card values as near 21, without 빅카지노 going over. If we make 21 exactly, we now have blackjack, which can't be beat. For over 20 years, the author has been forecasting that desk games will ultimately drift to being totally digital games. A totally electronic sport would eliminate the fee, and in some instances, security concerns experienced in traditional card and chip desk games.

    回覆刪除