響應式網站圖片處理的4中方法
日期:2016/4/7 / 人氣:
圖片在網站設計中起重要作用,但也可能會帶來不少挑戰。當在站點上使用的圖像決定,你必須確定,你會尋找那些圖像,圖像的題材本身,最后它的圖像格式是最好的在該特定實例。這些因素都是重要的,但是當你創建一個反應靈敏的網站,還有,你必須面對以及其他挑戰。
大小事項
在此之前的響應網頁設計的興起,是一個added網站圖片“一刀切”的做法。這意味著相同的圖像被傳遞給所有觀眾,無論其屏幕大小或設備的(一個圖像將被顯示的最大尺寸是已使用的大小)。這種方法對上不去響應網站,但是。
這是最好的大屏幕圖像往往過于龐大,無論是在物理尺寸和文件大小,為小屏幕設備而言。我們可以縮小圖像的物理尺寸下為較小的顯示器,但份量文件大小保持。從一個網站性能的角度來看,這是一個大問題。
當涉及到網站的響應,我們需要提供網站圖片更聰明的方法。如果你所希望做的是不同版本的圖像,這是敏感部位最常見的需要之間進行切換,再就是你可以考慮以更聰明的方式實現圖像的幾個選項。
自適應數字圖像
據該網站的這種做法,自適應數字圖像 “檢測到您的訪問者的屏幕尺寸,并自動創建,高速緩存,并提供你的網頁的嵌入式HTML圖像的設備進行適當的重新縮放的版本。”有了這個方法,你上傳圖片的最大版本將與您的設計使用了一些斷點一起必需的。
然后自適應數字圖像將會創建圖像的縮放版本的最佳匹配斷點,并根據需要,而不是總是用最大的尺寸拯救他們。甚至還有視網膜屏幕的支持。
這種方法是非常容易部署,無需更改需要您網站的HTML。雖然它絕對可以幫助您提供更小的圖像,屏幕較小的設備,有局限性這種方法為好。
自適應數字圖像需要Javascript工作。這還需要Apache和PHP,所以這取決于你正在構建的網站類型,自適應數字圖像可能不適合你的工作需要。舉例來說,如果你的網站是在Windows Server上的.ASPX網站,您將無法使用自適應數字圖像。
HiSRC
另一個JavaScript供電(這一個使用jQuery)選項HiSRC。這個插件允許你創建小型,中型和大型版本的圖像。然后,該腳本將展示基于視網膜屏幕和網絡速度適當的圖像。
一個缺點這種方法是,它的工作原理是首先加載最小圖像。然后檢查,看是否有較大的圖像會更合適。如果是這樣,它加載這些較大的圖像。這意味著有對某些用戶雙下載。是的,它只會影響高帶寬連接的用戶,但它仍然是一個應該提到一個性能問題。
另一個缺點是需要HiSRC自定義標記來執行的事實。這使得它非常具有挑戰性的在某些情況下使用,比如較大的網站,你正在努力改造這個解決方案或CMS解決方案,不給你完全訪問標記。
srcset和大小
如果你正在尋找一種方法并不需要Javascript和更多的是本地的HTML供電解決方案的的srcset和尺寸屬性可能是你最好的選擇。
添加到<IMG>元素,srcset讓你決定正確的HTML中不同大小的圖像,它是與另一個新的屬性一起使用尺寸。
雖然srcset 是HTML土生土長的一塊,它不是在所有的瀏覽器都支持。最引人注目的是沒有支持老版本的Internet Explorer發布沿之前(IE 11和下面不支持srcset)。這意味著,本地或沒有,你可能會想修補支持利用填充工具像 Picturefill。因此,即使srcset本身并不需要Javascript,確保該解決方案的廣泛支持將推動你把它列入。
CMS供電解決方案
取決于使用內容管理系統,還可以是可被添加到這些平臺響應圖象的解決方案。
我使用ExpressionEngine CMS和經常把一種叫做“插件影像儀 ”來自動實現調整大小的圖像。
如果你正在使用WordPress的,像“一個插件RICG響應圖像 ”或“ 自適應數字圖像WordPress的 ”搜索可以查到您從CMS權所需要的影像解決方案。
關于藝術指導
為響應網站提供更好的縮放圖像的這些方法都工作得很好,如果你并不需要這些圖像藝術指導(這意味著你需要以不同的裁剪圖像的不同的決議)。如果你需要超越簡單的調整大小,使用的HTML <照片>元素將成為您的需求更好的選擇。
作者:朋友圈科技
相關內容 Related
- 為什么響應式設計需要媒體查詢2016/8/5
- 虛擬主機被搜索引擎爬蟲訪問耗費大量流量解決方法2016/8/3
- 網站建設中如何創建完美的顏色組合2016/8/1
- 什么是長尾關鍵詞?2016/8/1
- 建設企業或個人網站的好處2016/7/8
- 前端開發者需要知道的常識2016/7/6
- 12種方法為您拓展業務通道2016/7/27
- SEO優化的三大技巧2016/7/24
- 10的方法來提高你的網站設計2016/7/24
- 網站統計用哪個比較好,百度?cnzz?2016/7/21