響應式網站怎么處理圖片

現在的用戶瀏覽網站的設備越來越多樣化了，有PC、平板、手機，而且屏幕尺寸也大有不同，所以現在越來越多的企業選擇做響應式網站，響應式網站可以自適應屏幕尺寸，但是有一點不好，就是圖片太大，在PC上可能不明顯，但在手機上就顯得有點大了，如果不是用Wifi的話，消耗手機流量還是挺大的，下面廣州騰虎網站建設公司就來分享一下響應式網站怎么處理圖片大小？

一、采用srcset屬性，如下代碼

<img src="默認圖片" alt="" srcset="1倍大圖 600w 200h 1x, 2倍大圖 600w 200h 2x, 小圖 200w 200h">

srcset里面是根據媒體查詢條件顯示不同圖片，跟上面差不多一樣，表達方式不一樣，1x表示顯示器像素密度顯示倍數。正常我是兩者結合的方式實現，各大瀏覽器更新的版本基本都支持，但是IE系列的不支持，比較嚴重的問題是QQ瀏覽器以IE為內核，微信瀏覽器不支持，而微信在國內的使用率非常高，加上微信公眾平臺的微官網是客戶的常見需求,更后解決辦法是使用Picturefill，效果非常好。

二、采用picture元素，如下代碼

<picture alt="">

<source src="大圖路徑" alt="" media="(min-width: 640px)">

<source src="小圖" alt="" media="(max-width: 639px)">

<img src="默認圖片" alt="" alt="">

</picture>

想要提高網站的用戶體驗，響應式網站是基本，在做好響應式網站的同時，還有充分考慮用戶體驗，現在的互聯網時代，是用戶體驗為王的時代，只要網站用戶體驗做的好，網站的流量自然就會高。