This would show your mobile image on any screen smaller than 768px wide. You can swap out your hero and mobile images in your CSS like this: I typically make my mobile images 800 x 1200px. When this is the case I switch out the hero image (using a media query) so that on mobile it shows the mobile image and on larger screens it shows the regular hero image. However, if it looks good on desktop but is a little too small on mobile you'll want to create a specific image for mobile. If it looks good on both jump down to the next section. So, take a look at them on smaller screens to make sure it still looks good. These image sizes typically look best on desktop. You will want to look at your image on both desktop and mobile. Don't forget how an image might look on mobile If the larger image compresses well and isn't too large (still under 400kb) I go with the 1920 x 1200px sized image. I usually do both sizes and then compress them. I make these images 1600 x 1000px or sometimes 1920 x 1200px. If you're creating a full page background image you'll want these images to be a bit taller. Size those full page background images correctly too

If your image is going to be header/hero background image you'll want it to be long and not too tall. Your go-to sizing guide for hero background images You know the first thing is to get the dimensions of the image right. You've done this a bunch of times but each time you open up your design tool to create your hero image, you can never remember what size that hero image should be. You want this image to be large enough for any size screen but not so large that it will significantly slow down the load time on your page. Your web page needs a new image for the hero section or top part of your page.

If you're like me you've run into this too many times to count. How I Size My Header Images Guide to Properly Size Your Hero Images and Optimize Them for Site Speed

Ideal web image resolution