How to optimize and serve images in the best format in html?

Question

I have some sort of confusion between the below image formats and html tags.

1. Next-gen image format via and (uses webp and jpeg image)
2. Using data:image/png;base64,blahblahblah (uses svg image)

Can you please suggest me the best way.

Using next-gen format:

<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>

Using data 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? Which option is best for fast loading and full browser compatibility? There might be any other option I might be missing out.

Answer 1

Can we merge both of them?

Yes, you can use a data: scheme URL anywhere you can use a URL, including in the srcset attribute.

Which option is best for fast loading and full browser compatibility?

It depends. Base64 encoding is bloated and limits caching but saves an HTTP request (when using HTTP 1.x).

Of course, if you inline alternative versions of images that you aren't using, then that's very inefficient.