如何解决响应式网站图片无法适配的问题？

随着技术的变革，移动设备的普及，不同大小的移动设备越来越多，这些都让我们看到了响应式网站普及的曙光和迫切的需求。但响应式网站有一个必须要解决的问题：网站中的图片如何适配响应式。大图在PC、平板、手机上都一样大小，太不科学了。一是手机流量太大，下载速度慢。二是图像经过大规模压缩后尺寸会变得模糊。

如果图片以背景的形式存在，这个比较好解决。您可以使用媒体查询为不同尺寸的显示终端设置不同的图片。如果是网页中插入的图片，解决起来会比较复杂。

一、采用srcset属性

在srcset中，根据媒体查询条件显示不同的图片。和上面差不多，只是表达方式不同而已。 1x表示显示器像素密度的显示倍数。

通常，我实施两者的结合。各大浏览器的最新版本基本都支持了，但是IE系列却不支持，这让我们感到很头疼。

更严重的问题是QQ浏览器以IE为核心，微信浏览器不支持，微信在国内的使用率非常高。此外，微信公众平台微信官网是客户的共同需求。最终的解决方案是使用Picturefill。效果很好。

二、采用picture元素

在追逐响应式建站的浪潮中，希望不要忘记用户体验。只有网站中的所有元素都符合响应式标准，才是真正的响应式网站。

信息来源推来客：响应式网站制作