Images for different screen widths

Mobile
3

Or depending on the image and dynamics of the page you could just scale the image smaller.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<style>
body{padding:20px;}
.banner{
	max-width:728px;
	min-width:300px;
	margin:auto;	
}
.banner img{width:100%;height:auto;}
</style>
</head>
<body>
<div class="banner">
<img src="http://placehold.it/728x300">
</div>
</body>
</html>

It depends on how the image looks scaled but it’s the easiest solution.

You could use background images and use media queries to supply the different images at different widths but then you may end up with some users having to download 2 images instead of one.