Q1：如何在網頁上更平滑的縮放圖片？

鄭子璉（微軟技術社群MVP）

A1

　　在以網頁來寫軟體操作說明、安裝說明、回覆技術問題或其他應用時，可能需要引用螢幕拷貝畫面是1024×768或是更大尺寸的原圖，由於圖片大小超過一般的瀏覽器可視大小，故不適合直接以1:1尺寸放到網頁上說明使用，大部分情況會縮小顯示。

　　顯示的圖檔縮小經常採用的有兩種方法：

  1. 將原圖另存尺寸較小的新檔

    2. 　　PNG圖檔支援全彩的格式，適合用在線條圖或是對話盒這類，原來適用GIF格式的圖檔都可以用PNG圖檔，但是縮小時，大部分繪圖軟體多採用平滑化（混色運算）方式縮小，所以會內插出中間色，反而導致檔案大小可能在圖檔尺寸較小之圖檔在檔案大小較原圖大，而增加網路傳輸量，此外，若配合不同瀏覽器解析度製作不同圖檔尺寸的圖片時，檔案就會分的很多個不同的大小尺寸，不好管理。

  2. 利用HTML語法或是Style（樣式）語法顯示較小的圖型

    3. 　　用HTML語法或樣式可設定圖形的寬度或高度，在IE中是採用直接運算，對於螢幕畫面會有很明確的線條或表格或文字等，可能會因為進位抽色時剛好沒抽到選到該列或該行而形成掉線、掉色或掉字，所以顯示出來圖形可能很糟糕，這類圖形通常主管不能接受，鐵定被罵。但是有一個小優點，若是在使用者端重覆縮放瀏覽該圖檔，則可直接於系統快取中讀出，可降低網路所需流量。

改善構想：

　　理想上是可直接傳遞原始圖檔，減少圖檔管理的困擾，並且在使用者端以平滑化方式顯示，提升圖片的美觀，減少網路傳遞所需流量。經過測試，VML語法可以達成此目的。

　　首先，分別測試HTML、Style及VML三種語法的差異，請自行準備一個大尺寸的圖檔並將其檔名存為big.png後，測試以下的HTML內容，為了可以瀏覽原圖，三種方式均增加點選圖形即可瀏覽原圖的超連結。並將IE畫面顯示如後。

<html xmlns:v>
<head>
<Title>縮小</Title>
<style>v\:* {behavior:url(#default#VML);}</style>
</head>
<body topmargin="0" leftmargin="0">
<table width=100%>
<tr>
<td align=center>
 <a href="big.png" title="點選觀看原圖">
  <img src="big.png" width="400px" height="300px" border=0>
 </a><br>html 語法</td>
<td align=center>
 <a href="big.png" title="點選觀看原圖">
  <img src="big.png" style="{width: 400px; height=300px; }" border=0>
 </a><br>style 語法</td>
</tr>
<tr>
<td align=center>
 <a href="big.png" title="點選觀看原圖">
  <v:shape style='{cursor: hand; width:400px; height:300px; }'>
   <v:imagedata src="big.png"></v:imagedata>
  </v:shape>
 </a><br>vml 語法</td>
</tr>
</table>
</body>
</html>


圖 1　不同語法縮小圖形比較

　　由圖1中可以明顯看出，HTML與Style語法將導致圖片縮小時，文字、格線等明顯掉字或掉色，甚至無法辨識文字的原始語言，但以VML語法縮小的圖形則較美觀，並仍保持文字與線條。三種方式主要語法列示如下表：

方式語法內容
HTML
<img src="big.png" width="400px" height="300px">
Style
<img src="big.png" style="{width: 400px; height=300px; }">
VML
<v:shape style='{width:400px; height:300px; }'> 
  <v:imagedata src="big.png"> </v:imagedata> 
</v:shape>

　　在使用VML語法檔頭有必要變更，在此僅列出本例所需變更語法：

標籤語法內容說明
html
<html xmlns:v>
需將<html>變更
Style
v\:* {behavior:url(#default#VML);}
需在<head>內<style>標籤內新增樣式

　　將圖形放大時，語法類似，不再重複於文中列示，此外HTML及Style效果相同，故僅比較HTML及VML語法如下圖：


圖 2　不同語法放大圖形比較

　　由圖2中可以明顯看出，HTML語法將導致圖片放大時，文字、線條等明顯呈鋸齒狀，甚至部分線條或字型會因放大非整數倍時造成特別粗，但以VML語法放大的圖形則較美觀，鋸齒狀較不明顯。

　　一併比較向量檔EMF圖形放大縮小時，HTML及VML語法放大及縮小成果如下圖：


圖 3　不同語法放大縮小圖形比較

　　由圖3中可以明顯看出，HTML語法縮放向量圖檔時，與使用點陣圖檔類似，上方圖形為縮小範例，下方圖形為放大範例，縮小時可能會掉色、掉字及掉線，放大時會呈鋸齒狀，但是以VML語法放大縮小則為重新繪製，就連漸層色也可平滑顯示，明顯可以看出使用VML語法較美觀，有使用該語法的優勢。

　　若將圖形前後以標籤<a …> </a>含括時，VML圖形受預設樣式影響，將無法順利展現可點選超連結的滑鼠游標，此時可透過樣式設置cursor: hand;達成變更滑鼠游標的目的，如同本例。

　　當然，用印表機列印仍有縮放圖形的效果，用VML語法會較HTML語法更平滑，縮小圖形時，比較看不出來，放大圖形時，用HTML語法在點陣檔及向量檔呈鋸齒狀的情況很明顯，用VML語法在點陣檔會較HTML語法稍為平滑些，在向量檔則完全不會有鋸齒狀情形。但是若是使用點(px)為單位，可能會發生VML圖形較HTML圖形稍小的情形，此時必須改採用其他單位，比如說公釐(mm)，則使用兩種語法展現之圖形可有一致大小顯示。

　　綜合上述所討論的部份，若在網頁檔需使用縮放來顯示圖形，可採用VML語法使其更平滑，若要提高列印的平滑度，即使圖檔不需縮放，仍可使用VML語法顯示圖形。

其他參考資訊：

HTML and Dynamic HTML: http://msdn.microsoft.com/workshop/author/dhtml/dhtml_node_entry.asp
VML Reference: http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp

註：引用時請載明出處。
鄭子璉，「華陀問診　如何在網頁上更平滑的縮放圖片」，RUN!PC，第 129 期，台北，第 40 - 44 頁，民國 93 年 10 月。

註：使用 IE (Internet Explorer)請瀏覽 IE_vml.htm。