I've been thinking about how I would use responsive images in Wordpress. My site has a fixed height, full width thumbnail at the top of each post. The built in Wordpress implementation of responsive images assumes a constant aspect ratio, which this use-case doesn't have.
I've created 6 image size, covering 3 widths and 2x pixels:
add_action( 'after_setup_theme', 'setup_image_sizes' );
function setup_image_sizes() {
$height = 150;
$width = 250;
$gutter = 50;
add_image_size( 'single-width', $width, $height, true ); //Single width Thumbnail
add_image_size( 'single-width-2x', $width * 2, $height * 2, true ); //Single width Thumbnail
add_image_size( 'double-width', 2 * $width + $gutter, $height, true ); //Double width Thumbnail
add_image_size( 'double-width-2x', ( 2 * $width + $gutter ) * 2, $height * 2, true ); //Double width Thumbnail
add_image_size( 'triple-width', 3 * $width + 2 * $gutter, $height, true ); //Triple width Thumbnail
add_image_size( 'triple-width-2x', ( 3 * $width + 2 * $gutter ) * 2, $height * 2, true ); //Triple width Thumbnail
}
Having done this, I have no idea how I would build a <picture>
element. Any help and guidance would be appreciated.