Get views to format an image field for HiDPI / high pixel density / Retina displays

Question

I have a view showing several nodes that have photos stored in an image field. It works great, but doesn't look so sharp on HiDPI displays (or when the page is zoomed-in on a traditional display) because the image file that views produces is exactly the size used in HTML. Views is giving me something like this:

<img src="my-image-300x200.jpg" width="300" height="200">

But I think what I'd like views to do is produce something like:

<img src="my-image-600x400.jpg" width="300" height="200">

This way I'm loading images bigger than necessary (downside = slower page load), but it would seem worth it to me because I could get the images to look nice and crisp when the client has a device pixel ratio > 1.

My images in these nodes are not always the same aspect ratio.

Any thoughts on how to get views to produce the image and markup above, or perhaps how to approach this problem a different way?

Answer 1

srcset has (or will have) decent support in browsers. What I do, is make _2x image styles for everything, and then do a custom theme_image_style():

/**
 * Implements theme_image_style().
 */
function MYTHEME_image_style($variables) {
  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'],
    'height' => $variables['height'],
  );

  image_style_transform_dimensions($variables['style_name'], $dimensions);

  $variables['width'] = $dimensions['width'];
  $variables['height'] = $dimensions['height'];

  // Determine the URL for the styled image.
  $path = $variables['path'];

  $variables['path'] = image_style_url($variables['style_name'], $path);

  // See if we have alternates for the srcset
  $image_styles = &drupal_static(__FUNCTION__);
  if (empty($image_styles)) {
    $image_styles = array_keys(image_styles());
  }

  $variables['srcset'] = array('1x' => $variables['path']);

  if (in_array($variables['style_name'] . '_2x', $image_styles)) {
    $variables['srcset']['2x'] = image_style_url($variables['style_name'] . '_2x', $path);
  }

  return theme('image', $variables);
}

and then

/**
 * Implements theme_image().
 */
function MYTHEME_image($variables) {
  $attributes = $variables['attributes'];
  $attributes['src'] = file_create_url($variables['path']);

  // Add in normal attributes.
  foreach (array('alt', 'title', 'width', 'height') as $key) {
    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }

  // Add in our srcset if we have two or more.
  if (count($variables['srcset']) >= 2) {
    $srcset = array();

    foreach ($variables['srcset'] as $size => $path) {
      $srcset[] = file_create_url($path) . ' ' . $size;
    }

    $attributes['srcset'] = join(', ', $srcset);
  }

  return '<img' . drupal_attributes($attributes) . ' />';
}

You can also feature detect with Modernizr for srcset and retina support, and then swap out the image src with JS shenanigans if you want.

You can also see if the Picture module does what you want, but there is debate in the community about when <picture> should be used and not used.

Answer 2

I think this module does exactly what what you asked for