如何在 html 中以最佳格式优化和提供图像？
How to optimize and serve images in the best format in html?
我对以下图像格式和 html 标签有些困惑。
- 通过 and 的下一代图像格式（使用 webp 和 jpeg 图像）
- 使用数据：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">
我们可以合并它们吗？
哪个选项最适合快速加载和完全浏览器兼容性？
我可能会错过任何其他选项。
Can we merge both of them?
是的，您可以在任何可以使用 URL 的地方使用 data: 方案 URL，包括 srcset 属性。
Which option is best for fast loading and full browser compatibility?
视情况而定。 Base64 编码 臃肿 并限制缓存但保存 HTTP 请求（使用 HTTP 时 1.x）。
当然，如果您内联您不使用的图像的替代版本，那将是非常低效的。
我对以下图像格式和 html 标签有些困惑。
- 通过 and 的下一代图像格式（使用 webp 和 jpeg 图像）
- 使用数据：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">
我们可以合并它们吗？ 哪个选项最适合快速加载和完全浏览器兼容性？ 我可能会错过任何其他选项。
Can we merge both of them?
是的，您可以在任何可以使用 URL 的地方使用 data: 方案 URL，包括 srcset 属性。
Which option is best for fast loading and full browser compatibility?
视情况而定。 Base64 编码 臃肿 并限制缓存但保存 HTTP 请求（使用 HTTP 时 1.x）。
当然，如果您内联您不使用的图像的替代版本，那将是非常低效的。