• 
• 
• 
• 
• 
• 
• 

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

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

奈薇網(wǎng)站制作 于2019-07-04 12:42發(fā)表 閱讀次數(shù) 3173次

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

HTML5響應(yīng)式圖片的解決方法相關(guān)標(biāo)簽：網(wǎng)站制作方案，網(wǎng)頁(yè)制作，網(wǎng)站優(yōu)化，企業(yè)做網(wǎng)站

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

沒有交互意識(shí)的設(shè)計(jì)師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機(jī)交互界面設(shè)計(jì)的三個(gè) 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶體驗(yàn)中溝通的技巧 迭代的設(shè)計(jì) 網(wǎng)站中視覺元素的設(shè)計(jì) 網(wǎng)站設(shè)計(jì)的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對(duì) 手機(jī)建站時(shí)容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺識(shí)別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁(yè)不到首頁(yè) 青島網(wǎng)站設(shè)計(jì)中關(guān)于al 好設(shè)計(jì)應(yīng)該是平凡的設(shè)計(jì) 網(wǎng)站LOGO簡(jiǎn)論 網(wǎng)頁(yè)布局設(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)站首頁(yè)改版 web設(shè)計(jì)師可以走得更 專業(yè)設(shè)計(jì)網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計(jì)的幾點(diǎn)知識(shí) 青島網(wǎng)站制作哪家強(qiáng) 交互設(shè)計(jì)的8項(xiàng)黃金法則 設(shè)計(jì)良好網(wǎng)頁(yè)的4項(xiàng)原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營(yíng)銷的五個(gè)階段 青島網(wǎng)站設(shè)計(jì)成功要素 小型企業(yè)網(wǎng)站維護(hù)

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

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