一张单子分开

菜单
响应图像文章的插图

插图凯文·康奈尔

响应图片

我来这里不是为了埋葬即时消息,请但要赞美它。

文章如下

好,主要是。

历史上,我喜欢即时消息很好。令人耳目一新的简单,表面上:它在其SRC公司属性,呈现该文件的内容,为辅助技术提供了另一种叙述方式。它做得太快了,有效地,无缝连接。在网络的大部分生活中,这就是全部即时消息一直以来,由于多年来浏览器在渲染性能上的竞争,它在这方面不断进步。

但在“可靠”和“顽固”之间有一条细微的界线,我知道即时消息从两边下来。

尽管我承认无意中对冲了我的赌注小的通过对jquery移动项目的贡献——一个最初致力于帮助创建“移动站点”的框架——我总是直接来到响应式Web设计(RWD)阵营。为了我,RWD的吸引力不在于构建一个适合任何视区的布局,尽管我还是觉得很酷。真正吸引人的是找到一种能适应未知情况的技术。RWD感觉并且仍然感觉像是网络优势的逻辑和持续延伸:弹性,灵活性,以及不可预测性。

这就是说,我想提醒大家注意一件事,那就是M-DOT网站(专门的移动版网站,通常在以字母开头的URL中找到其次是一个圆点)确实有过多的响应式设计的网站,回到今天:特别定制的资产。

裁剪资产

在响应式布局中,只是设置一个最大宽度:100%在您的CSS中,确保您的图像始终是的,但这也意味着使用的图像源至少与显示它们的最大尺寸一样大。如果图像的显示宽度从300像素到2000像素不等,同样的2000像素宽的图像在所有的环境下都被用户所接受。一个小用户,低分辨率显示器承受了巨大的带宽成本,高分辨率图像,但最终却没有任何好处。低分辨率显示器上的高分辨率图像与其他低分辨率图像相似;它只是需要花费更多的转移和更长的时间出现。

甚至超越优化,显示或隐藏整个内容块并不少见,根据当前的视区大小,在RWD早期。虽然这种做法变得不那么普遍,因为我们都有负责任工作的习惯,即时消息在跨断点提供不同内容时,我们有一个独特的关注点:我们的标记很可能早在我们的CSS之前就被解析了,所以一个即时消息无法知道它是否将以当前的视区大小显示。即使是即时消息(或其容器)设置为显示:无会触发一个请求,按设计。浪费的带宽更多,没有面向用户的好处。

我们最早的尝试

我很幸运在RWD的历史上扮演了一个很小的角色,曾与Filament Group和Ethan Marcotte合作波士顿环球报网站回到2011年。

是的,无论如何,一个项目重量.这个地球仪网站重新设计让我们有机会证明响应式网站设计不仅是一种可行的开发方法,但是,它可以扩展到超越“对个人博客来说可能很好”的套路之外,它可以为一家大型新闻机构的网站工作。很难想象这个想法需要证明,现在回想起来,但这是一个独立的M点网站被广泛认为是最佳实践的时代。

在工作时地球仪,请我们尝试开发了一种向屏幕更大的设备提供更大图像的方法,从技术在移动方面出错的理念开始:从移动大小和格式的图像开始,然后根据用户的屏幕大小将其换成更大的版本。这种方式,如果有什么问题,我们仍在谨慎行事。一个更小但仍然完美代表的形象。

关键是用javascript获取屏幕宽度,在文件,并及时将这些信息转发到服务器,以推迟对页面下方图像的请求。当时,在身体正在制作;我们用这个脚本设置了一个关于用户视区大小的cookie,和那些一起拿即时消息同一页面上的请求加载。一些服务器端脚本将读取cookie并确定响应中要发送的资产。

效果很好,但在“聪明的黑客”领域中,解析行为并没有在任何规范中明确定义。最后,即使是最聪明的黑客也不会这么做,它坏了。

信不信由你,这是个好消息。

预取或“推测性的准备”—是让浏览器感觉很快的一个重要部分:在我们看到页面之前,浏览器开始请求资产,以便它们在页面出现时接近“就绪”。在那个时候,地球仪的网站已启动,一些主要浏览器对它们处理预取的方式进行了更改。这些更改的一部分意味着在我们有机会应用任何自定义逻辑之前,可能会请求一个图像源。

现在,当浏览器在性能上竞争时,用户在投机准备方面取得了进步,这对业绩是个好消息,将加载时间提高20%.但是这里有一个断开的连接最快的请求是永远不会被提出的。可靠的,可靠的即时消息一心一意的要求SRC公司比以往任何时候都快,但这些请求的内容往往从一开始就效率低下,不管浏览器请求的速度有多快,解析,并让他们拥有比他们需要的更大的资产。伤害是通过电线造成的。

所以我们开始寻找新的黑客。接下来是一个肮脏的故事乔治·毛内标签和动态注入基础标签,属于文档.write评估- 元素,完全停止准备。

对于你们中的一些人,前面几行不需要解释,为此,我向你表示最诚挚的哀悼。对于其他人:知道这是可怕的开发商营火故事的素材(或者,我想,恐怖的篝火故事)。凌乱,很难一直维持黑客攻击,完全依靠无证件,不可靠的浏览器怪癖。

比这更糟的是,尽管如此,是结局吗?没有一个是真的工作.我们总是有妥协的余地,我们会把用户浪费的请求推给一些人,其他人的图像模糊。这是一个我们不能用足够聪明的javascript来解决的问题;即使我们能够,这意味着工作围绕浏览器级别的优化而不是利用它们。我们试图颠覆浏览器的改进,而不是和他们一起工作。没有什么感觉像前进的道路。

我们开始讨论本地解决方案的想法:如果HTML5为我们提供了解决这一问题的方法,那会是什么样子?

本机解决方案

从一个共享文本文件开始,最终演变为W3C社区团体中的第一个也是最大的一个,开发者可以在那里建立共识并提供关于不断发展的规范的反馈。在“响应图像社区小组”的旗帜下,我们很好,冒着破坏戏剧性叙述的风险,我们在邮件列表上争论。

一封这样的电子邮件,来自布鲁斯·劳森,提出了一种标记模式,用于交付与HTML5中现有的富媒体元素(如视频甚至借用标签媒体属性。他叫它照片(二)形象已经被认为是即时消息,请毕竟。

使这个建议与众不同的是它如何利用我们可靠的老朋友即时消息.而不是一个独立的元素,照片作为包装器和内部决策引擎而存在即时消息元素:


       
  
        
  
        ……

       

那个即时消息里面照片这将给我们一个非常强大的回退模式,这将不是那种标准,我们必须等待浏览器支持在我们可以使用它之前赶上。不理解的浏览器照片和它的来源元素将忽略它并仍然呈现内部即时消息.浏览器:理解照片可以使用附加到的条件来源告诉内在的元素即时消息要请求哪个源文件。

最重要的是,尽管如此,这意味着我们不必重新创造即时消息一个全新的元素:因为照片没有呈现任何东西,我们仍将依赖于它的性能和可访问性特性即时消息.

这对我们很有意义,所以我们把它带到了网络超文本应用技术工作组(whatwg)。负责正在进行的HTML开发的两个组之一。

如果你在这个行业干了几年,故事的这一部分听起来可能有点耳熟。你们中的一些人可能听到了“whatwg”之间的争吵声。SRCSET公司以及照片网络标准叛乱分子和他们的帅小伙所提出的元素,有魅力的,一把永远卑微的椅子。你们中的一些人读到了各种各样的武装号召,或者在我们募集资金聘请YoavWeiss全职从事本地实施工作时捐赠。你们有些人有RICG T恤,我不介意说无线电.

需要大量的灰尘来沉淀,当它最终成功的时候,我们发现自己有不止一个新的元素;边缘案例始于用例,我们发现照片单独一个不足以满足我们日益复杂的响应式布局的所有图像需求。我们对即时消息元素:处理高分辨率显示器的本机选项,布局中的图像大小,有了交替的图像格式,我们就再也做不到了,在此之前。

14读者评论

加载注释