是否可以使用带有网址源和低分辨率Base-64 encoded版本的HTML img
代码?
我的用例是a push message发送到应用程序,可能是互联网连接不佳。推送消息包含需要在应用webview内的移动设备上显示的HTML文本。
推送消息的有效负载大小限制为4k。元数据和HTML需要大约1.5k,所以我有大约2.k免费。
如果我可以发送图片的缩小版本,我可以将图片大小缩小到2.5k并将其作为内嵌src
发送:
当拉伸到傻瓜大小时,这似乎是一个非常好的占位符:
然后,用户可以在加载完整图像之前等待几秒钟:
是否有标准的方式来发送HTML图像的内联低分辨率,并在连接允许的情况下发送要加载的高分辨率版本的链接?
答案 0 :(得分:2)
我有一个部分解决方案(在浏览器中工作,但在电子邮件客户端不太好)。我将base64版本设置为div的背景,在div中我将链接放入高分辨率文件。如果文件不可用,我还会添加一些内联代码来隐藏损坏的图像。
<div width="500" height="375" style="width: 500px; height: 375px; background-size: 100% 100%; background-repeat: no-repeat; background-image: url('data:image/jpeg;base64,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');">
<img width="500" height="375" style="width: 500px; height: 375px;" src="http://i.stack.imgur.com/VRBmC.jpg" onerror="this.style.display='none'; this.onerror = null;">
</div>
但是,电子邮件客户端支持非常有限。其中许多都剥离了base64图像,因此如果链接的图像没有加载,则不会出现后备图像。您可以找到更多HERE。 Javascript支持更糟糕(我读过Outlook&amp; OE可能会支持它),所以破碎的图像显示在后备图片之前。
我只在Gmail(没有后备图片)和Thunderbird(没有javascript)上进行了测试,但您可能会有更好的运气。
或者,你可以使用javascript加载图片,只有它可用,所以不会有破碎的图像,但是由于我们拥有的js支持很差,高分辨率图片很少加载。
我真的很想看到一个完全有效的解决方案,或者是对我的改进。
答案 1 :(得分:1)
有一个很好的例子,使用jquery或纯javascript来加载2张照片,(并行加载)可能会对你有所帮助,不确定:|
看一看here。 他们不使用特殊的html标签来做它...只有javascript。 希望它有所帮助。