Choosing alternate photos for mobile and web versions

My photos are not getting optimized for both mobile and web versions of the site. It will only look good on one, and not the other. For example, I designed a graphic in Photoshop which looks good on desktop version but on a mobile phone, it ends up looking too compact.

So I would like to either:

a)Find out the photos are not naturally adapting and how to fix that


b)Use separate sized photos for the different versions

The most important thing though is that the theme still loads quickly, so I would prefer the more optimal solution.

Images are adopted naturally and this is how responsive design works using CSS media queries. Well there is huge difference between 4-inch display and 27-inch display and responsive design is there to try to cover them both.

Most likely there is plugin that could automate this process but this is definitely not something that will come in theme as “feature”.