• 
• 
• 
• 
• 
• 
• 

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

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

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

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

HTML5響應(yīng)式圖片的解決方法相關(guān)標(biāo)簽：企業(yè)網(wǎng)站制作，網(wǎng)站申請，建網(wǎng)站，開發(fā)網(wǎng)站

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

網(wǎng)站的PR解釋 美國大選之后，VR/A 中文網(wǎng)站的SEO如何來 如何提高網(wǎng)站的流量和訪 一家公司的網(wǎng)站應(yīng)該有哪 青島網(wǎng)站設(shè)計(jì)如何選擇網(wǎng) 如何進(jìn)行網(wǎng)站內(nèi)鏈建設(shè) 網(wǎng)站建設(shè)好的一些建議 SEO網(wǎng)頁質(zhì)量直接測度 關(guān)注各網(wǎng)站的布局調(diào)整 青島網(wǎng)站設(shè)計(jì)如何做到文 企業(yè)為什么要做微信營銷 關(guān)于“反饋提示”的交互 企業(yè)定制網(wǎng)站有什么好處 圖標(biāo)設(shè)計(jì)心得 網(wǎng)頁設(shè)計(jì)如何傳達(dá)信息 網(wǎng)頁文字的閱讀體驗(yàn) 如何增強(qiáng)圖片設(shè)計(jì)的立體 獨(dú)立設(shè)計(jì)的網(wǎng)站與模板網(wǎng) 什么是營銷型網(wǎng)站 建站教程 什么是網(wǎng)站運(yùn)營如何來運(yùn) 越簡單越豐富—極簡網(wǎng)頁 關(guān)鍵詞排名下降原因及解 網(wǎng)站優(yōu)化過度：新手站長 企業(yè)網(wǎng)站建設(shè)時(shí)應(yīng)注意的 企業(yè)建站理由 建設(shè)符合W3C標(biāo)準(zhǔn)的網(wǎng) 建站攻略之使用CSS控 網(wǎng)頁設(shè)計(jì)要素分析 什么是個(gè)性化搜索 HTML5響應(yīng)式網(wǎng)站地 如何選擇一家好的青島網(wǎng) 青島網(wǎng)站制作的公司哪家 網(wǎng)頁設(shè)計(jì)與用戶瀏覽體驗(yàn) 管理網(wǎng)站的一些經(jīng)驗(yàn)和教 青島網(wǎng)站設(shè)計(jì)之網(wǎng)頁設(shè)計(jì) 建個(gè)人網(wǎng)站有哪些方式 網(wǎng)站后臺(tái)管理系統(tǒng)是什么

奈薇建站網(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ū)信息港 山東在線門戶