如何在html中优化和提供最佳格式的图像

Question

我在以下图像格式和html标记之间有一些混淆。

1. 通过和的下一代图像格式(使用webp和jpeg图像(
2. 使用数据：image/png；base64，等等(使用svg图像(

你能给我推荐最好的方法吗。

使用下一代格式：

<picture>
<source srcset="img/Image.webp" type="image/webp">
<source srcset="img/Image.jpg" type="image/jpeg"> 
<img src="img/Image.jpg" alt="My image">
</picture>

使用数据uri:

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTY0cHgiIGhlaWdodD0iMjYuODMzcHgiIHZpZXdCb3g9IjAgMCAxNjQgMjYuODMzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNjQgMjYuODMzIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiM1ODU4NUIiIGQ9Ik03LjA5OSwxOS4yMDFWNi42aDEuOGgwLjlsMC44OTksMC4xMDFsMC44MDEsMC4xMDFsMC4xOTksMC4xdi02bC0xLTAuMUw4Ljk5OSwwLjcwMWgtOC4ydjI0LjRoOS41aDAuODk5DQoJbDAuNS0wLjEwMnYtNi4xMDJoLTAuMWwtMSwwLjIwMWwtMS4xLDAuMWgtMC42TDcuMDk5LDE5LjIwMUw3LjA5OSwxOS4yMDF6IE02MC44OTgsMi4xdjExbC0xLjUsMi4zaDEuNXY1LjcwMWgtMy44bC0wLjUsMC41DQoJbC0xLDAuODk4bC0xLDAuNzk5bC0xLjEsMC42MDJsLTEuMTAxLDAuNWwtMS4yLDAuMzk4bC0xLjE5OSwwLjMwM2wtMS4yLDAuMTk3bC0xLjMsMC4xMDJoLTEuMmwtMS4yLTAuMTk5bC0xLjMtMC4zMDFsLTEuMy0wLjQNCglsLTEtMC4zOThsLTEtMC43MDFsLTEtMC42OTdsLTAuOS0wLjgwM2wtMC44LTAuODk4bC0wLjctMWwtMC43LTEuMTAybC0wLjYtMS4yOTlsLTAuNC0xLjMwMUwzNS4wOTgsMTVsLTAuMS0xLjI5OVYxMi41bDAuMS0xLjINCglsMC4yLTEuMTk5bDAuMy0xLjIwMWwwLjUtMS4xOThsMC42LTEuMmwwLjctMWwwLjgtMWwwLjktMC45bDEtMC43OTlsMS0wLjcwMWwxLjEtMC42bDEuMzAxLTAuNWwxLjMtMC40bDEuMi0wLjE5OWwxLjE5OS0wLjFoMS4yDQoJbDEuMiwwLjFsMS4yLDAuMzAxbDEuMiwwLjM5OGwxLjE5OSwwLjVsMS4xMDEsMC42MDFsMSwwLjY5OGwwLjg5OSwwLjgwMmwwLjgwMSwwLjhsMC4zLDAuMzk4bC0zLjQsNS4yMDFsLTAuMzk5LTAuNGwtMC40LTAuNA0KCWwtMS0wLjY5OWwtMS4yLTAuNWwtMS4yLTAuNUw0OC41LDcuMzAybC0xLTAuMWwtMSwwLjFsLTEsMC4ybC0xLDAuMzk5bC0wLjgwMSwwLjVMNDMsOC45MDFMNDIuNSw5LjZMNDIsMTAuMzAxbC0wLjMwMSwwLjgwMQ0KCUw0MS41LDExLjkwMWwtMC4xMDEsMC43MDF2MC43OTlsMC4xMDEsMC44MDJsMC4zLDAuODAxbDAuMzk5LDAuODAxbDAuNSwwLjY5OWwwLjYwMSwwLjZsMC43LDAuNWwwLjY5OSwwLjRsMC44MDEsMC4zMDFsMC44OTksMC4xOTkNCglsMC45LDAuMWwwLjg5OS0wLjFsMC44MDEtMC4xOTlsMC44LTAuMzAxbDAuNy0wLjRsMC42OTktMC41bDAuNS0wLjVsMC4yLTAuMTk5TDYwLjg5OCwyLjF6IE0xMS42OTgsNi44OTlMMTIuMjk5LDcuMWwwLjgsMC4zOTkNCglsMC43LDAuNWwwLjYsMC42MDFMMTUsOS4yOTlsMC41LDAuN2wwLjM5OSwwLjhsMC4yLDAuODAxbDAuMSwwLjc5OVYxMy4xbC0wLjEsMC42OThsLTAuMSwwLjgwM0wxNS42OTgsMTUuNGwtMC4zLDAuNzAxbC0wLjYsMC43OTkNCglsLTAuNywwLjcwMWwtMC44LDAuNmwtMC44LDAuNEwxMS42OTcsMTguOVYyNWwwLjYwMS0wLjFsMS4zOTktMC4zMDFsMS4zMDEtMC41bDEuMS0wLjVsMS4xLTAuNjk5bDEtMC44MDFsMC45LTAuODAxbDAuOC0wLjg5OA0KCWwwLjctMS4xMDJsMC40LTAuNnY2LjRoMTMuNXYtNS45aC03di0zLjRoN1Y5Ljk5OWgtN3YtMy42aDdWMC42aC0xMy43djYuNzk5TDIwLjY5Nyw3bC0wLjYtMC44OTlsLTAuNy0xbC0xLTFsLTEtMC45bC0xLTAuNw0KCWwtMS4yLTAuNjAxbC0xLjUtMC41bC0xLjUtMC4zOTlsLTAuNS0wLjEwMXY1Ljk5OUgxMS42OTh6IE04NS45OTgsMjUuMTAxSDkyLjZWMTUuOWg2LjY5OXY5LjIwMWg2LjZWMC43aC02LjZ2OS40SDkyLjZWMC43aC02LjYwMg0KCVYyNS4xMDF6IE03NC4wOTksMjUuMTAxaDYuNVY2LjZoNC43VjAuN0g2OS42OTh2NS45aDQuNXYxOC41MDFINzQuMDk5eiBNNjAuODk4LDIxLjEwMVYxNS40aDEuNXYtNC41MDFsLTEuNSwyLjIwMXYtMTFsMC45LTEuMzk5DQoJaDcuMXYyNC40aC02LjV2LTRINjAuODk4eiBNMTMwLjEsMC4ydjYuNjk5SDEyOS43TDEyOC44LDdsLTAuODAxLDAuMmwtMC44MDIsMC4zOThsLTAuNjk4LDAuNGwtMC42OTksMC42TDEyNS4xOTksOS4ybC0wLjUsMC42OTkNCglsLTAuMzAxLDAuODAxbC0wLjE5OSwwLjhsLTAuMSwwLjg5OVYxMy4ybDAuMSwwLjkwMWwwLjE5OSwwLjc5OWwwLjMwMSwwLjgwMWwwLjE5OSwwLjMwMWwwLjEwMSwwLjE5OWwwLjIsMC4zMDFsMC42MDEsMC42DQoJbDAuNjAxLDAuNWwxLDAuNWwwLjgwMSwwLjI5OWwwLjgsMC4yMDFsMC44OTksMC4xMDJoMC4zMDF2Ni42SDEyOS42bC0xLjE5OS0wLjFsLTEuMTk5LTAuMjAxbC0xLjItMC4zOThsLTEuMTk4LTAuNWwtMS4xMDMtMC42MDINCglsLTEtMC43MDFsLTAuODk3LTAuNzk5bC0wLjQtMC4zMDFsLTAuMjk5LTAuMzAxdjMuNzAxaC0xNHYtMjQuNGg2LjZ2MTguNGg1LjYwMmwtMC4xOTktMC41bC0wLjMwMS0wLjVsLTAuNC0xLjEwMmwtMC4yOTktMS4xOTkNCglsLTAuMjAxLTEuMTk5bC0wLjEtMS4yMDF2LTEuMjk5bDAuMS0xLjMwMWwwLjMwMi0xLjNsMC4zOTktMS4ybDAuNS0xLjFsMC4yOTktMS4xbDAuNjk5LTFsMC44MDEtMWwwLjktMC44OTlsMS0wLjgwMmwxLTAuNjk4DQoJbDEuMS0wLjVsMS4xMDEtMC41bDEuMi0wLjMwMmwxLjE5OS0wLjE5OWwxLjE5OS0wLjFoMC41djAuMUgxMzAuMXogTTEzMC4xLDI1LjR2LTYuNjAyaDAuNWwxLjEwMS0wLjE5N2wwLjgtMC4zMDNsMC44MDEtMC4zOTgNCglMMTM0LDE3LjRsMC42MDQtMC42MDJsMC41LTAuNjk3bDAuNS0xbDAuMjk5LTAuODAzbDAuMjAxLTAuNzk5di0wLjcwMXYtMC44bC0wLjIwMS0wLjhsLTAuMjk5LTAuODAxbC0wLjQtMC44MDFsLTAuNS0wLjY5OQ0KCWwtMC45LTAuNzk5TDEzMy4xMDQsNy43bC0wLjgwMS0wLjM5OUwxMzEuNSw3LjFMMTMwLjYsN0gxMzAuMlYwLjNoMC44bDEuMzAxLDAuMWwxLjE5NywwLjMwMWwxLjE5OSwwLjRsMS4xMDIsMC41bDEuMTAyLDAuNjAxDQoJbDEuMTAyLDAuOGwxLjEsMC44OThsMC44OTgsMWwwLjgwMSwxbDAuNjAyLDEuMTAxbDAuNSwxLjEwMWwwLjMwMSwxbDAuMSwwLjM5OVYwLjg5OWg2LjEwMmw4LjEwMiwxMnYtMTIuMWw2LjcwMSwwLjF2MjQuMjAyaC02DQoJTDE0OC45MDIsMTMuMnYxMS45MDFoLTYuNlYxNi40bC0wLjE5OSwwLjVsLTAuMzk4LDEuMTAybC0wLjYwMiwxLjFsLTAuNzAxLDFsLTAuNzk5LDFMMTM4LjcwNSwyMmwtMSwwLjgwMWwtMSwwLjY5OWwtMS4xMDIsMC42MDINCglsLTEuMjAxLDAuNUwxMzMuMTA0LDI1bC0xLjMwMSwwLjMwMWwtMS4xOTksMC4xSDEzMC4xTDEzMC4xLDI1LjR6Ii8+DQo8L3N2Zz4NCg=="
data-src="img/image.svg" alt="My image">

我们可以将两者合并吗哪个选项最适合快速加载和完全兼容浏览器？我可能会错过任何其他选择。

Answer 1

我们能合并它们吗？

是的，可以在任何可以使用URL的位置使用data:方案URL，包括在srcset属性中。

哪个选项最适合快速加载和完全兼容浏览器？

这取决于情况。Base64编码是臃肿的，限制了缓存，但保存了HTTP请求(当使用HTTP1.x时(

当然，如果你内联了你没有使用的图像的替代版本，那么这是非常低效的。