【翻译】响应式图片的正确做法: <picture> 和 srcset 指南
发布在Web响应式开发之路2015年4月1日view:1543
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

在周一,我们发表了一篇名为 《Picturefill 2.0, a perfect polyfill for responsive images》的文章。今天的文章算是对 Tim Wright 文章的补充,以及正确地解释我们如何使用即将到来的<picture> 元素和 srcset, 并为那些未实现这些特性的浏览器做兼容。 我们没有理由再去等待响应式图片的到来;我们实际上已经可以非常快地得到它们 — Ed.

“到目前为止我所说的东西可以总结为: 设计自适应页面本质上就是设计一个可访问的页面。 并且,可能对于Web来说, 一个伟大而又远未实现的目标,就是信息的可访问性。” – John Allsopp, A Dao of Web Design

在互联网中,图片是最重要的信息片段之一,但在互联网过去25年的历史当中,他们并没有完全变地自适应。他们的所有东西都非常地固定,他们的尺寸,信息和剪裁,像石头一样被固定在单个的src属性中。

当高分辨率的屏幕和响应式布局像一套组合拳一样出现在互联网的时候,HTML 开发者开始真切地感受到了这些限制。网页开发者为了让他的图片在大的布局和高清屏幕下保持清晰,开始为所有人都发送非常大的图片。图片文件的平均尺寸也开始激增;于是那些理智的人开始将响应式设计描述为“慢地让人无法接受”的东西。

图片已经成为了实现真正的自适应和高性能的响应式的首要障碍 — 根据浏览上下文的约束和支持有效地调整自身进行缩放。

然而这种情况即将改变。

<picture>元素最新的规范是近几年对如何使图片自适应讨论得来的结果。它给予开发者用一种语义化的方式来对一张图片的多种版本组合起来,每一个版本都有它的技术特点使其或多或少地适合于特定用户。在我写下此文的时候,最新的规范已经达成了广泛的共识并被Chrome,Opera和Firefox实现(甚至还会包括IE)。

现在是时候开始学习它们了。

在我们学习这个(崭新耀眼的)标签之前,让我们看看让图片在不同环境中自适应的相关方法。

  • 我们的图片需要能够在不同的device-pixel-ratios(设备像素比)中清晰地渲染。我们希望在高分辨率的屏幕时会加载得高分辨率的图片,但我们不希望将这种图片发送给那些无法看到该图片中所有额外像素的用户。我们称这个为“设备像素比”的使用情景。

  • 如果布局是弹性的(例如:响应式),那么我们的图片需要收缩或者拉伸来适应它。我们称之为“弹性图片”的使用情景。

  • 上面这两个用例是非常相关的:要解决它们,我们要让图片能够在多种分辨率下高校地缩放。我们会通过“可变尺寸的图片”来解决这两个问题,它们也可以称为“可变尺寸的图片”的使用情景。

  • 某些时候我们并不想让图片通过简单的缩放来变得自适应。我们会希望可以剪裁这张图片或者甚至是改变它的内容。我们称这个为“艺术方向”的使用情景。

  • 最后,不同的浏览器支持不同的图片格式。我们可能会希望向可以渲染WebP图片的浏览器发送WebP格式的图片,并在不支持它的浏览器中渲染传统的jpeg图片来作兼容。我们称这个为“类型选择”使用情景。

最新规范下的<picture>元素包含的特性为上面所有的案例都提供了支持。我们逐个来看一下。

设备像素比的用例

http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/

评论
发表评论
暂无评论
PUBLISHED IN
Web响应式开发之路

响应式设计应该是未来web应用和站点的特性之一…

友情链接 大搜车前端团队博客
我的收藏