Responsible Header Image

How can I make the header image responsible so that the appropriate image is loaded depending on the resolution? >= 1200px: buddha.jpg >= 768px: buddha-768x192.jpg >= 528px: budda-528x297.jpg