How To Change Header Image on Mobile Devices?

Bit suprised with the comments here.

Picture is a really good implementation. This works for static sites and some use cases if your using a CMS but not an otpion in other CMS's lets say you have a shopify site as easily in solutions.

Sever multiple images and CSS changing is an otpion but as Nancy pointed out not great.

But you also need to consider DPI as well as screen size and image quality.

Picture is really there not just to server smaller images but more over different aspect ratio images to suit the different devices.  A long landscape image on a mobile you can only scale down and it looses itself or your crop and you loose parts of the image. Serving up a portait image variation helps with the design. That is the true use.

On a more basic level you serve a high quality image that when scaled will look sharp still on a mobile device and you do that changes to that image/elements around it or change a background images values such as background size and position through media queries. 

As Jon said, use the <picture> tag with SRCSET.  This serves the right size image to targetted devices without forcing them to absorb unecessary bandwidth.

The less preferred option is to serve both images to all devices and use display:hidden in a media query. 

That is a perfect use situation for the <picture> element: https://www.w3schools.com/tags/tag_picture.asp