What is the best practice to maintain SEO, CLS, Lazy Loading and responsivenes of Images?

As per web.dev, images should have an explicit height and width. But having this will affect the webpage on different sized screens. And off-screen images should be deferred and lazy-loaded. This will affect SEO (Alt Tag). Placing images using background-img: URL() and having a min-width will not affect CLS, but SEO is affected. So, what should be the best practice? Should I want to have multiple sizes of the same images for various screen resolutions? Or is there any 3rd party plugins to maintain these?