登录 / 注册
IT168技术开发频道
IT168首页 > 技术开发 > 技术开发评论 > 正文

响应式设计如何让图片自适应?宽度100%?

2017-09-17 19:51    it168网站原创  作者: 钰莹 编辑: 赵钰莹

  【IT168 评论】Ethan Marcotte曾经在A List Apart上发表过一篇名为“Responsive Web Design”的文章,他当时就提出了响应式架构的概念(不少混迹技术圈的肯定看过这篇文章,这里就不再赘述了)。随着终端设备的日益丰富,无法针对设备类型、尺寸或浏览器进行自适应调整的图像会严重减慢网站的访问速度,最终导致用户流失。

  谈到图片自适应,很多前端开发人员会不假思索的来一句“宽度100%”,但是在宽度自适应的同时如何保证图像不失真呢?近日,关于该问题一位网友的回答引起了大家的激烈争论,我们先来看看这位网友是如何解决该问题的:

响应式设计如何让图片自适应?宽度100%?

  没错,就是这么一行简短的代码!部分前端开发者认为这行代码既简洁又高效,很好地解决了图片自适应问题,但有部分前端开发者认为这种方法无法解决分辨率问题,无法保证图片不失真,这个问题到底应该如何解决呢?

  一个图像版本显然是不够的,为了确保各个屏幕尺寸之间的平滑过渡,设计师必须以不变应万变。也就是说,必须采取静态的方式使图像适应性更强。对于灵活的布局大小和屏幕密度的多样性都有相同的解决方案:提供可变分辨率的图像。图片分为背景图片和通过img标签引入的图片,我们是应该使用高分辨率图像来利用高分辨率硬件,还是使用小图像以便在低分辨环境中快速加载?

  通过提供同一图像的不同版本(大小和分辨率),可以向需要的网站访问者发送高分辨率版本,为不具有此功能的网站提供较低分辨率的版本。要了解需要多少不同版本,可以采取以下步骤:

  建立尺寸和分辨率范围的极限,并记录各种尺寸和分辨率。

  使用新的响应式图像标记来标记备用版本,以便浏览器可以加载最适合用户屏幕分辨率和窗口大小的版本。

  具体到代码级,前端开发应该怎么做呢?

  某知识平台中标签为“JavaScript开发者”的网友的回答赢得了不少人的赞同:

响应式设计如何让图片自适应?宽度100%?

  面对格式问题,我们可以尽量让浏览器替我们决定。过去,实际上只有四种图像格式具备通用接受性:GIF,JPEG,PNG或SVG。然而,今天的响应式,太多可变格式的图像允许开发者使用新的技术,以便可以在支持的浏览器中使用其他更新更好的格式,在不支持的浏览器中继续使用旧格式。

  当然,也有网友提到了一种未来可能被大量普及,但目前已经被应用有效果的解决方案,同时该解决方案也是开源的:

响应式设计如何让图片自适应?宽度100%?

  如果对这部分很感兴趣,不妨读一下《Head First Mobile Web》一书,这本书中提到过一个叫http://Sencha.io Src的第三方服务,把img的src属性设置为http://scr.sencha.io/http://xxxx(图像域和路径),http://Sencha.io Src会根据设备分辨率压缩原图创建一个适合的图像提供给访问设备。

  http://Sencha.io是国外服务,前端开发者可以尝试在国内是否可用并且效果如何。当然,如果国内有类似服务也可以尝试使用。响应式图像很无聊,但是它使开发者能够设计出当今消费者所需要的沉浸式体验,而不会牺牲图片质量或页面加载速度,现代Web开发需要这些响应式图像。

  综述

  网站加载时间延迟一秒就可能会导致网站转化率下降7%,创建响应式Web环境是棘手的,它需要微妙的平衡。但是,在不同屏幕尺寸和设备功能的世界中,建立这种图片自适应是必要的。总结下来基本是两种方法:如果不在乎分辨率,开发者可以沿用宽度100%的方法,这种方法是最简便的;如果需要考虑分辨率,就需要查询清楚不同设备的分辨率,然后采用第三方服务或在代码层自主进行设置。

标签: 程序员 , web开发
相关文章
  • IT168企业级IT168企业级
  • IT168文库IT168文库

扫码送文库金币

编辑推荐
系统架构师大会
系统架构师大会
点击或扫描关注
IT168企业级微信关注送礼
IT168企业级微信关注送礼
扫描关注
首页 评论 返回顶部