Different images according to screen size to improve performance / loading time? (Webdesign)

I have a large picture which I want to display on my website, as a sort of background picture. It is quite large and takes a lot of loading time, so on smaller screens I want to display a smaller picture to minimize the loading time, since the picture that is actually being shown on smaller screens will be small anyways, so it would be a waste to load the big picture.

My question however is: How do I do this? What sort of options do I have? Will I have different pictures for different screen resolutions? And how do I know who is viewing my website (that is, how do I know the screen size)?