响应式图像设计——Part 1
?
注：这篇文章发布于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为响应式图像设计提出了一个最小标准：
这两个都是必须要达到的目标。
第一次下载页面的问题
任何一个依赖于客户端脚本来决定应该提供哪一个图像源的解决方案都会遭遇第一次下载页面的问题。当用户第一次访问一个站点的时候，服务器端并不知道应该提供多大的图片。
?
?
在Part 2中，我们将会对现有的响应式图像设计方案进行更详细的解析，看看哪一个是最有可能的。
?
?原文链接：Responsive IMGs — Part 1
?
译文来源：http://www.webapptrend.com/?WebAppTrend是一个独立的技术博客，关注Web?App前瞻和实践，以及智能浏览器发展?