HTML：发送低分辨率图像版本作为 Base64 后备
HTML: Send low-res image version as a Base64 fallback
是否可以使用 HTML img 标签和 URL 来源以及低分辨率 Base-64 encoded 版本？
我的用例是a push message sent to an application, which might have poor internet connection. The push message contains HTML text that needs to be shown on the mobile device within an app webview。
推送消息的负载大小限制为 4k。元数据和 HTML 大约需要 1.5k，所以我有大约 2.k 空闲。
如果我可以发送图像的缩小版本，我可以将图像大小减小到 2.5k 并将其作为内联发送 src:
当拉伸到傻瓜大小时，这似乎是一个很好的占位符：
然后，用户可以等待几秒钟才能加载完整图像：
是否有一种标准的方法来发送 HTML 图像的内联低分辨率，并发送 link 到要加载的高分辨率版本，如果连接允许吗?
有一个很好的例子，使用jquery或纯javascript加载2张照片，（并行加载）可能对你有帮助，不太确定:|
看看。
他们不使用特殊的 html 标签来做到这一点......只有 javascript。
希望对你有帮助。
我有一个部分解决方案（在浏览器中有效，但在电子邮件客户端中效果不佳）。我将 base64 版本设置为 div 的背景，并在 div 中将 link 放入高分辨率文件。如果文件不可用，我还放置了一些内联代码来隐藏损坏的图像。
<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,/9j/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAtADwDASIAAhEBAxEB/8QAHQAAAgEFAQEAAAAAAAAAAAAABwgGAgMEBQkBCv/EADEQAAIBAwMDAwIEBgMAAAAAAAECAwQFEQYHEgATIQgiMRRBCSMyURUWQmFxgSRSkf/EABsBAAICAwEAAAAAAAAAAAAAAAQFAwYAAQcC/8QALxEAAQMCBQIEBQUBAAAAAAAAAQIDEQQhAAUxQVESYQYTkfAUMnHB8RUWInKh4f/aAAwDAQACEQMRAD8AYqgv0EiKuRHjxxPgD/fx1nrUx9xVZgpb4z9/36A1q2vmrI4Fi15qlnRWAmd1nR1dicgZGCFYIDnkPn5+MPen0s3jeDcA3vT25urdAUYp1p1tdjr5oqUEZ5yEMz8XY/sMDz4x8jjxU0ghIBjv7nEn7YcVcKAPGv8AuGQiggdc90H/AGB1VJbsAlXwB+/S22n0tbkaVsdFT2zdXUVdW8mM1Rc6mVony4KqqqvwI+fuPnkQcEZxEN/dxt39iNVbeWi7bgU9NbNQSVMtTWW3TP8AFq2dVeIGBYliw5jjdpA4UZxk5wQTWfEjC1hE3IJ9L+vucROZG4lElHbjsDrp7jDcpC7ozKjMqfqIGQv+evCxb56H9N6hKTcbbuqumkb/AFcemqKaaipVq6FXqq2aIKZHqPK9s8SrEHzxYHx7V6iewW8evd+dQU9LT6XFJBcqmeKmmkr4IeyqHiO7zIHIsrHCZwMEch56b0uZec2VgEDv98IqilU0QDcnBpMKE5KKSf7dWZKSEN5bh/bl1Fdx7VuBouy0tRBp6W9fXyiOB6KtgqIDksC5ZWJKjGDxU+SAceSMCzT6sqLXA9XYqulqXQNJEzovAnz8ScW+/wBwMfH2z16/VKdJjzEz/YbfncCdpvAjlG8QT5RtE2O89hwedLwYBG8NcadQjSJTQ/VrTVPBkWRDwVT2VMmXcMePADK8SfgdSK37pUFNc5Le0khZJu1IyxMogZCFcvyUBVD8eJOPPIAgKehrr6e92Se5tWtbqikoou5SPUsa3svIfy5YjIvtZV9oiA/U2QfBHW42C0TDd7jYLte5JbstCiKUusglmAV+XelCERtGWbABUkKp93yOuOlxIb6jp6647AhP8oGv5wwVBou+ppqorKpZLP8ATfnP3CHlpRzATuBfYPGf6icYIz5xDt994otMaDprZfaWh/l3U9PJHU3Q18cc1NFGSWU8T3EjfjgHwZD4OQfFP4lvqlXbavs2jJnutDFdqKCS8pTxI0Zp2CS5j4Me65jPEoShyo+B5Kwer+u0hDbEntksunqo/wDJiojaoqeKqiaNU4SMB+a6PkpI/MqxYY4nwySmnaIcbgERMnm17GJ2trviXLKWrr0qY+HLiXOpIhJNwBPTdIJTvJIg74Nus/UFo3U/oc1XBFYqXTukNQV1OtVW2Ax07d9ShSEtEvCN5ZQqsyM4SPKnkc9L/tN6hrnQterPpHU9uoNx7Rd7fbtMWRbnFJbp2nnWPtxSsSzRrnMpPJvACgZIKebq09dt9BJLWrWWvS96ij7JhrpWt9fWAkrLJGWAjbPIAIrD245FiW6E9TLAs5elZ6dcllKyco2AIKspI5Zxj7/+dW/LahpdIQ0Z6twbfSOecUrxDk9ZQV5Yrmy2Uj5VCDyDNxBi0W1x9KPqkueuPSh6aL3dnoNK357XRJUzUNvWSCkgldgJCqqpIWMlnADEkAhutJ6edWWPejZjT+qanV1jp3vVN3gKWiaeJsMUYglsj3Kw4nyuMHHwOSXoh/EJ1zDfLZpvVWsr5ctOW5JZeNVLLVRSxdkqI5ASeQAJQBhxUvy+QCHB2O9YGuRoCD+XdFItjMjtRxPKp7KHBKgiB8jlyOc/JPVVzJDSElNY2OpJgRuItx6HB6EuNkOUDhUFgEzaFTBFydOd7bYhGu90NKab3torNV328yWf6NmKKBHSAy9wFQ6DkxQ44sykKVx9ger3qJ0RVW+WyVmkrmkFLOoqRBNKW4tG36845OfCFY8sxPLHuByItztJU+r/AFQR0IZqagmhgrzTZLxLiJA6AZBHMJ5Oc5YnpgPU7t8L9qyG3R1s9LRaYpIZaWnA5xJJJzVWUE5XiAoxkgqoHjpC4hCfKhWovIke5w2aeUQoxofvi3f9rrf6maml1Ve4dWxzU9D3TS0F4gpqaflGsbzSRSQSFJCE9qc/aDjAJbqM702e2+qFbTbZtQ6khq7CslDTYNLE8YZgyo5elHIDt4UhfhDnzk9Wtt9X3zTWtLHbrjc5LzNM9cfqJFKYVHjVFKksCFyxHn5Y/v1MtVaiqNNbxWW+A/Ui71KtW0spLJLIidiN1Y+5CFlfOP1Z8/v1iX1oQWwgER30Em/O+uGbVdVMlJZfWjpKiIPylYCVEcEgAGNYxzp/EM2Cg0TuZo7S1m1De9QVVxtzShK2aKWaGqecqQiRoqgPHwIHEEkHyehpePS5uzo3Rb1d00JqqK3W5+Ms/wDD5MqhBxyPkqobH9IIz11h9T/pV0lv7oy3XWSlktGp9uoaKKivUDc6qpRqfmqSk4LKuP3yT5yPjrVbI3m5an2yvWqrjXzVlXSUsVtuNO4xDc4RT5QEDBjYdzLMCS7KCcD29GseJiyynykixgjSCTaItpzvrhRmGXOVlSp2pWpSlXkmSdrzvP8AzjCKeiv0Saq3Dr6C/wB6nj0/pxJRUGA1Ia51EOeLFIT5AyPl8f2B8ddDdGq2hbBFRWi5VNRaSWkpGWKB8JniQW4tyIZW8+P8DqKaL1larJvpd9Hx6dpB2apaRLgspScIEXAOF8jJyR/2yRgeARbtthU3IUs1mvBslG9OpNN9KtRhzkluTEHz0qzbMHqlwfEWBuPpr3xukpBTohnXffS2+P/Z');">
<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 图像，因此如果 linked 图像没有加载，则没有后备图像。您可以了解更多 HERE。 Javascript 支持更差（我读到 Outlook 和 OE 可能支持它），所以损坏的图像毕竟显示在后备图片前面。
我只在 Gmail（没有后备图片）和 Thunderbird（没有 javascript）上测试过，但你可能运气更好。
我的解决方案是基于THIS and THIS的答案，也请给他们点赞。
或者，您可以使用 javascript 仅在图像可用时加载图像，这样图像就不会损坏，但是由于我们对 js 的支持很差，因此高分辨率图片很少会出现加载。
我真的很想看到一个完全可用的解决方案，或者比我的解决方案有所改进。
是否可以使用 HTML img 标签和 URL 来源以及低分辨率 Base-64 encoded 版本？
我的用例是a push message sent to an application, which might have poor internet connection. The push message contains HTML text that needs to be shown on the mobile device within an app webview。
推送消息的负载大小限制为 4k。元数据和 HTML 大约需要 1.5k，所以我有大约 2.k 空闲。
如果我可以发送图像的缩小版本，我可以将图像大小减小到 2.5k 并将其作为内联发送 src:
当拉伸到傻瓜大小时，这似乎是一个很好的占位符：
然后，用户可以等待几秒钟才能加载完整图像：
是否有一种标准的方法来发送 HTML 图像的内联低分辨率，并发送 link 到要加载的高分辨率版本，如果连接允许吗?
有一个很好的例子，使用jquery或纯javascript加载2张照片，（并行加载）可能对你有帮助，不太确定:|
看看
我有一个部分解决方案（在浏览器中有效，但在电子邮件客户端中效果不佳）。我将 base64 版本设置为 div 的背景，并在 div 中将 link 放入高分辨率文件。如果文件不可用，我还放置了一些内联代码来隐藏损坏的图像。
<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 图像，因此如果 linked 图像没有加载，则没有后备图像。您可以了解更多 HERE。 Javascript 支持更差（我读到 Outlook 和 OE 可能支持它），所以损坏的图像毕竟显示在后备图片前面。
我只在 Gmail（没有后备图片）和 Thunderbird（没有 javascript）上测试过，但你可能运气更好。
我的解决方案是基于THIS and THIS的答案，也请给他们点赞。
或者，您可以使用 javascript 仅在图像可用时加载图像，这样图像就不会损坏，但是由于我们对 js 的支持很差，因此高分辨率图片很少会出现加载。
我真的很想看到一个完全可用的解决方案，或者比我的解决方案有所改进。