Possible to swap out image in header for smallest sizes?

My code for a custom image header:
<h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo bloginfo ('stylesheet_directory');?>/images/logo.gif" alt="<?php bloginfo( 'name' ); ?>" /></a></h1>

Which is placed in my child theme header.php. As usual, I know enough to be dangerous. This code works great for my current site. But I’m curious if there is a way for me to swap out that default image (logo.gif) for a different version of the logo (logoALT.gif) for the smallest media query page sizes?

Any way to do this?
Thanks,
SL