響應式設計如何讓圖片自適應？寬度100%太Low了！

Ethan Marcotte曾經在A List Apart上發表過一篇名為「Responsive Web Design」的文章，他當時就提出了響應式架構的概念（不少混跡技術圈的肯定看過這篇文章，這裡就不再贅述了）。隨著終端設備的日益豐富，無法針對設備類型、尺寸或瀏覽器進行自適應調整的圖像會嚴重減慢網站的訪問速度，最終導致用戶流失。

談到圖片自適應，很多前端開發人員會不假思索的來一句「寬度100%」，但是在寬度自適應的同時如何保證圖像不失真呢？近日，關於該問題一位網友的回答引起了大家的激烈爭論，我們先來看看這位網友是如何解決該問題的：

沒錯，就是這麼一行簡短的代碼！部分前端開發者認為這行代碼既簡潔又高效，很好地解決了圖片自適應問題，但有部分前端開發者認為這種方法無法解決解析度問題，無法保證圖片不失真，這個問題到底應該如何解決呢？

一個圖像版本顯然是不夠的，為了確保各個屏幕尺寸之間的平滑過渡，設計師必須以不變應萬變。也就是說，必須採取靜態的方式使圖像適應性更強。對於靈活的布局大小和屏幕密度的多樣性都有相同的解決方案：提供可變解析度的圖像。圖片分為背景圖片和通過img標籤引入的圖片，我們是應該使用高解析度圖像來利用高解析度硬體，還是使用小圖像以便在低分辨環境中快速載入？

通過提供同一圖像的不同版本（大小和解析度），可以向需要的網站訪問者發送高解析度版本，為不具有此功能的網站提供較低解析度的版本。要了解需要多少不同版本，可以採取以下步驟：

• 建立尺寸和解析度範圍的極限，並記錄各種尺寸和解析度。

• 使用新的響應式圖像標記來標記備用版本，以便瀏覽器可以載入最適合用戶屏幕解析度和窗口大小的版本。

具體到代碼級，前端開發應該怎麼做呢？

某知識平台中標籤為「JavaScript開發者」的網友的回答贏得了不少人的贊同：

面對格式問題，我們可以盡量讓瀏覽器替我們決定。過去，實際上只有四種圖像格式具備通用接受性：GIF，JPEG，PNG或SVG。然而，今天的響應式，太多可變格式的圖像允許開發者使用新的技術，以便可以在支持的瀏覽器中使用其他更新更好的格式，在不支持的瀏覽器中繼續使用舊格式。

當然，也有網友提到了一種未來可能被大量普及，但目前已經被應用有效果的解決方案，同時該解決方案也是開源的：

如果對這部分很感興趣，不妨讀一下《Head First Mobile Web》一書，這本書中提到過一個叫http://Sencha.io Src的第三方服務，把img的src屬性設置為http://scr.sencha.io/http://xxxx(圖像域和路徑)，http://Sencha.io Src會根據設備解析度壓縮原圖創建一個適合的圖像提供給訪問設備。

http://Sencha.io是國外服務，前端開發者可以嘗試在國內是否可用並且效果如何。當然，如果國內有類似服務也可以嘗試使用。響應式圖像很無聊，但是它使開發者能夠設計出當今消費者所需要的沉浸式體驗，而不會犧牲圖片質量或頁面載入速度，現代Web開發需要這些響應式圖像。

綜述

網站載入時間延遲一秒就可能會導致網站轉化率下降7％，創建響應式Web環境是棘手的，它需要微妙的平衡。但是，在不同屏幕尺寸和設備功能的世界中，建立這種圖片自適應是必要的。總結下來基本是兩種方法：如果不在乎解析度，開發者可以沿用寬度100%的方法，這種方法是最簡便的；如果需要考慮解析度，就需要查詢清楚不同設備的解析度，然後採用第三方服務或在代碼層自主進行設置。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！