Custom settings has been used to achieve the best solution for responsive images on this layout. A two column grid is used at
<= 992px and a four column grid after that. Since the images never become wider than 456 pixels, we only need the
thumbnail (320px) and
iphone-landscape (480px) sizes.
<?php $posts = get_posts( array( 'posts_per_page' => 4, 'rwp_settings' => array( 'sizes' => array( 'thumbnail', 'iphone-landscape' ), 'attributes' => array( 'sizes' => '(min-width: 992px) 320px, (min-width: 720px) 480px, 320px' ) ) ) ); ?>
The layout allows us to use
thumbnail at almost any viewport. The exception is when the two column grid is being used between 720px and 991px.