布莱恩F爱
向一位来自Portlandyobet英雄联盟的谷歌开发专家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
用终极课程学习Angular的正确方法”></a>
          </div>
          <article class=

视网膜和响应HTML5图像

随着视网膜和高清晰度显示器的普及,现在对于web开发人员来说,使用高清晰度图像比以往任何时候都更加重要。有几种方法可以解决这个问题。我将介绍以下几种方法:

  • 到处加载2x的图像,并设置图像的高度和宽度为1x大小
  • 使用一个JavaScript库(或滚动你自己的)来加载2个图像
  • 使用srcset HTML5属性
  • 使用picture HTML5元素

负载2 x无处不在

这可能是最简单的解决方案,但并不适合您的移动和非视网膜用户,因为您将为所有用户加载高清晰度图像。非视网膜用户在宽带连接上可能不会注意到它,然而,你的移动用户或那些较慢的连接可能会等待更长的时间来加载你的页面。

  • 指定使用高清晰度图形的img src
  • 指定图像的高度和宽度为非视网膜大小

例如,非视网膜(或高清晰度,我可能会交换这些术语)图像是100×200像素。因此,使用CSS或HTML中的属性指定图像的高度和宽度为100×200。但是,加载两倍大小的图像,即200×400像素。

你的HTML,这可能看起来像:

<imgsrc=/图片/ foo@2x.png风格= "高度:100 px;宽度:200 px;alt=酒吧/>

使用JavaScript

另一种选择是在页面加载后使用JavaScript加载视网膜图形。有几个库可供您免费使用。我选择使用retinajs图书馆。我也提交了把请求纠正一个错误,当我已经通过srcset属性加载视网膜图形时,库试图加载视网膜图形(我们将在下面的详细讨论)。

简单地说,最常见的方法是循环DOM中的所有图像并尝试加载高清晰度图像。Retinajs在服务器上查找与文件名+匹配的图像@2x附加。在苹果为iOS系统创建了这个命名约定之后,它已经成为了标准。如果图像文件存在于您的服务器上(返回200状态码),那么视网膜图像将取代非视网膜图像。当然,它还必须加强原始图像的尺寸(就像我们之前在加载视网膜图像时所做的那样),这样图像不会出现在屏幕上的大小是原来的两倍。

我首先没有提到的一件事是,在做任何事情之前,JavaScript应该首先检查用户是否在视网膜显示设备上。除非必要,否则我们不会尝试加载视网膜图像。

这种方法很有效,但也有一些缺点:

  • 浏览器仍然首先加载非视网膜图像,这对视网膜用户是不必要的。
  • 视网膜用户可能会首先注意到模糊图像,然后他们被替换为高清晰度视网膜图形。没有真正的“闪光”,但它可以被注意到。
  • 当然,现在必须加载JavaScript库。代码通常很短,但这确实为用户增加了一些额外的加载时间。

最后,一些JavaScript实现进一步确定用户的带宽,并且只有在有足够快的连接时才加载视网膜图像。这对于解决这个问题来说是一个很好的补充,而且可能会受到拥有视网膜屏幕和网速较慢的手机用户的青睐。

HTML5 srcset属性

一个新的srcset属性的< img >元素已经由W3C提出作为HTML5规范的一部分,它已经在一些浏览器中实现了。在浏览器中广泛支持高清晰度图像之前,我在上面提到的前两种方法实际上只是一种hack。它们都是足够的解决方案,但我们可以清楚地看到,主要浏览器都需要实现一种标准方法。输入接下来的两个方法srcset属性,并使用new<图片>标签。

srcset属性使您可以根据浏览器的宽度和设备的像素密度指定要使用的图像源列表。这真的很酷,我很高兴地说谷歌Chrome已经实现了这一点。yobet英雄联盟您可以看到哪些浏览器实现了这个功能caniuse.com/srcset。注意WebKit (Safari的呈现引擎)已经实现了它可能会在Safari 8中发布,并与OS X一起发布。

加载视网膜显示的HTML语法可能像:

<imgsrc=/图片/ foo.pngalt=酒吧srcset=/图片/ foo.png 2 x/>

好又干净。

属性的列表也可以指定srcset属性。使用列表进行srcset允许开发者告诉浏览器有其他大小的图像可用来代替默认的src图像。使用w标志,我们可以告诉浏览器,我们有相同的图像,但宽度不同。宽度类似于使用max-widthCSS属性在媒体查询。例如,我们可以让浏览器使用一个中等和大的图像基于图像在视窗的大小:

<imgsrc=/图片/ foo.pngalt=酒吧srcset=/images/foo- media .png 1024w, /images/foo-large.png 2048w, /images/foo.png 800w/>

把这个和大小属性,则浏览器可以根据视图中所需的图像大小和视图中提供的可用图像大小,选择最适合用户的图像srcset属性。有了大小属性,我们还可以使用媒体查询来根据视窗的宽度来设置相对于视窗的大小。下面是一个在桌面和移动设备上分别以50%和100%的视口宽度显示图像的例子。

<imgsrc=/图片/ foo.pngalt=酒吧srcset=/images/foo.png 1024w, /images/foo.png 800w大小=(最小宽度:1024px) 1024px, 800px/>

srcset属性是为你的视网膜显示用户包括高清晰度图形的好方法。此外,浏览器不会为retina display用户加载标准的低清晰度图像,因此在页面加载权重上没有点击率。并结合srcset大小属性可以在浏览器的视口进一步指定图像的宽度,以便浏览器可以选择最适合的图像显示给用户。

HTML5元素图片

我要讲的最后一个方法是新方法<图片>元素。图片元素将使用与HTML5类似的方法<音频>< >视频元素,允许您指定多个源,并带有返回到默认的非视网膜图像的选项。元素使用srcset大小属性,并封装了各种图像源,浏览器可以根据视口的宽度和设备像素密度进行选择。不幸的是,在写这篇文章的时候,它还没有在任何主要的浏览器中实现:caniuse.com/picture

在下面的示例中,我们将指定两个不同的s表示回退到原图像的图像。第一个源> <使用媒体查询来限制源只能在屏幕分辨率大于1024像素的设备上使用。这源> <也指定各种图像大小,以使用基于视窗的宽度。第二个源> <根据设备的像素密度指定要使用的图像。最后,< img >标记使用默认图像在浏览器中显示。回退< img >在使用时始终需要标记图片元素。前两个属性,则不会在浏览器中显示图像img标签是失踪。的s只是提供信息给浏览器,以便它可以选择最好的图像显示基于视口大小和像素密度的设备。

<图片><媒体=(min-width:1024 px)”srcset=foo-large.jpg1024 w,foo-medium.jpg640 w,foo-small.jpg320 w”大小=50大众”/><srcset=foo@2x.jpg2 x,foo.jpg1 x”/><imgsrc=foo.jpg”alt=酒吧”/>图片>

我希望这篇文章能帮助你更多地了解视网膜和HTML5中的响应图像。高清晰度设备和图像的未来就是现在。没有理由不开始添加视网膜和响应图像到您的网站今天。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。