• 
• 
• 
• 
• 
• 
• 

知識普及 ? HTML5響應(yīng)式圖片的解決方法

HTML5響應(yīng)式圖片的解決方法

奈薇網(wǎng)站建設(shè) 于2017-01-24 22:03發(fā)表 閱讀次數(shù) 2848次

在響應(yīng)式設(shè)計(jì)和自適應(yīng)設(shè)計(jì)的流行下，很多web應(yīng)用往往都兼容手機(jī)、平板和PC，其中一個讓人比較頭痛的問題就是圖片的加載了。不同平臺顯然不可能用同一張大的圖片，這樣子不但浪費(fèi)手機(jī)流量、影響網(wǎng)站載入速度并且在小屏幕下會很不清晰。讓瀏覽器根據(jù)分辨率自動識別圖片是最好的方法。 　　響應(yīng)式圖片和多媒體是青島網(wǎng)站制作的響應(yīng)式網(wǎng)站的三大基礎(chǔ)重點(diǎn)之一。表面上看這是一件非常簡單的事情，只要把圖片元素的高、寬屬性值都移去，然后設(shè)置max-width屬性為100%即可。不過在這么做之前還需要考慮很多情況。 　　設(shè)計(jì)響應(yīng)式圖片的難點(diǎn) 　　去年奈薇建站網(wǎng)科技在做網(wǎng)站時也是通過設(shè)置max-width屬性使得圖片能夠自適應(yīng)。不過這么做的前提是你必須要創(chuàng)建一幅盡可能高分辨率的圖片。 　　除非是真正需要那么大的圖片，否則這就是一種浪費(fèi)。智能手機(jī)和平板電腦通過移動網(wǎng)絡(luò)瀏覽該網(wǎng)站時，并不需要那么大尺寸的圖片——大尺寸圖片意味著大的帶寬。即使不考慮帶寬也應(yīng)該考慮同一幅圖片以不同尺寸顯示時的問題，在圖片原始大小是300px的情況下以1000px尺寸顯示無疑會損失很多的細(xì)節(jié)。最好的解決方法則是使用大圖的一部分或者干脆完全用不同尺寸的圖片。 　　同時我們不應(yīng)當(dāng)忘記高分辨率的顯示需求。Apple設(shè)備的retina技術(shù)顯示圖片要求更多的圖片，考慮到其他設(shè)備也會跟隨Apple的高分辨率顯示技術(shù)（不過可能顯示的像素尺寸不同）。我們?nèi)魧⑺胁煌叽绲膱D片都預(yù)加載進(jìn)來，此乃飲鴆止渴之舉，萬不可取——畢竟我們的目標(biāo)只是是減少帶寬而非增加。 　　目前已經(jīng)有幾種備選的解決方案解決這些問題，力圖小編在這里歸納總結(jié)如下： 　　創(chuàng)建新的圖像格式 　　創(chuàng)建一個新的（html）元素 　　使用特定技術(shù)手段 　　1.創(chuàng)建新圖像格式 　　這種方法比較容易解釋，力圖小編呼吁針對響應(yīng)式圖片創(chuàng)建一種新的圖像格式。該新的格式包含了幾種不同大小版本的圖片。比如100k的文件里有75k的版本、20k的版本和5k版本的圖像。 　　從某種意義上講就像.mp3格式那樣，該種文件格式既存儲了歌曲也存儲了歌曲的meta信息。這里的圖像版本信息就好比MP3的meta信息，然后依據(jù)既定的一組標(biāo)準(zhǔn)選擇該里面最為合適設(shè)備的一個圖片版本。 　　這種解決方法的缺點(diǎn)是必須放棄一些可控性能。新文件格式會自行決定什么時候使用哪個版本的圖片，只是當(dāng)然對于不支持該種格式的瀏覽器也失去了后向兼容。 　　2.創(chuàng)建新元素（或?qū)傩裕?br /> 　　該方法已經(jīng)在使用了，不過在使用方式上存在一些爭議。這些爭議主要來自兩方面：業(yè)界的web開發(fā)者和瀏覽器制造者。web開發(fā)者提議創(chuàng)建一個新的picture元素（類似HMTL5中的video這樣的元素），該元素中包含其他的圖片源，示例代碼如下： 　　其中的img元素是默認(rèn)情況下顯示的圖片源，在其上面的兩個source元素則是在特定媒體查詢（mediaqueries）條件下顯示的圖片——這也是開發(fā)者所喜歡的一種解決方案。 　　ScottJehl針對圖片元素創(chuàng)建了polyfill項(xiàng)目，就是利用了這種思想，你現(xiàn)在可是就可以使用它了。 　　瀏覽器開發(fā)者則是通過給img元素標(biāo)簽增加srcset屬性來解決此問題的，功能一樣，然而直覺上不好理解。 　　以srcset的一個值為例講解： 　　path-to-another-image.jpg600w200h2x 　　path-to-another-image.jpg是不言自明的，當(dāng)符合下述條件時就使用該圖片 　　依據(jù)mediaqueries要求，設(shè)備最小尺寸為600w和200h 　　瀏覽器有以2x像素密度顯示的能力 　　因此這里所表達(dá)的意思是，當(dāng)瀏覽器能夠處理2x像素圖片，且設(shè)備至少是600px寬、200px高的情況下，使用此圖片源顯示。此種解決方法從瀏覽器開發(fā)者角度看是非常合適的，畢竟能夠讓瀏覽器自己通過算法獲取設(shè)備的兼容性和像素密度。 　　力圖小編在網(wǎng)上找到了提供響應(yīng)式圖片的做法，我們可以模仿它的做法，如下： 　　Markup—默認(rèn)是用img元素標(biāo)簽 　　javascript—決定viewport的尺寸，將存儲在cookie中的相關(guān)信息傳給服務(wù)器，而后再改變img標(biāo)簽的src屬性。 　　Server—獲取初始圖片請求，讀取cookie，如果不是移動終端設(shè)備則返回1x1大小的空白占位圖。然后等待JS腳本將真正的圖片填充進(jìn)去。 　　這種方式并沒有想期望中那樣完美，卻也給出了一種解決思路，可以讓其他人在上面繼續(xù)發(fā)揮。 　　許多后續(xù)的方法其思路與此相仿，默認(rèn)都是提供移動端圖片，繼而嘗試探測設(shè)備屬性后再發(fā)送合適大小的圖片。 　　Foresight.js是在給服務(wù)器發(fā)送請求之前用JavaScript去探測該設(shè)備是否支持高分辨率圖片，同時也探測該設(shè)備所在網(wǎng)絡(luò)的網(wǎng)速。依據(jù)探測結(jié)果才向服務(wù)器請求合適的圖片資源。 　　Imagesredux使用空白的1x1GIF（轉(zhuǎn)成base64格式）。它將該圖片設(shè)置為所有圖片的初始背景或占位符，提供更好的用戶體驗(yàn)。由于圖片是依據(jù)CSS設(shè)置的，所以可用mediaqueries改變響應(yīng)樣式。 　　HiSRC是一個jQuery插件，它能探測網(wǎng)絡(luò)速度與分辨率，默認(rèn)情況下只提供最小的圖片。但是HiSRC能夠探測設(shè)備更多的能力，然后提供更多不同類別的圖像。 　　總結(jié) 　　圖片響應(yīng)式化的第一步是讓它自適應(yīng)，移除高、寬屬性然后設(shè)置max-width屬性為100%。然而這并不能從根本上解決問題。主要的問題在于，那樣做會不得不創(chuàng)建一張大尺寸高分辨率的圖像，很明顯這種圖片并不利于移動終端設(shè)備的接收。 　　一種有效的解決方法是使用新的HTML語法，告知瀏覽器應(yīng)當(dāng)使用那張合適的圖片；也許我們應(yīng)當(dāng)創(chuàng)建新的圖像格式，那樣也能解決現(xiàn)在的問題。 　　不過為今之計(jì)，還是不得不借助現(xiàn)有的技術(shù)實(shí)現(xiàn)圖像響應(yīng)式。這些技術(shù)的思想是提供移動端版本的圖像，然后探測其是否還能處理更大的圖像，如果可以則使用Javascript腳本將更大的圖片替換默認(rèn)的小圖。 　　最后，青島網(wǎng)站設(shè)計(jì)的小編收集的響應(yīng)式圖片的解決方案，希望大家喜歡。

HTML5響應(yīng)式圖片的解決方法相關(guān)標(biāo)簽：開發(fā)網(wǎng)站，網(wǎng)頁制作，設(shè)計(jì)網(wǎng)站，網(wǎng)站注冊

相關(guān)熱點(diǎn)推薦

網(wǎng)站設(shè)計(jì)中程序員和美工 Tab(選項(xiàng)卡)的產(chǎn)品 從精簡導(dǎo)航談小型網(wǎng)站的 如今虛擬外鏈對我們的作 網(wǎng)頁設(shè)計(jì)中的版式原理- 使用框架和滑動門技術(shù)進(jìn) 清新的網(wǎng)站設(shè)計(jì)風(fēng)格 網(wǎng)頁設(shè)計(jì)之視覺信息傳達(dá) 用戶體驗(yàn)與網(wǎng)頁界面設(shè)計(jì) 沒有交互意識的設(shè)計(jì)師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁設(shè)計(jì) 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機(jī)交互界面設(shè)計(jì)的三個 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶體驗(yàn)中溝通的技巧 迭代的設(shè)計(jì) 網(wǎng)站中視覺元素的設(shè)計(jì) 網(wǎng)站設(shè)計(jì)的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對 手機(jī)建站時容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺識別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁不到首頁 青島網(wǎng)站設(shè)計(jì)中關(guān)于al 好設(shè)計(jì)應(yīng)該是平凡的設(shè)計(jì) 網(wǎng)站LOGO簡論 網(wǎng)頁布局設(shè)計(jì)基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點(diǎn) 新站快速推廣經(jīng)驗(yàn)，百度 為中文而設(shè)計(jì)的文本框 關(guān)于網(wǎng)站優(yōu)化五大技巧 如何進(jìn)行網(wǎng)站首頁改版 web設(shè)計(jì)師可以走得更 專業(yè)設(shè)計(jì)網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計(jì)的幾點(diǎn)知識

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶