注:这篇文章发布于 September 27th, 2011 ,作者是 Jason Grigsby
在我上一篇的博文“什么是移动优先的响应式Web设计 ”中,我提到了一个用来判别一个响应式Web设计是否是“移动优先”的标准,即这个设计是否有处理IMG标签的策略。
最近在国外关于一个Web设计的网站Smashing Magazine上的一篇文章总结了一些响应式Web设计技术 ,其中包括几个处理IMG标签的新的方法。因此,现在非常适宜深入挖掘一下这个问题以及可能的一些解决方法了。
为什么 IMG 标签是响应式 Web 设计的关键
如果你想要你的站点尽可能快地加载,你会想要传送比实际需要更大的文件。很多响应式Web设计给移动设备提供的图像是适合于台式机的,然后再让移动设备去修改图像大小。
在我的研究中,我发现几乎传送到移动设备上的图像几乎需要减掉文件大小的80%才与实际需要相符 。
那么在响应式设计中,IMG元素有什么问题呢?不像CSS图片可以通过媒体查询语句为不同分辨率的屏幕提供不同的源文件,IMGs只有一个单独的源属性。
什么是响应式的图像
响应式的图像是使用HTML的IMG标签传送的图片,这些图片可以根据不同的屏幕大小而改变图片来源。可以有很多技术方法来实现响应式的图像设计。
就我所知,Scott Jehl第一个使用了响应式的图像 这个短语来描述图像来源问题的javascript解决方案。他最近 将响应式的图像定义为一个通用的术语,因此,我希望他不会介意我拓展了他对这个短语的定义,以便来描述在响应式设计中用来解决提供合适大小图像的问题的技术。
响应式的图像问题面临的挑战
有一些挑战是响应式的图像技术所普遍面临的。当我们来看已经提出的各种解决方案的时候,我们需要将这些问题记在脑海中。
最低标准:直接下载移动设备适用图像,无需多余下载
Scott Jehl为响应式图像设计提出了一个最小标准 :
- 直接就下载适用于移动设备的图像
- 升级到大的图像时无需下载两个图像
这两个都是必须要达到的目标。
第一次下载页面的问题
任何一个依赖于客户端脚本来决定应该提供哪一个图像源的解决方案都会遭遇第一次下载页面的问题。当用户第一次访问一个站点的时候,服务器端并不知道应该提供多大的图片。
来自于Bryan Rieger的 Muddling Through the Mobile Web 中的图像, 由 wscullin 摄影, 受 Creative Commons 保护.
如果加入了可以加载合适大小图片的javascript代码,那么第一次下载页面时相关信息就可以通过cookies以及类似技术从用户端获得。在理论上说,对于接下来的请求,服务器端都知道应该在IMG标签中包含什么样的图像大小了。
第一次加载速度是非常重要的。一个用户第一次体验到的速度价格会决定他们对一个产品或者公司的印象。Google、Yahoo以及其他的一些公司都说过很小的速度差异就会对用户使用产品造成很大区别。
竞争条件 (Rendering Race Conditions)
依赖于使用javascript调整图像来源属性的技术需要确保调整发生在图像请求开始之前。
浏览器开发者做了很多工作在来下载尽可能多的资源,这通常来说这是个好事。但是在响应式设计中,javascript代码需要在任何图像请求开始之前就解析出需要多大的图像。
很多早期的工作都是通过使用动态库标签(dynamic base tags)来做的。这在javascript代码是包含在head标签中时是很有效的,但是当使用外部javascript文件时就难以避免要下载两次图像。
几乎每一种客户端技术都需要对不同浏览器处理以及下载资源的命令有非常深刻的理解。或者更实际一点说,任何一种方法都要经过广泛测试。
内容分发网络以及缓存
当你通过同一个url分发相同大小文件时,你会碰到一个由CDN以及其他网络边缘的缓存引起的问题。如果第一个人是在手机上请求一幅图像,那么接下来的请求者就会看到在手机上显示最优的图片,即使他们试用的是台式机。如果想要避免这一点,就需要在策略中考虑CDNs。
未来友好的响应式图像
如果我们相信“将来会有很多我们不曾想象多的互联设备出现”,我们就需要考虑一下解决方案在未来友好 的。除了现在所做的实验之外,我们需要考虑一个可以长期使用的解决方案可能是什么样子的。
比如说,很多早期的响应式图像解决方案考虑了两种图像大小:一个用来提供给台式机,一个用来提供给手机。但是,这两种图像大小能满足正在到来的各种设备吗?
另外,现在的很多解决方案只是解决了这个问题的某一个方面。他们可能通过客户端的改变来改变图像来源,但是,这却给开发者留下了一个问题,即如何去处理图像大小的改变。对于共享库来说,限制范围可以解决这个问题。
但是在我们考虑未来系统要怎样才能成功时,我们需要考虑我们想要从服务器端和客户端想要获得什么。
下面是我认为一个能长期适用的技术需要考虑的一些事情:
- 支持绝对图像大小的改变 ——我们不能预期到屏幕大小是多少。我们需要系统能自动处理图像大小改变,并且能支持特定页面的绝对大小改变
- 手工设计可以覆盖自动的图像大小改变— —不是每一个图像都可以不失去图像含义而改变大小的。有时候对图像进行裁剪比改变它的大小会有更好的效果。自动化的工具需要支持人工覆盖。
- 需要支持高分辨率显示— —当面对iPhone4以及其他一些有高分辨率屏幕的时候我们应该采用什么方案呢?我们要给处于一个低端连接的高分辨率机器提供高像素的图像吗?这是一个开放性的问题。
但是不论我们现在选择如何进行处理,很明确的一点就是屏幕分辨率会不断增加的趋势不会改变。至少,我们已经看到在台式机上会出现更高分辨率。
这意味着我们现在对大图像的定义对将来的设备来说可能太小了。如果记住这一点,可能需要系统能接受最高分辩率的图像——即使现在的设备并没有这样的分辨率——那么当新的有高分辨率的设备出现的时候,现有的技术才会适用。
- 连接速度应该是标准中应该考虑到的 ——如果我们能知道网络连接的情况,我们就能更容易解决图像大小问题了。我们需要一种更简单的方式来获得这个信息。
- IMG 标签可以被替换吗? ——所有的响应式图像解决方案都在试图处理现在的图像标签只有单一来源的问题。对于重新看待这个标签,已经有各种建议,看我们是否能找到一个长期的替换方案。
在Part 2中,我们将会对现有的响应式图像设计方案进行更详细的解析,看看哪一个是最有可能的。
发表评论
-
响应式Web设计资源整理
2012-03-02 22:50 799这篇文章是对以往发表在Smashing Magazine上关于 ... -
投身移动开发必须知道的20件事
2012-03-01 23:42 712移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 787假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 868国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 786Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 896三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 662作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1176从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1243构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1248译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 893如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 943译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 845在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 985很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 880很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 613当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 875译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 642为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 881概览 你可以使用控制台的Javascript方法调试你的w ...
相关推荐
12.4 添加事件——为人造select赋予生命 12.5 让表单绽放光彩 12.6 行为修正 12.6.1 z-index来救急 12.6.2 键盘控制及其他细节 12.6.3 select太大了吗 12.7 最后的细节 12.8 ...
12.4 添加事件——为人造select赋予生命 12.5 让表单绽放光彩 12.6 行为修正 12.6.1 z-index来救急 12.6.2 键盘控制及其他细节 12.6.3 select太大了吗 12.7 最后的细节 12.8 ...
12.4 添加事件——为人造select赋予生命 12.5 让表单绽放光彩 12.6 行为修正 12.6.1 z-index来救急 12.6.2 键盘控制及其他细节 12.6.3 select太大了吗 12.7 最后的细节 12.8 ...
ASP.NET 2.0使用Web Part创建应用程序之二(共二) 体验 .net2.0 的优雅(2) -- ASP.net 主题和皮肤 NET2.0系列介绍(一).NET 2.0 中Web 应用程序主题的切换 ASP.NET 2.0 中Web 应用程序主题的切换 2.0正式版中...