很多站長和博主都有關於高清圖片怎么放在頁面上的困惑。 圖片文件太大了， 加載時間就會很長，我相信沒人願意為了看一張圖片要等個10幾秒鍾。 就算頁面不需要用戶的等待， 一大塊空白的區域， 用戶體驗也就好不到哪去了； 還有就是高質量的圖片往往尺寸都比較大， 比如說一個全國地圖， 往往當等待了很長時間也只是看到了一個全景， 想要看某一個省市就需要用戶手動的縮放瀏覽器， 這樣是很不爽的用戶體驗。 我今天的這篇文章就是給大家提供一個方法， 可以讓高清圖片在你的網頁中不再讓你又愛又恨， 可以即讓用戶可以享受高清圖片所帶來的視覺體驗， 又不會有加載時間過長的困擾。 先給大家看看效果吧，請看下邊這張圖片， 它是Windows Server 2008的整體框架圖， 原圖可是10+M的文件， 用鼠標點點看效果吧 ：）
鼠標點擊：放大
鼠標滾輪：放大或縮小
拖拽： 移動圖片位置
圖片右下角：試試看更多功能
你也可以用你的Ipad, IPhone試試 http://www.zoom.it/hid
特點：
- 加載速度超快， 和加載一張小尺寸的圖片速度差不多 （要知道這可以一張10+的圖片呀）
- 想看某處的細節？ 可以！ 可以像用Google Earch一樣， 點擊某處， 就會放大。 要注意， 它可不是簡單的放大圖片， 你會發現不會因為圖片的放大而降低圖片的顯示質量， 看到的還是高清的：） 當然你也可以通過拖拽來移動圖片查看其他部分。 可能你會發現圖片有一個從模糊到清楚地過程， 這是漸進加載的效果。 我的這個圖片是從美國的服務器提供， 所以會慢一點。 如果要是把這個插入到國外的站點， 性能會相當的好。
- 也許你會覺得這個顯示區域太小了， 老是拖拽不爽。 沒關系， 看到右下角那個小圖標了嗎？
點一下整個圖片就會全屏至整個網頁。 這下就方便了吧。 - 絕對的跨平台， 不需要任何的插件支持， 純JavaScript實現， 可以在所有的桌面瀏覽器， IPad， IPhone， Android 等等移動設備， 只有你想不到， 沒有它不能顯示的地兒！
怎么樣？ 夠吸引人了吧！ 其實這就是Deep Zoom技術。
什么是Deep Zoom？
給段比較官方的回答吧：
Deep Zoom 提供以交互方式查看高分辨率圖像的能力。您可以快速放大和縮小圖像，而不會影響應用程序的性能。Deep Zoom 允許通過提供多分辯率圖像和使用彈簧動畫來使加載和平移變平滑。
怎么實現在我的頁面？
一， 利用微軟Zoom.it 服務
方法是有多種的， 如果你不懂技術， 那么我向你推薦Zoom.it, 這是一個微軟提供的Deep Zoom服務， 最大的特點就是免費， 你只要把你的圖片發送到它的服務器， 就可以把生成好的Deep Zoom圖片嵌入到你自己的網頁里了。 下面介紹一下步驟：
1. 訪問http://www.zoom.it/，在網頁的下方輸入你想要轉換成Deep Zoom的圖片地址。 現在只支持在公網上的圖片， 還不支持從本地上傳圖片。
2. 點擊Create按鍵， 圖片就開始處理了....
3. 處理完成后你， 你就會看到處理后的效果
當然你可以把這個成果分享給其他人， 下邊的輸入框里就是鏈接 http://zoom.it/vwbp
4. 點擊Embed 按鍵， 會看到一段腳本， 這個就是可以讓你把Deep Zoom圖片嵌入到你自己的網頁的東西
<script src="http://zoom.it/vwbP.js?width=auto&height=400px"></script>
把這段代碼插入到你的頁面里邊就行了， 如果你想自定義顯示區域的大小， 可以通過改變width和height的值來實現。
<div>
<script src="http://zoom.it/vwP.js?width=600px&height=500px"></script>
</div>
這種方法還是比較簡單好用的吧。 如果你技術懂得不多， 這種方法還是蠻適合你的。 而且不需要把高清圖片放在自己的網站上， zoom.it 幫你都搞定。 開頭的圖片那個就是用這種方法實現的。
二， 通過已有框架實現Deep Zoom
- 我想大家都聽說過SilverLight吧， 在SilverLight2之后就提供一套Deep Zoom的支持，通過Deep Zoom Composer可以把原文件分解成不同縮放比例下的多組圖片文件， 然后在瀏覽器端用SilverLight可以查看原圖的SilverLight效果。 這種方法由於SilverLight的跨平台局限， 使得只有在桌面瀏覽器里才能派得上用場。
- SeaDragon.Ajax 一個純JavaScript的Deep Zoom框架， 由於是純JavaScript, 所以就有超強的平台兼容性。 zoom.it就是基於SeaDragon.Ajax實現的
這篇文章不會對這兩種方法做太多的介紹， 我會在后續的文章中詳細介紹給大家。 希望以上的內容可以給大家一些幫助。 也希望大家多多交流：）