创建良好web体验:4个优化移动Web产品的建议(2)
媒体（Media）
响应式Web设计另外一个方法是使用弹性图片（flexible images）和视频。当被设置为填充他们容器大小的格式的时候，弹性图像能够根据浏览器视图中的可用空白区来动态调整自己的大小。
在较大的浏览器视图中，弹性图片可以通过显示自身的原始大小来填充更多的空白区域。在较小的浏览器视图中，相同的图片可以缩放自身大小从而占用较少的空白区域。为了实现这样的效果，浏览器需要一些较大的图片，这些图片不管是在放大或者缩小的时候看起来都要有不错的效果。
现在的问题是，图像越大，文件的大小就越大。虽然并不是所有的Web浏览器都以他们的原始大小来显示图像，但浏览器需要下载整个图片文件，这样会很快导致低性能，除非这样做：
- 结合使用CSS Media Queries ，背景图片不显示，以及不要加载仅仅为较大浏览器视图准备的大图等方法。这种方法对于指定图片标签（image tags）的那些图片是无效的，仅仅对使用CSS图片背景的那些图片有效果，这样就限制了此方法的适用性。
- 你可以使用像响应式图片（Responsive Images）这样的解决方案，这种方法依赖Javascript语言来将HTML标记的小图片根据浏览器视图大小的增加替换成较大的图片。禁用Javascript和cookie功能的浏览器只能够显示相应的小图片。
- 尝试类似noscript tag这样的方法，来阻止不必要的图片加载。
- 使用服务器端的解决方案来检测访问你的站点的设备，并且只传递一些必要的东西。
隐藏在这些解决方案下面的相同理念是，使用media queries，背景图片，JavaScript或者服务器端的解决方案等方法来仅向设备呈现必要的东西。这种方法可以显著地减少文件传输大小并且提高网站性能。
举个例子来讲， Bagcheck的移动优化模板为每个列表上的项目提供50×50像素大小的压缩图片（平均大小为3KB），而Bagcheck桌面优化模板则为相应的列表项目提供200×125像素大小的图片（平均大小为15KB）。拥有20个表项也就是300KB大小的差异外加少于20个http请求的页面对于网站性能有非常大的影响。我们拥有独立的移动模板，所以就只需要在移动设备上显示列表的前10个表项，这样就可以另外减少30KB的负载。
桌面设备上一个分类页面总共有360KB大小的图片，而相应地页面在移动设备上只有30KB大小，这确实是个非常大的差异。
但是优化图片不仅仅是文件大小的优化，你也可以为小屏幕设备精心设计一些显示图片，而不是通过缩放来适应屏幕的大小。当图片中的内容很重要的话，这样子做就显得尤其重要。
同样的系统可以用来优化视频显示。在所有设备上，我们希望通过简单的单击操作就能够完成视频回放。所以我们的桌面模板将视频文件直接嵌入到页面中，而移动模板仅仅显示一个缩略图，两者都只需要通过简单的单击操作就可以开始播放视频。在移动设备上面使用缩略图可以使得视频加载速度更快，并且能够更好地控制页面布局/像素尺寸。
