How to make images on the mobile version of the site with adaptive layout?

Question

css

There was a situation - I make an adaptive layout from the usual one
. There is an IMG picture, a picture sized 600 by 600 pixels.
On mobile, it should be 200x200.
I can't max-width - Google won't like that the picture automatically resizes, and the iPhone won't like it with its Retina display, which will make the picture blurry.
If I do it the way I always did, through styles and background: url() it will work, but the image won't advance because it's not in the IMG tag.
How to cram it into the IMG tag so that the URL changes when the screen size changes, and so that SEO does not suffer and there is no resizing in each frame?

Answer 1

Look here . Many options for solving the problem

Answer 2

What prevents to make width: 100% ?

Answer 3

I repeat once again - who spits on Google and Yandex - will pay SEOs. Much and for a long time. If Google says that your site should bark and stand on its hind legs, you either do it or you don't. You decide.
A more adequate option on stack-overflow:
div.only-mobile>img
div.only-desktop>img
and show either one or the other
And let both load in this case - Pagespeed Insights will deceive.