商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 网站设计 >

腾讯干货!响应式图像终于有超赞的解决方案了

发表日期:2018-04-01 18:46聚圣源浏览次数: 本文关键词:腾讯干货,响应式问题社区组

 

  JACE:自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在众多设备宽度下,使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像?你愿意在你的手机上加载一个巨大的(虽然更漂亮的)图像?这个问题令人左右为难。

  一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题,他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我们的网站,所以我们需要浏览器自身根据情况选择最好的图像。新规范将解决以下问题:

  基于设备象素比(device-pixel-radio)选择

  基于viewport选择

  基于Art direction(美术设计)选择

  基于图像格式选择

  该规范中,img元素增加了两个新属性:srcset和sizes。srcset用来声明一组图像源,浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度,描述符w表示图像的宽度;浏览器使用这些信息从列表中选择合适的图像。sizes属性为浏览器提供将要显示图像的尺寸信息,srcset使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像,我将在后面详细讨论。

  我们现在可以根据用户的viewport,提供不同质量或美术设计(art direction)的图像,无需借助复杂的服务器端设置。响应式图像将成为HTML规范的重要组成部分,所有浏览器终将都会支持此解决方案

  固定宽度图像:基于设备像素比选择

  视网膜屏幕的广泛应用,使我们不仅需要考虑屏幕分辨率,而且也需要考虑像素密度。视网膜屏幕,4K显示器,UltraHD-它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。

  有些图片不管屏幕尺寸,始终以固定宽度显示-如站点logo或人物简介图像,也就是说需要根据设备像素比来选择。浏览器将根据设备像素比来选择加载哪张图像。

  srcset属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境,利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。

  腾讯干货!响应式图像终于有超赞的解决方案了

  

腾讯干货!响应式图像终于有超赞的解决方案了

 

  网站logo就是固定宽度图像的一个例子,不管viewport的宽度如何,始终保持相同的宽度。不过,与内容相关的图片,通常也需要响应式,它们的大小往往随viewport改变。对于这类图像,还有更好的处理方法。

  可变宽度的图像:基于viewport选择

  对于可变宽度的图像,我们使用srcset搭配w描述符以及sizes属性 。w描述符告诉浏览器列表中的每个图象的宽度。sizes属性是一个包含两个值的,由逗号分隔的列表。根据最新规范,如果srcset中任何图像使用了w描述符,那么必须要设置sizes属性。

  sizes属性有两个值:第一个是媒体条件;第二个是源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。需要注意是,源图尺寸值不能使用百分比,vw是唯一可用的CSS单位。

  腾讯干货!响应式图像终于有超赞的解决方案了

  sizes="(max-: 400px) 100vw,

  (max-: 960px) 75vw,

  640px"

  src="uswnt-640.jpg" border="0" ="363" src="http://www.jushengyuan.com.cn/uploads/allimg/c170620/14a920F3RP-130bS.jpg" ="640" />

 

  上例中,我们告诉浏览器在viewport宽度小于400像素时,使图像的宽度与viewport等宽。在viewport宽度小于960像素时,使图像的宽度为viewport宽度的75%。当viewport大于960像素时,使图像的宽度为640像素。如果你不熟悉vw ,可以看看Tim Severien的大文viewport单位详解 。

  浏览器利用srcset和sizes信息来选择最符合规定条件的图像。如果浏览器的viewport是600像素,图像最可能以75vw的宽度显示。浏览器将尝试加载第一张大于450像素(600*0.75)的图像,也就是uswnt-480.jpg。如果我的是dpr为2的Retina显示屏,那么浏览器就会尝试加载第一张大于900像素(600*0.75*2)的图像,也就是uswnt-960.jpg。我们无法确定究竟显示哪张图像,因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。(译者注:srcset和size列表是对浏览器的一个建议(hint),而非指令。例如,设备像素比(dpr)为1.5的设备,亦可用1x也可用2x的图像,由浏览器根据其能力、网络等因素来决定。)

  前两个例子都是以不同质量显示相同的图像,仅用srcset属性就足够了。不必担心老旧浏览器,老旧浏览器会把它看作为一个普通的图像并从src中加载。如果你想在不同宽度下显示稍微不同的图像,比如在较窄屏幕下仅显示图像的关键部分,那么要使用picture元素。

  picture:基于Art direction(美术设计)选择

  picture元素就像是图像和其源的容器。浏览器仍然需要img元素,用来表明需要加载图片,如果没有img,那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。基于美术设计选择的适用场景为:在一个特定的转效点(breakpoint)需要显示一个特定的图像。使用picture元素选择图像,不会有歧义。

  

  

  

  腾讯干货!响应式图像终于有超赞的解决方案了

  

  

腾讯干货!响应式图像终于有超赞的解决方案了

 

  在本例中,当viewport大于960像素时,会加载图像的风景模式版本(ticker-tape-large.jpg)。当viewport宽度大于575像素时,浏览器会加载图像的裁剪过的肖像模式版本(ticker-tape-medium.jpg)。而当宽度小于575像素时,加载的图像( ticker-tape-small.jpg)已经被裁剪成焦点仅在一个球员上了。

  picture元素是向后兼容的;不支持picture元素的浏览器将显示img。图像的所有标准属性(如alt),应该作用在img上而不是picture上。

  source:基于图片格式选择

  最近几年出现了一些新的图片格式,这些新图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错,但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错,但只有Chrome和Opera原声支持。JPEG-XR,最初被称为高清照片,是微软发布的一个专有图像格式,仅Internet Explorer支持。如果你想了解更多信息,可以查看Zoltan Hawryluk对这些新格式的深入研究。

  

  

  

  

  腾讯干货!响应式图像终于有超赞的解决方案了

  

  source的type属性用来指定每个图像的MIME类型,浏览器会选择第一个含有其支持的MIME类型的源。源的顺序是至关重要的,如果浏览器无法识别所有的图象类型,它会回退至原来的img元素。

  现在可以使用这些东东吗?

  在写这篇文章的时候, Firefox,Chrome和Opera的最新稳定版本均支持picture。Safari和IE本身均不支持picture。srcset的情况稍微好一点,Firefox、Chrome和Opera的最新稳定版本完全支持,Safari8和Internet Explorer Edge部分支持,可以使用x描述符用于根据分辨率切换,但不支持w描述符。Safari9已经完全支持srcset了(译者注)。

  现有不少polyfills解决支持性问题,最知名的恐怕是Scott Jehl的picturefill。目前我(原作者)在我自己的网站上使用Alexander Farkas的respimage。目前的状况是,我们已对响应式图像的处理方案达成一致,并且这些解决方案逐渐被所有的主流浏览器实现。尽管该规范仍在不断完善之中,但原生的响应式解决方案离我们越来越近了。

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/wzsj/5208.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5385

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:649

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:646

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:632

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:626

相关文章

腾讯干货!设计师该怎样从3个方...

@C7210 :因为最近一段时间的更新都集中在了VR方面,所以逐渐也有些朋友在这边或是微博留言问起究竟应该怎样去学习VR设计。我很想尽自己所能的给到一个什么标准答案,可惜做不到。如今,...

日期:2017-06-30 浏览次数:9

腾讯干货 从四个方面帮你做好移...

随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状: 移动页面布局越来越复杂,效...

日期:2017-06-30 浏览次数:3

随机推荐

众多新闻客户端 评论交互哪家强...

学会这5个PS小技巧,让工作效率...

超全面!腾讯设计师做了100个弹...

为真实的需求而设计...

超全面!可能是最详细的垂直电...

电商Banner图颜色搭配设计的秘籍...