案例
  • 案例
  • 新闻
最新消息
企业品牌数字化知识分享

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

2020-12-25(1231)次浏览

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

请注意,不是iPhone。我们说的是廉价电话。更重要的是,他们中的许多人都是用有限的数据计划来实现这一目标的。

这意味着我们必须设计我们的网站来考虑这一点,这意味着为移动网络优化图像。光栅图像(如.jpeg文件)不适合响应式设计。他们的测量被设计成固定的,大的可以占用带宽。

如果你想为你和你的用户降低成本,同时确保你的网站总是最好的,你就需要找到一种方法让你的图像响应。好消息是人们正在努力解决这个问题。已经有一些解决方案了。诀窍是知道哪一个最适合你。
让我们从第一个也是最简单的选项开始:
最大宽度:100%;
简单地说,您设置了一点CSS来应用于所有图像。一旦到位,它将确保您的所有图像保持在其父元素内部。这样,当人们在较小的屏幕上查看你的网站时,图像一定会缩小。
例子:
最大宽度:100%;
赞成的意见
它很简单,只要不设置任何像素特定的图像高度,它就可以完美地工作。
你根本不需要改变你的HTML。常规的<img>标记完成任务。
通用浏览器支持。
欺骗
视网膜屏幕:除非你把所有的图像都做成实际像素尺寸的两倍,否则在某些机器上,比如mac,以及现在的一些Android设备上,它们看起来会很时髦。怪苹果。我愿意。
使用大量巨大的图像(不管你是否在处理视网膜屏幕),可能会对移动设备的性能造成影响。更糟糕的是,他们会吃掉有限数据计划中的数据。如果你能帮忙的话,你不想对你的用户这么做。
这种简单的技术有它的位置,但它并不适合所有的情况。如果您的网站将为移动设备上的用户提供大量图像,您可能需要实现以下建议的解决方案之一。
注意:下面两个解决方案包含在HTML5规范中。随着时间的推移,它们将成为“官方”解决方案,因为越来越多的浏览器开始全面支持它们。
rcset公司
通常,在将图像嵌入页面时,只定义一个“源”,格式为src属性,如下所示:
<img src=“/img\u文章/22532/随便什么.jpg“alt=”随便“>
srcset属性允许您添加图像的其他版本,设置这些图像显示的屏幕宽度,并让浏览器做出决定。这意味着用户的设备只下载适合其屏幕大小的图像。
你可以这样设置:
<img src=“/img\u文章/22532/-小.jpg“srcset=”随便-中.jpg1000w,随便吧-大.jpg2000w“alt=”随便“>
赞成的意见
你让浏览器来计算。为正确的屏幕大小选择合适的图像可能会很棘手,如果您使用了大量图像,您可能不想麻烦。
你在节省带宽。这意味着降低托管成本,降低移动用户的数据成本。
部分浏览器支持。实际上,这是列表中第二个受支持的选项。
欺骗
它只是部分浏览器支持。要使它在旧的浏览器(包括一些移动浏览器)中工作,您需要使用一点称为polyfill的JavaScript。
两个这样的polyfill是srcset polyfill和picturefill。顺便说一句,picturefill还提供了对<picture>元素的浏览器支持,下一个就是这个元素。
最后,在单个<img>标记上使用srcset属性可能是将来人们最常使用的选项。当我们大多数人为了节省带宽而使用同一幅图像的几个不同大小的版本时,这才有意义。
反应灵敏的图像
<图片>
srcset只是一个可以应用于任何图像的属性,<picture>是一个完整的元素,有自己的标签和所有东西。不过,它的一般用途是一样的。告诉浏览器一个图像有几个不同的版本,以及显示它们的屏幕大小。
区别在于数学。如果只使用srcset,浏览器将根据正在查看站点的浏览器的屏幕或窗口大小进行一些计算。您可以给出提示,但浏览器本身会发出调用。
使用<picture>,您可以完全控制。如果你说一个特定的图像应该以一定的屏幕宽度显示,那么这就是将要显示的内容。这样做的代价是更多的代码。因此,通常建议在处理同一图像的不同大小时使用srcset。<picture>将在您进行艺术指导时使用,并且可能希望以特定的屏幕大小显示完全不同的图像。
代码如下所示:
<图片>
<source srcset=“随便-较小.jpg“media=”(最大宽度:768px)“>
<source srcset=“随便-默认.jpg">
<img srcset=“随便-默认.jpg“alt=”随便“>
</picture>
赞成的意见
同样,你可以节省带宽。这种好处是巨大的,值得重复。
可以更好地控制以特定屏幕大小显示的图像。
欺骗
更多代码。当你不需要的时候不要使用这个元素,你会有一个更轻松的时间处理事情。
目前很少有浏览器支持。为了能够使用这个元素,您需要使用上面列出的polyfill。
自适应图像


本文地址:https://www.grwy.net/wangzhansheji/25-400.html

立即咨询 联系我们

立即与国人项目顾问通话13926537060

提供您的电话号码,国人项目顾问将致电联系您。
等待时间:5分钟以内

信息保护中请放心填写

预约成功

请保持手机畅通,我们的专业顾问将在5分钟内联系您,感谢您的支持!