網頁圖片該怎麼處理, 顯示效果會比較清楚？

最近有讀者遇到一個狀況，網站使用的圖片都是 640px 寬，但在 Blogger 的文章區塊扣掉 padding 等等的數值後，可顯示寬度為 590px 左右。當圖片從 640px 縮小到 590px 的情況下，圖中某些文字因為變小而顯得比較不清楚(或是說效果比較差)。因此，希望我幫他調整文章區塊的版面寬度，讓圖片可以顯示 640px 這樣的寬度。

當然，調整版面寬度是一種解決方法，不過這麼做，是否一定可以讓網頁的圖片變得清楚呢？這件事需要考慮的因素，其實比想像中要來得多。

同時，部落格的圖片，該如何兼顧尺寸、美觀清楚、以及載入速度，算是還滿重要的考量點，因此寫一篇專文來討論此事。

(圖片出處: pexels.com)

一、圖片及文字不清楚的原因

1. Blogger 上傳的圖片

從 Blogger 上傳到 PICASA 圖床的圖片，由於牽扯到 Google+ 的設定，過去發生不少圖片模糊、或圖片異常的現象，因此花了點時間整理各種案例，請參考這篇「Blogger 各種圖片異常狀況處理﹍模糊+消失+超出版面」。


2. 文字不清楚

我們可能會在圖片加上文字、或是網址浮水印等資訊，若是使用的字體比較細，那麼圖片縮小的時候，就可能出現本文的案例，導致文字看起來不清楚。

把圖片用原尺寸顯示是一種解決方法，但是我們必須了解，訪客的螢幕各種尺寸都有可能，所以幾乎很難能讓訪客看到一張 1:1 尺寸的圖片：

• 在寬螢幕圖片就會被放大
• 在行動裝置圖片就可能被縮小

要根本解決文字、浮水印不清楚的問題，就是使用較粗的字型(例如微軟雅黑體)，或是文字設定為粗體。




更好的方法，是使用影像編輯軟體做些效果，例如上圖的文字，周圍有一圈白色底色、以及陰影。這樣的文字效果，無論經過圖片放大、縮小，都可以被清楚地辨識。

二、寬螢幕的圖片效果

1. 圖片會被放大

市場上的主流是寬螢幕，很多訪客的螢幕都是 1920 x 1080 這樣的解析度。若部落格網頁的寬度設定在 1000px~1100px 時，代表在訪客的螢幕上通常是放大到將近兩倍(才能撐滿螢幕)，而所有的圖片也會放大為將近兩倍。

在這個前提之下，一張壓縮過的 jpg 圖檔本身已經失真，再放大為兩倍的話，通常看起來就會比較模糊了。以 Blogger 熱門文章小工具為例，預設的文章縮圖為 72px 正方形大小，原本已經不太清楚，那麼在 1920 x 1080 的螢幕上又放大兩倍，自然是更加模糊。


2. 圖示的製作

想讓圖片在大螢幕上放大兩倍後不失真，最好的方法是製作一張兩倍寬度的原圖，接著再設定該 img 標籤的寬度為原尺寸，那麼這張圖在訪客的 1920 x 1080 螢幕上，放大兩倍後剛好還原為原圖尺寸，就不會失真了。

例如「最新回應」小工具的頭像圖示，預設顯示的寬度為 35px，程式的設計會讀取 70px 寬的頭像圖示，這樣無論在較小、較大的螢幕都能清楚顯示。

本站其他跟縮圖相關的工具，例如「最新文章」、「相關文章」等等，也都是利用同樣的原理，讀取兩倍寬度的縮圖來顯示。


3. 文章圖片的處理

不過文章中的圖片，若是刻意製作兩倍寬度的圖片來顯示，就不一定適合了。

例如為了讓寬螢幕的視覺效果，製作 1280px (兩倍)寬的圖片，顯示為 640px 寬，這可能需要衡量得失，下個章節來探討這一點。

三、大圖會影響網頁載入時間

1. 網站效能的影響

小圖片就算放大為兩倍，增加的檔案大小其實不多。但是大圖片寬度還放大為兩倍的話，檔案容量可是會爆增的。

根據「優化網站效能該注意哪些事? (1)最關鍵的考量因素」，圖片正是影響網頁載入速度最大的原因，因此為了讓圖片比較清楚、好看，是否需要為了寬螢幕的顯示效果，而放大圖片尺寸，是需要思考的事情。


2. 建議的數據

這裡提供的圖片相關數據，屬於個人經驗，請斟酌參考即可。文章中的圖片建議使用：

• 最大約 800px 寬的尺寸
• 壓縮比例約 80% ~ 85%
• 每張圖盡量不超過 100k

這樣的話，若一篇文章有 10 張圖片，讀取圖片的花費小於 1000k 的連線、下載時間。


3. 批次處理圖片的軟體

需要批次修改圖片尺寸、並壓縮檔案，推薦使用 XnView 這套軟體，操作流程可參考這篇「XnView批次轉換」。


4. 行動版效果

由於行動版的螢幕尺寸都很小，若文章放了 1000px 寬的圖片，那麼行動版照樣也是要讀取這麼大張的圖片，非常花時間。

行動裝置本身記憶體就小了，而讀取跟網頁版一樣大張的圖片，更是花費大量記憶體與時間、操作起來會更卡，那麼對訪客而言，將不是友善的閱覽體驗。

一方面前述「2. 建議的數據」會對行動版有幫助，另一方面如果是 Blogger 平台，可參考這篇「自適應 RWD 圖片語法產生器」來改善此事。

四、另開原始圖片的技巧

還有另一個非常好的理由，讓我們不必為文章中的圖片，放原始大圖，那就是利用 A 標籤的「另開視窗」語法 (target="_blank")。

熟悉這個語法的話，可以在文章中顯示較小尺寸的圖片，當訪客點擊圖片時，在另開視窗彈跳出原始大圖。這樣的做法，就可以 "網頁載入速度" 與 "圖片清楚美觀" 兩者兼顧了。

以下就介紹幾種，讓原始大圖可以另外彈出的技巧。

1. 另開視窗語法

從 Blogger 後台上傳的圖片，可以選擇顯示的尺寸，建議選擇顯示 640px 的尺寸就好，當訪客點擊時，頁面會出現原尺寸圖片。

不過我們會發現，Blogger 後台產生的語法，並不會另開視窗，因此可使用「Blogger 圖片語法轉換器」，來自動產生 "另開視窗語法"。

然而這個轉換器無法讓舊文章的圖片也另開視窗，那麼讀者可以參考「超連結 A 標籤及錨點, 你不知道的操作技巧」→「一、另開視窗的重要性」→「4. 讓文章中的(圖片)超連結另開視窗」，安裝這裡的語法可以讓圖片另開視窗。




2. 使用燈箱效果

在 Blogger 後台 → 設定 → 文章和留言 → 在燈箱中展示圖片 → 選擇「是」，可以開啟 "燈箱" 效果，等於是安裝系統提供的這個外掛。

當訪客點擊圖片時，會產生燈箱效果，這樣跟另開視窗的功用類似，我們可以在文章顯示小尺寸圖片，以加快載入速度，當點擊圖片時，燈箱會開啟較大的圖片。




3. 安裝 Fancybox

有時因為不知名原因、或使用了其他外掛，會使得 Blogger 官方的燈箱失效，那麼可以改用這個知名的 jQuery 外掛「Fancybox」，一樣可以有燈箱、縮圖導覽的效果。

五、小結

本篇提出的解決方案，算是非常完美地解決了 "網頁載入速度" 與 "顯示原始大圖" 的兩難問題，只要你是使用 Blogger 部落格，從後台上傳圖片時，就能選擇以小尺寸圖片顯示，接著看是要搭配「另開視窗」語法，或是燈箱外掛，就能讓訪客也可看到原始大圖了。

更多網站效能相關文章：