2016年3月24日

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

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

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

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

(圖片出處: pexels.com)


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


1. Blogger 上傳的圖片

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


2. 文字不清楚

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

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

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

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


blogger-image-blurry-網頁圖片該怎麼處理, 效果會比較清楚?

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



二、寬螢幕的圖片效果


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. 建議的數據

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

  • 最大約 600~800px 寬的尺寸
  • 壓縮後的 jpg 檔大小能在 50k 以下最好
  • 每張圖盡量不超過 100k

這樣的話,若一篇文章有 10 張圖片,至少不用為了讀取圖片,而花費 1000k 的連線、下載時間。


3. 行動版效果

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

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

一方面前述「2. 建議的數據」會對行動版有幫助,另一方面如果是 Blogger 平台,可參考這篇「加快 Blogger 行動版圖片載入速度的密技」來改善此事。



四、另開原始圖片的技巧


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

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

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

1. 另開視窗語法

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

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

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

camera-1-網頁圖片該怎麼處理, 效果會比較清楚?


2. 使用燈箱效果

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

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

camera-2-網頁圖片該怎麼處理, 效果會比較清楚?


3. 安裝 Fancybox

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

camera-3-網頁圖片該怎麼處理, 效果會比較清楚?



五、小結


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


更多網站效能相關文章:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。