我们必须改变我们的方法对图像。为什么？因为互联网已经改变了。人们不只是浏览，在家里，更多的，他们做的所有的地方，在几乎每一种尺寸的屏幕。事实上，有人在只连接到互联网世界的组成部分是通过智能手机。

不介意你的iPhone。我们说的廉价手机。更重要的是，他们中的许多人正在做它用有限的数据计划。

这意味着我们要设计我们的网站，考虑到这一点，这意味着移动互联网的图像优化。光栅图像，如JPEG文件。，不适合快速响应的设计。他们的测量设计是固定的，和大的可以吃掉带宽。

响应图像

如果你想保持低成本为您和您的用户，而让你的网站看起来总是最好的，你需要找到一个方法让你的图像响应。好消息是，人们正在研究的问题。已经有一些解决方案在那里。关键是要知道哪一个最适合你的工作。

让我们开始第一个，最简单的，你的选择：

最大宽度：100%；

简单的说，你那点CSS设置适用于所有图像。一旦到位，这将确保你的所有图片呆在它们的父元素。这样，当人们认为你的网站在小屏幕上，图像是保证缩小它。

例：

IMG {

最大宽度：100%；

}

利

很简单，和它的作品完美，只要你不设置任何特定像素的图像高度。

你根本不需要改变你的HTML。正规的< IMG >标签来完成工作。

通用浏览器支持。

缺点

视网膜屏幕：除非你让所有的图像的两倍的实际像素尺寸要大，他们会对某些机器，像Mac的外观时髦，现在一些Android设备。怪苹果。我做的。

利用大很多的图像（无论你处理视网膜屏幕或不），可以在移动设备上的性能硬。更糟的是，他们可以吃上有限的数据，计划数据。你不想那样对你的用户，如果你能帮助它。

这个简单的技术有它的位置，但它不会为每一种情况是正确的。如果你的网站将提供大量图像，用户在移动设备上，你可能想实现下面的一个解决方案。

注意：接下来的两个解决方案都包含在HTML5规范。他们将成为“官方”的解决方案，随着时间的推移，越来越多的浏览器开始支持他们。

srcset

通常，当你嵌入一个图像到一个页面，你只定义一个“源”，在src属性的形式，像这样：

< IMG src=“/ img_articles / 22532 /什么。JPG”alt=“不管”>

的srcset属性允许你添加图像的其他版本，设置屏幕宽度，这些图像都出现，让浏览器做的决定。这意味着用户的设备只下载正确的图像的屏幕尺寸。

你可以设置它一样：

< IMG src=“/ img_articles / 22532 /什么小。JPG”srcset =“whatever-medium.jpg 1000W，whatever-large.jpg 2000W”alt=“不管”>利

你让浏览器做数学。对屏幕的大小选择合适的图像可以是棘手的，如果你使用了很多图片，你可能不想打扰。

你节省带宽。这意味着较低的托管费用，为你，和低成本的移动用户数据。

部分浏览器支持。事实上，这是第二最支持的选项列表。

缺点

只有部分浏览器支持。使它在老的浏览器（包括手机浏览器），你需要使用一些JavaScript叫做polyfill。

这是两polyfills srcset polyfill，和picturefill。顺便说一句，picturefill还为<图片>元浏览器的支持，这是下一个。

最后，使用srcset属性在一个单一的< IMG >标签可能是人们会用最未来的选择。这是有道理的，当我们中的大多数人会简单地使用几个不同大小的版本相同的图像，为了节省带宽。

桔子科技作为成都做网站的顶级服务提供商，已经为上百家企事业单位提供了网站建设、网站制作、网站改版、微信/小程序开发、网站空间租用等服务，优质的服务得到了广大客户的一致认可，如果您有网站建设、网站制作、网站设计、微信开发、小程序开发等方面的需求，请致电：028-86633922，我们会根据您所从事的行业领域和网站类型，在最短的时间内请我们的营销顾问与您预约后上门拜访您，直接面谈交流为您解答所有的网站建设疑问。