Responsive image breaking on mobile

My new WordPress site is showing a broken header image when viewed on a phone. Here’s a screenshot:

http://www.chicagoprogress.com/wp-content/uploads/2016/07/chiprog-error-1.jpg

What is the best way to get around this?

Ideally I would like to have it change to a different image below a certain breakpoint (say, max width 600px) – one with the logo/tagline at full width to ensure they’re readable.

I’m assuming I’d have to change something here but after much trial and error with sizes I can’t get it right for all screen sizes…

<div id="headimg" class="header-image">

		<a href="http://www.chicagoprogress.com/">
			<img src="http://www.chicagoprogress.com/wp-content/uploads/2016/07/chiprog-logo-header.png" srcset="http://www.chicagoprogress.com/wp-content/uploads/2016/07/chiprog-logo-header.png 1920w, http://www.chicagoprogress.com/wp-content/uploads/2016/07/chiprog-logo-header-300x52.png 300w, http://www.chicagoprogress.com/wp-content/uploads/2016/07/chiprog-logo-header-768x132.png 768w, http://www.chicagoprogress.com/wp-content/uploads/2016/07/chiprog-logo-header-1024x176.png 1024w" width="1920" height="330" alt="Chicago Progress">
            </a>

		</div>