最近有一些关于Fabrice Bellard的BPG图像格式(http://bellard.org/bpg/)的喧哗,它(基于他网站上提供的演示)提供比jpeg,webp和其他一些更好的压缩.图像解码在浏览器中使用JS完成,这意味着它可以立即使用,无需等待浏览器采用.总的来说,这似乎是一个好主意,并且为了更快的下载而交换一些CPU时间通常是可行的权衡.
而该技术在这里使用的换出的图像是,在window.load,遍历document.images,找到任何地方src属性包含".bpg"和替换用帆布结束的URL.
然而,这绝对不是解决问题的唯一方法,我看到这种技术的一些缺点,包括:a)画布与图像没有完全相同的布局规则 - 例如,设置宽度属性就意味着不同的东西在img vs a canvas上,b)似乎至少在Chrome中,对于缩小与画布相比的图像,缩放是如何进行的.
理想情况下,更好的解决方案可满足这些要求
想到的一些相关工具包括data:和blob:urls.
任何人都有使用这种"更好"技术加载BPG的工作代码示例？(Fabrice在他的例子中使用它的方式也不错,当然方法有权衡,但我认为可能有一些更好的广泛使用.)
我可以使用BPG图像作为<div>或<body>背景？background: url('bg.bpg');不起作用.
有一个Javascript解码器允许.bpg图像显示在<img>标签中,但我想用一个作为<body>背景.