此站仍在开发当中!
举报问题 或者 查看代码.

图片、音频、视频

图片

一幅图片胜过1000个单词,每个页面里图片都是一个主要部分。但它们也是需要加载的主要部分。响应式网络设计不仅能让我们的布局基于设备特性,也能够基于图片产生变化。

响应式图片

响应式的网络设计不仅仅意味着我们的布局能够基于设备特性产生变化,网页内容也要随之改变。举例来讲,在高分辨率(2x)显示下,高分辨率的图表需要保证清晰度。在浏览器宽度为800像素时,一张宽度设置为50%图片展示效果可能只是马马虎虎,但在宽度较窄的手机上它会占据太多空间,并在适应更小尺寸屏幕时依然会占据同样大的带宽。

艺术指导

Art direction example

在另一些情况下图片可能需要大幅度的变化:改变比例、裁剪甚至整张替换。在这些情况下,改变图片通常涉及到艺术指导。参阅responsiveimages.org/demos/查看更多示例。

关键技术简介

  • 根据设备屏幕大小,分辨率以及页面布局决定使用最佳的展示图片。
  • 通过media queries查询min-resolution以及-webkit-min-device-pixel-ratio使用恰当的CSS样式为高分辨率设备改变背景图片
  • 使用srcset为普通分辨率下的1x标注图片提供高分辨率的资源。
  • 当使用Javascript图片替换技术,或者使用高压缩的高分辨率图片来适应低分辨率设备时,要考虑设备上展示图片的质量损耗。

CSS中的图片

为元素使用复杂的图片时,CSS样式中的background属性十分强大,能让图片重复甚至更多。当该属性与media queries联合使用时,能基于屏幕分辨率、展示区大小或者其他为设备加载最合适的图片。

使用media queries(设备查询)来加载条件响应的图片或者艺术指导。

Media queries(设备查询)不仅仅影响页面布局,也用来根据视窗宽度对应加载图片,或者提供艺术指导。

用以下的示例进行说明, 在较小的屏幕上,只有 small.png会被加载放入到 div元素中, 在较大的屏幕上时, background-image: url(body.png)会被加载到body元素上并且background-image: url(large.png)被加载到内容div元素中。

    .example {
	  height: 400px;
	  background-image: url(small.png);
	  background-repeat: no-repeat;
	  background-size: contain;
	  background-position-x: center;
	}

	@media (min-width: 500px) {
	  body {
		background-image: url(body.png);
	  }
	  .example {
		background-image: url(large.png);
	  }
	}
	

查看完整示例

使用image-set 提供高分辨率图片

在CSS样式中使用image-set()提高background属性的表现能力, 让不同的设备特性选择不同的图片变得更加容易。这允许浏览器根据设备特性选择最佳图片,例如在2x的展示区使用2x的图片,或者在一个带宽受限的2x的设备上使用1x的图片。

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

加载合适的图片后,浏览器将图片进行相应的缩放。换句话说,浏览器假定2x的图片有两倍的1x的图片尺寸,并将2x的图片以2作为基数进行等比例缩小,这样图片就能在页面上等大呈现。

浏览器对image-set()的支持仍处于发展中,现在只有以 -webkit作为渲染内核的Chrome浏览器和Safari浏览器对该属性进行支持。 我们必须考虑当浏览器无法支持image-set() 属性时我们应该有备用的图片,举例说明:

    .sample {
	  width: 128px;
	  height: 128px;
	  background-image: url(icon1x.png);
	  background-image: -webkit-image-set(
		url(icon1x.png) 1x,
		url(icon2x.png) 2x
	  );
	  background-image: image-set(
		url(icon1x.png) 1x,
		url(icon2x.png) 2x
	  );
	}
	

查看完整示例

以上将合适的资源加载到支持image-set的浏览器,否则以1x的大小进行内容加载。重点提示当浏览器对image-set()的支持比较低时,大多数的浏览器都将会加载1x的资源。

使用media queries提供高分辨率图片或者艺术指导

多媒体查询将基于设备像素比进行规则定义, 使将不同尺寸的图片进行1x或者2x展示变得更加容易。

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* High dpi styles & resources here */
}

Chrome, Firefox以及Opera都支持 (min-resolution: 2dppx)标准, 但Safari以及Android 浏览器需要提供不带dppx前缀的旧式语法的代理。请记住这些样式只有当设备符合多媒体查询条件时才会得以展示,你必须写好基本样式。这样也能够保证当浏览器不支持多媒体查询分辨率特性时,一些内容仍然可以被渲染展示。

    .sample {
	  width: 128px;
	  height: 128px;
	  background-image: url(icon1x.png);
	}

	@media (min-resolution: 2dppx), /* Standard syntax */
	(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
	{
	  .sample {
		background-size: contain;
		background-image: url(icon2x.png);
	  }
	}
	

查看完整示例

你也可以根据展示区大小使用min-width来进行不同大小的图片。这项技术的好处在于,当多媒体查询不符合时图片不会被加载。举例来讲,只有在浏览器宽度在500像素以上时,图片文件bg.png才会被加载到body元素上。

@media (min-width: 500px) {
  body {
	background-image: url(bg.png);
  }
}

标识中的图片

img元素是很强大的——被下载,解码然后渲染展示到内容区域——现代的浏览器支持一系列的图片格式。包括跨设备表现出与桌面展示一致的效果,这些仅仅需要一些细微的调整就能保证好的用户体验。

请记住当指明图片宽度时,为防止图片超出展示区,应使用相关联的单元。比如,width: 50%;,将会使图片宽度达到容器元素(并非展示区或者实际像素大小)的50%大小。

由于CSS样式允许元素内容溢出该元素的容器,因此我们可能需要使用max-width:100%来防止图片或者其他内容溢出。举例来讲:

img, embed, object, video {
  max-width: 100%;
}

使用img元素的alt属性提供有意义的描述;这些描述能够让你的网站在屏幕阅读器以及其他辅助技术里被更好地理解。

使用srcset在高分辨率的设备上加大 img元素的宽度

srcset属性能够增强img元素的表现效果, 让根据不同设备特性提供不同图片这一过程变得更加容易。同样,image-set 也行之有效, srcset允许浏览器根据设备特性选择最佳图片,比如在2x的展示区使用2x的图片,在带宽受限的2x展示区使用1x的图片。

<img src="photo.png" srcset="photo@2x.png 2x" ... />

在不支持srcset的浏览器上,浏览器只会使用src 属性中指定的默认图片。 这就是为什么任何时候,不管性能如何,在任何设备上我们都要保证1x的图片都可以进行展示这一做法的重要性。当srcset能够被支持时,以逗号分隔的图片选择条件可以被解析,让最合适的图片得以加载展示。

从像素密度到展示区宽度等种种,选择条件众多,但现在的只有像素密度被很好地支持。为在当前表现以及未来的特性间平衡,我们坚持提供2x的图片。

其他图片技术

图片压缩

图片压缩技术能够将2x的图片进行高质量压缩以适应各种设备,无论设备的实际性能怎样。基于图片类型以及压缩率,图片在变化时质量会发生变化,但图片文件大小会明显减小。

查看示例

注意

  • 使用压缩技术时需注意这会耗费更多的内存,以及为解码付出更多成本。改变大尺寸的图片适应小尺寸的屏幕会付出较大代价,特别是在一些内存小,处理器受限的小屏幕设备上。

JavaScript脚本图片替换技术

Javascript脚本图片替换技术会检测设备的性能然后“做一些恰当的事情”。你可以通过 window.devicePixelRatio来判断设备的像素尺寸、宽高值,通过navigator.connection试探一些能用的网络连接,或者模拟一个请求。当这些信息被收集完毕后,你就能决定加载哪张图片了。

使用Javascript这种处理方式有一个大的缺点就是这意味着在解析器完成解析之前,图片会延迟加载。在页面加载完所有事件之前图片资源不会开始下载。并且,浏览器一般情况下会将1x和2x的图片资源都进行下载,这样导致页面变得臃肿。

完全避免图片

有些时候,最佳的图形展示可能压根就不是一张图片。只要有可能,我们建议使用本地浏览器来实现相近的功能或效果。浏览器可以预先加载图片然后进行图形渲染。这表示浏览器不再需要进行单独的图片资源下载并过滤变形的图片。我们可以使用字符编码或者字体图标表现图标。

关键技术简介

  • 任何时候尽可能避免使用图片,用浏览器的功能进行代替,在使用图片的地方用字符编码进行替换,使用字体图标替换较复杂的图标。

在标识中放置文字,取代嵌入图片

网页的任何地方如果是文字,就使用文字而不是嵌入图片,例如在标题中使用图片,将电话号码或者地址之类的联系信息直接放在图片里。这些可以防止他人对这些信息进行复制粘贴加以利用,让信息不会被屏幕阅读器读取,不会响应式变化。作为替换,你可以在你的标记里使用文字,必要时使用网络字体实现你需要的风格。

使用CSS替换图片

现代浏览器使用CSS特性来创建样式,这将预先需要加载图片。举例来说,复杂的渐变可以运用 background属性来生成,阴影可以运用 box-shadow生成,圆角可以运用border-radius属性加到元素上。

<style type="text/css">
  div#noImage {
	color: white;
	border-radius: 5px;
	box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
	background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
  }
</style>

记住使用这些技术并不需要呈现周期,一种对手机意义非凡的技术。如果用得过了,你会因此损失一些你已取得的效果并妨碍表现性能。

使用字符编码替换简单的图标

许多字体里包含并支持非常多的符号编码,这些可以用来替换图片。不像图片,字符编码能很好地进行缩放,并且不管展示屏多大或多小它们都看起来很不错。

除了普通字符集,字符码也包含了数字符号(⅐)、箭头(←)、数学运算符(√)、几何图形(★)、控制图符(▶)、盲文点字模型(⠏)、音乐符号(♬)、希腊字母(Ω),甚至国际象棋符号(♞)。

这种包含编码字符相同方法已经实现,实体命名为:&#XXXXXXXX 表示字符编码号。举例说明:

你是一个超级&#9733;

你是一个超级巨★

使用图标字体代替复杂图标

为了适应更多复杂的图标需要,图标字体普遍变得轻量级,在单一的HTTP请求中很易用。图标文字相较于图片来说有许多优势:

  • 它们是矢量图形可以被无限缩放。
  • CSS样式控制颜色、阴影、透明度以及简单动画。
  • 一整套的图标可以在一个字体里下载。

Example of a page that uses FontAwesome for it's font icons.


用了不起的字符,你可以编码实体进行图标添加,就像这个HTML5的标志(<span class="awesome">&#xf13b;</span>)
	或通过给元素添加诸如CSS3标志 (<i class="fa fa-css3"></i>)的特殊类&lt;i&gt;
查看完整示例

有成百上千的免费和付费图标字体可用,包括Font Awesome, PictosGlyphicons.

一定要保证平衡额外的HTTP请求和图标文件大小的权重。例如,如果你只是需要少量的图标,你最好使用一张图片或者一个图片的子画面。

优化图片表现

图片通常占了大多数的下载字节,也常占据了大部分的页面视觉空间。因此,优化图片通常可以为你的页面带来最大的字节存储以及性能改进:浏览器下载更少的字节,更少与其他用户间的带宽竞争,以及更快的浏览器加载并显示所有资源。

关键技术简介

  • 不要随便选一种图片格式,了解这些可用的不同格式,然后选择最合适的那种。
  • 在你的工作流中使用图片优化和压缩工具来减小文件大小。
  • 在图像集里放置常用图片减少http请求。
  • 仅仅当图片滚动入页面展示区时考虑加载图片,这样可以加快加载时间并且减少页面负担。

选择正确的格式

有两种类型的图像可以考虑:矢量图以及位图。就位图而言,你也需要选择适当的格式,比如:GIFPNGJPG

位图,就像照片或者其他图片,图像由占据网格的一个个像素点构成。代表性的位图,比如来自照相机或者扫描仪,或者可以在浏览器canvas元素中创建。 图像的尺寸越大,文件大小随之越大。当缩放的比例大于原始尺寸是,位图会因为浏览器需要猜测丢失的像素点儿产生模糊。

矢量图,如标志和艺术线条,都由一系列的曲线、直线、形状以及填补色构成。矢量图项目通常由 Illustrator或者Inkscape创建并且保存为矢量格式比如SVG。 因为矢量图由简单的基本元构成,它们可以被无失真的放大并且不改变文件大小。

当选择合适的格式时,考虑两种图像的原始类型(位图还是矢量图)以及内容(颜色、、动画、文字等)都非常重要。没有哪一种格式能够适用所有的图片类型并且每一种格式都有自己的优缺点。

选择正确的图片格式,从这些指导开始入手

  • 对照片类图片采用JPG格式。
  • 对标志或者线稿这类矢量艺术图以及纯色图形采用SVG格式。如果矢量图格式不支持,尝试一下WebP或者PNG格式。
  • 使用PNG格式而不是GIF格式因为PNG格式允许更多的颜色并提供更好的压缩率。
  • 对于较长的动画,考虑使用 <video>标签以提供更好的图像质量并允许用户控制回放。

减少文件大小

图片文件大小可以考虑当保存完毕使用“后处理”来减小大小。有很多的工具可以用于压缩图片——失真以及不失真的、线上的、用户界面式的、命令行式的。只要有可能,最好采用图片的自动优化,这样它就能成为你工作流中的一等公民。

一些工具能对JPG以及PNG格式的文件进一步无失真地压缩,不影响图片质量。对 JPG格式,使用 jpegtran或者jpegoptim (仅适用于Linux;运行-strip-all选项)。对PNG格式,使用OptiPNG或者PNGOUT

使用image sprites技术

CSS spriting是将一定数量的图片合并放在一张“sprite sheet”图片里的技术。个人可以通过指明偏移量来使用图片中的正确的那部分。

Image sprite sheet used in example

    .sprite-sheet {
	  background-image: url(sprite-sheet.png);
	  width: 40px;
	  height: 25px;
	}

	.google-logo {
	  width: 125px;
	  height: 45px;
	  background-position: -190px -170px;
	}

	.gmail {
	  background-position: -150px -210px;
	}

	.maps {
	  height: 40px;
	  background-position: -120px -165px;
	}
	

查看完整示例

精灵表的优势是在加载多个图片时,可以减少下载请求数,同时允许缓存。

考虑延迟加载

延迟加载可以显著加快长页面的加载,仅当必要或者主要内容完成加载渲染时,才加载页面下方包含的图片部分。除了改进性能,使用延迟加载能够创建无限滚动的用户体验。

创建无限滚动加载的页面时需要小心,因为内容加载后是可见的,搜索引擎或许永远不看内容。除此以外,希望在页脚寻找信息用户可能永远看不到页脚内容,因为一直在被加载新内容。

接下来的课程

除非另有说明,此页面内容经Creative Commons Attribution 3.0 License批准,代码经Apache 2.0 License批准。详细请参阅网站政策.