响应式布局提高篇 - 图片正确的打开方式

图片在 Web 中占有非常重要的地位,一方面,一图胜千言,图片作为内容的载体,能够有效传递出信息;另一方面,图片占网页流量消耗的 60%,对网页的大小和加载速度有很大的影响。

随着终端设备日益丰富,人们更多地通过各种尺寸的小屏浏览网页,经常发生图片过大导致网页布局混乱的情况,非常影响用户体验。因此图片需要根据设备类型和尺寸进行自适应调整,才能保证网站在各个终端获得相似的使用体验。

要做到图片自适应宽度,一个简单的方法是,给图片设置 max-width: 100%,这确实非常有作用,图片不会溢出或者页面出现横向滚动条,那还有没有其他需要我们注意的呢?


在使用高清屏幕设备(比如 iPhone X)浏览网站时我们会发现,一些图片看起来比较模糊,而在普通屏幕设备中却没有那么模糊,这是为什么呢?

这里需要用到在上一章中提到的几个概念,为方便起见,我们一起来回顾一下:

物理像素(设备像素)

一个物理像素代表的就是最小的物理显示单元,在同一个设备中,物理像素点的大小是固定的,数量也是固定的。比如 iPhone X 的物理像素是 1125x2436。

逻辑像素(CSS 像素、设备独立像素)

逻辑像素是一个抽象单位,与设备无关,在不同的设备中呈现的大小是一致的,比如逻辑像素为 10x10 的方块,在手机和显示器看上去大小是一样的,这样可以保持阅读体验的一致,同时也方便开发。iPhone X 的逻辑像素是 375x812。

设备像素比(Device Pixel Ratio,DPR)

根据以上两个概念,可以自然地想到,在一个设备中逻辑像素与物理像素的比值是确定的,一个逻辑像素覆盖了多个物理像素,这可以用设备像素比来表示。比如 iPhone X,375x812 的逻辑像素包含了 1125x2436 的物理像素,设备像素比的值就是 3。可以通过下图进一步理解上面三个概念之间的关系。

有了上面的概念,就能简单地解释图片为什么会变模糊。举个例子,分别在普通屏(DRP = 1)和 Retina 屏(DPR = 2)用 CSS 像素为 300x400 的  显示分辨率是 300x400 的图片。

对于普通屏,图像像素和物理像素 1:1,图像不失真。而对于 Retina 屏,图像像素和物理像素 1:4,由于每个图像像素不可分割,物理像素就近取色,从而让图片变得模糊。这种情况需要使用分辨率更高的图片,比如分辨率为 600x800,图像像素和物理像素 1:1,这样就能充分利用 Retina 屏幕的物理像素点,显示出更清晰的图片。

如果在普通屏下也使用分辨率为 600x800 的图片,图像像素和物理像素 4:1,物理像素点只能通过采样,用不足的数量来显示图片。这不仅没有发挥出高清图片的优势,还由于图片的增大而造成了带宽的浪费。

由此可以发现,为了更好地在各种终端设备显示图片,需要考虑设备像素比、图像分辨率、渲染尺寸等因素,如果只是简单地加载图片然后修改样式适应宽度,并不能保证显示效果和加载速度,甚至会大大降低用户的使用体验。因此,需要采用合适的方法对图片进行响应式设计。


媒体查询(media query)

根据前面的分析,图片的响应式设计与渲染尺寸(图片显示大小, 的 CSS 像素)有关,而渲染尺寸通常由设备的视口大小决定,因此就需要一种方法对设备的视口大小进行判断。

CSS 中的媒体查询提供了相关的判断方法,可以根据不同的设备特征应用不同样式。媒体查询支持很多设备特征,由于本章主要介绍响应式图片,实际主要用到其中的视口的宽度和设备方向,如下表所示。

更多关于媒体查询的介绍可以参考 MDN 上的文档《CSS 媒体查询》(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries)

设备特征取值说明
min-width数值,如 600px视口宽度大于 min-width 时判断为真
max-width数值,如 800px视口宽度小于 max-width 时判断为真
orientationportrait | landscape当前设备方向,portrait 垂直,landscape 水平

对于 min-width 和 max-width 的取值,我们称为断点(Breakpoints)。如何选择断点,主要取决于产品设计本身,没有万能媒体查询的代码。但经过实践,我们也总结了一套比较具有代表性的设备断点。

如果要对细分屏幕大小进行适配,可以查看这篇文章,里面列出了详细的常见设备的媒体查询条件,《media queries for common device breakpoints》(https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/)


实现响应式图片

前面说了这么多,终于到大家最为关心的部分了。不过先别急,在动手之前,还有一个问题是需要我们去思考的,那就是在根据设备特征选用不同的图片时,是否需要更改比例、裁剪甚至替换整个图片,或者只是仅仅更改图片的分辨率。前者被称为艺术方向(art direction),后者被称为分辨率切换(resolution switching),下面先介绍分辨率切换。

分辨率切换

分辨率切换主要用于优化低分辨率设备的带宽消耗,通常使用在如下场景:开发者提供图片的多个分辨率版本,大屏和高清屏用户获取高分辨率版本,小屏用户获取低分辨率版本。以下是实现分辨率切换的代码例子:

下面具体介绍这两个属性的用法。

srcset

一般形式:

srcset="[url] [num][descriptor], [url] [num][descriptor], …"

指定了一组可选的源,源之间用逗号分隔,每个源由两部分组成:

  1. 图片的 url

  2. 正整数+宽度描述符 w 或者 正浮点数+像素密度描述符 x,如果该项为空,则默认为 1x

浏览器会通过描述符来选择对应的源,如果使用密度描述符 x,则判断哪一项与设备像素比更接近,例如:

<img srcset="1200x800.jpg 2.5x,             800x600.jpg 2x, 600x400.jpg 1.5x" src="500x400.jpg">

在 DPR = 2 的 iPhone 6 中会加载 800x600 的图片。

对于宽度描述符 w,由于需要与 sizes 属性一起使用,因此会在下面和 sizes 属性一起介绍。

sizes

一般形式:

sizes="[media-query] [size], [media-query] [size], …, [size]"

指定了一组可选的 size,size 之间用逗号分隔,每个 size 由两部分组成:

  1. 媒体查询,但是不能存在于最后一项,因为最后一项用作默认值

  2. 图片的 size(CSS 像素),可用 px、em、vw 等单位

当 srcset 属性使用 w 时,sizes 属性才会起作用,浏览器会根据下面的顺序加载图片。

  1. 浏览器逐项判断 sizes 属性中的媒体查询条件,当为真时取该项的 size 作为图片的大小信息,如果  的 CSS 样式没有指定大小,则会使用 size 作为  的大小

  2. 根据 size 和设备像素比,两者相乘得出图片的分辨率

  3. 从 srcset 的宽度描述符中选出不小于所得分辨率中最接近的一项,没有则选最大的一项,取该项作为图片的源

例如:

<img srcset="1200x800.jpg 1200w, 700x500.jpg 700w, 500x400.jpg 500w, 300x200.jpg 300w" sizes="(max-width: 480px) 350px,  (max-width: 800px) 650px,  1000px" src="500x400.jpg">

在 DPR = 1 和视口宽度 = 440px 的情况下,根据 sizes 属性获得 size 为 350px,计算 350x1 = 350,在 srcset 中不小于 350 又最接近的是 500w,所以会选择加载 500w 对应的 500x400 图片。

以上就是 srcset 和 sizes 的用法,需要注意的是,以下情况是不正确的:

  • 在同一个 srcset 中混合使用了 x 和 w

  • 在同一个 srcset 有重复的描述符,比如有两项都是 2x

另外值得一提的是,当我们使用 srcset 属性时,实际上是向浏览器提供相关信息,让浏览器作出更好的选择,浏览器可能还会根据用户的偏好、网络条件等因素调整选择。而这个特点,就是接着要介绍的  与 +srcset 之间的重要区别之一。

如果对 srcset 和 sizes 还想了解更多,可以访问 MDN 的文档《响应式图片》(https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

艺术方向

艺术方向听上去可能比较让人费解,但如果用例子来解释就会非常简单。考虑如下情况:

我们提到将图片的 max-width 设置为 100%,图片就会在手机屏幕上压缩到视口的宽度,如果这张图片实际上很大,图片中的内容就会看不清,特别是如果图片主要内容集中在中间,如人像,浏览效果会比较差。遇到这样的情况,最好的方式是在不同的屏幕尺寸下采用不同的图片,让主要内容保持在视口中间,如下图。






返回观点列表
本文标签:

相关专题

  • 品牌官网设计
    品牌官网设计

    杭州派迪科技为高端客户提供品牌官网咨询策划,品牌官网设计,品牌官网建设开发服务,以国际化视野和标准为基础,为各行业领军品牌提供高端企业网站定制、策划、设计、互动与制作

    查看详情
  • 大策略营销门户网站
    大策略营销门户网站

    杭州派迪科技有自己的营销型网站CMS系统,适合白帽SEO网站。特别对大策略的营销型门户网站制作有一定的经验,曾经为上海天擎外贸行业网站、浙江兆龙营销型门户、先临三维门户营销网站提供全程的技术支持及SEO优化指导

    查看详情
  • 集团/上市公司网站
    集团/上市公司网站

    杭州派迪科技为杭州本地集团公司提供网页设计、制作、开发服务,为集团公司网站建设提供了响应式、营销型、品牌型、门户型网站建设需求,欢迎广大集团公司客户咨询

    查看详情
  • 外贸网站建设
    外贸网站建设

    杭州派迪科技为高端客户提供外贸网站咨询策划,外贸官网设计,外贸官网建设开发服务,以谷歌搜索引起算法为基础,为各行业外贸公司提供高端企业外贸网站定制、策划、设计、互动与制作

    查看详情
  • 企业网站建设
    企业网站建设

    高端专业、令人印象深刻的用户界面、易于访问——企业网站必须反映一切,因为派迪科技在这里提供帮助,凭借精湛的技术、丰富的经验、与客户的持续沟通以及对每一个细节的关注,我们确保在快速的周期时间内提供优质的服务。

    查看详情
  • 半定制网站
    半定制网站

    杭州派迪科技模板网站建设专题_各行业方案专题栏目提供各行业产品适合的网站建设方案,帮助企业了解派迪科技建站效果等信息,您可以通过本站了解各行业网站建设方案,如需要获取本行业定制网站建设方案,可以联系在线客服或拨打电话咨询

    查看详情

体验从沟通开始,让我们聆听您的需求!

开始您的数字化品牌体验! 15158117070 期待您的来电!

[ 网站建设×品牌官网设计×大策略营销门户×微信小程序开发×微信公众号开发]

派迪业务总监微信号

派迪业务总监微信号

了解最新项目报价

派迪产品经理微信号

派迪产品经理微信号

免费获取项目策划

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》

Cookie 偏好

如果您想详细了解我们如何使用cookie请访问我们的 《隐私政策》

管理cookie偏好

基本 cookies

始终允许

这些 cookies 是网站运行所必需的,不能在我们的系统中关闭。它们通常仅针对您所做的相当于服务请求的操作而设置,例如设置您的隐私首选项、登录或填写表格。您可以将浏览器设置为阻止或提醒您有关这些 cookies 的信息,但网站的某些部分将无法运行。这些 cookies 不存储任何个人身份信息。

性能 cookies

始终允许
这些 cookies 使我们能够计算访问量和流量来源,以便我们可以衡量和改进我们网站的性能。它们帮助我们了解哪些页面受欢迎和不受欢迎,并了解访问者如何在网站上移动。这些 cookies 收集的所有信息都是汇总的,而且是匿名的。如果您不允许这些 cookies,我们将不知道您何时访问了我们的网站,也无法监控其性能。

功能性 cookies

这些 cookies 收集信息用于分析和个性化您的定向广告体验。您可以使用此拨动开关来行使选择不获取个人信息的权利。如果您选择关闭,我们将无法向您提供个性化广告,也不会将您的个人信息交给任何第三方。

定位 Cookies

这些 cookies 可能由我们的广告合作伙伴通过我们的网站设置。这些公司可能会使用它们来建立您的兴趣档案,并在其他网站上向您展示相关广告。它们不直接存储个人信息,而是基于唯一标识您的浏览器和互联网设备。如果您不允许使用这些 cookie,您将体验到较少针对性的广告。

我们正使用 cookies 来改善您的访问体验

派迪科技非常重视您的个人隐私,当您访问我们的网站www.hzpady.com时,请同意使用所有cookies 。

如果您想详细了解我们如何使用cookies请访问我们的 《隐私政策》