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

问题描述

我对以下图像格式和 html 标签有些混淆。

1. 通过和的下一代图像格式（使用 webp 和 jpeg 图像）
2. 使用 data:image/png;base64,blahblahblah（使用 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">

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

解决方法

我们可以合并它们吗？

是的，您可以在任何可以使用 URL 的地方使用 data: 架构 URL，包括在 srcset 属性中。

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

这取决于。 Base64 编码臃肿并限制缓存但保存 HTTP 请求（使用 HTTP 1.x 时）。

当然，如果您内联了您不使用的图像的替代版本，那么效率会非常低。