Responsive Images in WordPress

Simplest way of doing this would be using Media query. Just make 2 Divs and assign class/id to them like this

<div class="class-1">
</div>
<div class="class-2">
</div>

You need to enclose your both the_post_thumbnail() function inside this div like this

<div class="class-1">
<?php the_post_thumbnail( 'recent-startpage-post' ); ?>
</div>  
<div class="class-2">
<?php the_post_thumbnail( 'recent-startpage-post-hr' ); ?>
</div>  

In the above code I have enclosed two the_post_thumbnail() in two different classes. Now in css file you have to write media query and use those classes (class-1 and class-2) inside query like this

@media screen and (min-width: 1600px) {
.class-1{display:none;} 
}
    @media screen and (max-width: 1600px) {
.class-2{display:none;}     
}

In the above code class-1 will be set to display:none; when screen size will be above 1600px and class-2 will set to display:none; when screen size will be below 1600px. In other words function the_post_thumbnail( 'recent-startpage-post' ); won’t be used (above screen of 1600px) because he is enclosed in DIV of class “class-1” and that class has been set to display:none for above 1600px of screen size via media query.

To know about Media Query in detail read this.