Retina Images and Roots

1

I’ve been trying to find the best solution for replacing images on a site I’ve built recently with retina versions using the @2x method. I came across retina.js and it seemed like the perfect tool to try for this task.

I believe I set it up correctly. Added the retina.js minified file to my grunt file to make sure it has js hints turned off. The source code on my site displays the retina.js code when I check out the scripts.min.js file as well.

However, when I uploaded an @2x image version for a logo into the media folder to try and replace the logo image, it doesn’t seem to do anything…

Has anyone on here tried using Retina.JS with Roots? Is there a step I’m missing here? It seems completely useless and I can’t find any tips or help for the retina.js script with google searching. I’m sure some of you guys have tried to tackle a retina image solution, if you didn’t go with retina.js what did you go with?

2

I actually got Retina.js to work, looking good so far. However, still feel free to share what you use for your retina images with roots!

3

Could you post what the problem was or how you got it working?
Thanks

4

Retina JS has always worked for me by adding to plugins directory - I did have to turn of JS Hint on that one.

I’ve also heard this works: http://wordpress.org/plugins/wp-retina-2x/

I’ve had conflicts with retina.js and my slider script (bxSlider) because the client didn’t want to upload a 2x version of a slider image, so I had to default to using the .at2x LESS mixing retina.js provided. It works great for me and I almost prefer having the manual control!

6

Since there’s a lot of development going in the responsive images field right now, I was wundering how I can combine the new <picture> markup method of the new Picturefill 2.0 polyfill with a plugin like WP Retina 2x.

Basically I have been using the WP Retina 2x plugin to render the @2x retina images in the media library and showing them on retina displays using the Retina.js method in the settings. That worked however it caused images to download twice on retina displays, where Picturefill 2.0 is designed to avoid that.

On a new WordPress project I switched to the new <picture> markup described here and am trying to implement it with retina images too.

<?php
$image 		= get_field('featured_image');
$alt 		= $image['alt'];
$imgsrcmd 	= $image['sizes']['medium'];
$imgsrclg 	= $image['sizes']['large'];
?>
<picture>
	<!--[if IE 9]><video style="display: none;"><![endif]-->
	<source srcset="<?php echo $imgsrclg; ?>, <?php echo $imgsrclg; ?> 2x" media="(min-width: 480px)">
	<source srcset="<?php echo $imgsrcmd; ?>, <?php echo $imgsrcmd; ?> 2x">
	<!--[if IE 9]></video><![endif]-->
	<img srcset="<?php echo $imgsrclg; ?>, <?php echo $imgsrclg; ?> 2x" alt="<?php echo $alt; ?>">
</picture>

If I use the above markup, which of the WP Retina 2x methods should I use:

  • HTML srcset (W3C Draft)
  • HTML Rewrite
  • Retina.js
  • Retina-Images
  • None

The HTML srcset method is the best. The HTML will be rewritten with the srcset attribute added to the img tags. Works with caching. Unfortunately, not all the browsers support it yet.

The HTML Rewrite method is one of the best methods. It replaces the images by the retina images - if available - in the HTML directly. It’s tricky to use HTML caching with it however.

The Retina.js method is fail-safe and only uses one JavaScript file. When a Retina Display is detected, requests for every images on the page will be sent to the server and the retina images will be retrieved if available. Requires a lot of bandwidth.

The Retina-Images method is efficient. The images will go through the Retina-Images handler. Caching systems might be an issue.

Because none of them seem to work yet.
Somehow the 2x markup should tell the plugin to look for the @2x retina version of the image in the media folder, but it doesn’t obviously…

Does anyone else found a way or workflow to let these two techniques play nicely together?
Many thanks!