响应性的图像-为什么它是必须的和4种方法来完成它

我们需要改变我们对待图像的方式。为什么?因为互联网已经改变了。人们不仅仅是在家里浏览网页，他们还会在几乎所有可能的尺寸的屏幕上到处浏览。事实上，世界上有一些地方，人们只能通过智能手机上网。

不是iphone,提醒你。我们说的廉价手机。更重要的是，他们中的许多人都在用有限的数据计划来做这件事。

这意味着我们必须设计我们的网站来解释这一点，这意味着为移动网络优化图像。像.jpeg文件这样的光栅图像不适合响应式设计。他们的测量是固定的，大的可以消耗带宽。

响应的图像

如果你想为你和你的用户降低成本，同时确保你的网站看起来总是最好的，你需要找到一种方法来让你的图像响应。好消息是人们正在研究这个问题。已经有一些解决方案了。诀窍是要知道哪种方法最适合你。

让我们从你选择的第一个，也是最简单的开始:

max-width:100%;
简单地说，你设置了一些CSS来应用于所有的图像。一旦到位，它将确保您的所有图像都留在它们的父元素内。这样，当人们在一个更小的屏幕上浏览你的网站时，图像就会被保证缩小。

例子:
img {

max-width:100%;

}

优点
它很简单，只要你不设置任何像素特定的图像高度，它就能很好地工作。
你根本不需要改变你的HTML。常规的<img>标记完成任务。
通用的浏览器支持。
缺点
视网膜屏幕:除非你让所有的图像都是你需要的像素尺寸的两倍大，否则它们会在某些机器上看起来很时髦，比如mac电脑，现在还有一些安卓设备。指责苹果。我做的事。
使用大量的图片(无论你是否在处理视网膜屏幕)，在移动设备上的表现都很困难。更糟糕的是，他们可以在有限的数据计划上消耗数据。如果你能帮助你的用户，你不希望这样做。
这个简单的技术有它的位置，但是它不适合任何情况。如果您的网站将为移动设备上的用户提供大量图片，您可能希望实现以下建议的解决方案之一。

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

srcset
通常，当您将一个图像嵌入到页面中时，您只定义了一个“源”，即src属性的形式，例如:

< img src = " / img_articles / 22532 / whatever.jpg”alt = "不管" >
srcset属性允许您添加图像的其他版本，设置要显示这些图像的屏幕宽度，并让浏览器作出决定。这意味着用户的设备只能下载屏幕大小的正确图像。

你可以这样设置:

< img src="/img_articles/22532/ whateversmall.jpg " srcset=" .jpg 1000w, whateverlarge.jpg 2000w" alt=" > "。
优点
你让浏览器做数学运算。为正确的屏幕尺寸选择正确的图像可能会很麻烦，如果你使用了大量的图像，你可能不想麻烦。
你节省带宽。这意味着降低主机托管成本，降低移动用户的数据成本。
部分浏览器支持。事实上，这是列表中第二受支持的选项。
缺点
它只是部分浏览器支持。要使它在旧的浏览器(包括一些移动浏览器)中工作，您需要使用一些称为polyfill的JavaScript。

两个这样的填充填充是srcset-polyfill，和图片填充。顺便说一下，图片填充还为元素提供浏览器支持，该元素将在接下来的页面中出现。</picture>

最后，在单个<img>标签上使用srcset属性可能是人们将来最常用的选项。这是有道理的，因为我们大多数人只是为了节省带宽而使用几个不同大小的相同图像版本。

响应的图像

<图片>
当srcset只是一个可以应用于任何图像的属性时，是一个成熟的元素，有它自己的标记和所有东西。</picture>不过，它的一般用途是一样的。告诉浏览器有几个不同版本的图像，以及显示它们的屏幕大小。

不同之处在于数学。如果您只使用srcset，浏览器将根据浏览器的屏幕或窗口大小进行一些计算。你可以给出提示，但浏览器本身会发出提示。

用<图片>，你完全控制。如果你说某个图像应该显示在特定的屏幕宽度，那么这就是将要显示的内容。成本是更多的代码。因此，一般建议在处理同一图像的不同大小时使用srcset。<图片>是在你做艺术指导时使用的。 本文来源：优站，转载请注明出处！如果需要营销型网站建设、微商城、小程序商城、多端小程序 请联系我们！