Lazy Load

Ok, I think I figured out what is going on.

The Lazy Load plugins hooks itself to:

add_filter( 'the_content', array( __CLASS__, 'add_image_placeholders' ), 99 );

and happens before WP Retina 2x’s hook:

add_action( 'wp_head', 'wr2x_srcset_buffer_start' );

Let’s say we have an image as follows:

<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300">

Lazy Load grabs this image and turns it into:

<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300">
<noscript>
<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300">
</noscript>

Your plugin now comes along and looks for all the src attributes in all <img> tags. First, it sees the src attribute pointing to the 1×1.trans.gif image, which does not have a @2x counterpart, and therefore it ignores this tag. Then, it sees the src attribute in the <img> tag inside the <noscript>, which has the correct src pointing to the actual image, and it is able to locate the @2x image. However, this is of no use since our goal is to include the correct path in the first <img> tag.

It ends up looking like this:

<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300" scale="0">
<noscript>
<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300" srcset="https://localhost/thepostmansknock/thepostmansknock/wp-content/uploads/2013/11/[email protected] 2x">
</noscript>

I was able to get it to work with the following hack in wp-retina-2x.php:

$img_info = parse_url( $tag->getAttribute('data-lazy-src') );

so now my HTML looks initially like:

<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300" srcset="https://localhost/thepostmansknock/thepostmansknock/wp-content/uploads/2013/11/[email protected] 2x" scale="0">
<noscript>
<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300">
</noscript>

and once it is loaded:

<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300" srcset="https://localhost/thepostmansknock/thepostmansknock/wp-content/uploads/2013/11/[email protected] 2x" scale="0" data-lazy-loaded="true" style="display: block;">
<noscript>
<img class="size-medium wp-image-4048 aligncenter" alt="Test 1" src="https://localhost/thepostmansknock/wp-content/uploads/2013/11/Test-1-267x300.png" width="267" height="300">
</noscript>

The <noscript> tag does not have the srcset attribute, which is okay because I’m working on the assumption that if you are using a Retina-ready device, you have JavaScript enabled. However, now only the images with the data-lazy-src attribute are Retina ready, which are only the images inside the content of the post.

This hack is not a recommended nor a permanent solution though. The issue with this Lazy Load plugin is that it needs to load after your plugin has worked its magic for all to display correctly. Since one hooks to the_content filter and the other to the wp_head action, it seems unlikely this is possible.

At the same time, using the srcset attribute would overwrite the src with the transparent gif image placeholder, completely killing the purpose of lazy loading. I am going to put some thought into this issue. Let me know if you have any ideas and thanks again for a great plugin.

Thanks. I have no idea right now how to avoid those issues. Maybe it would be interesting to have Automattic point of view on this.

I haven’t had any time to think more about this issue. I’m going to close this thread for now, at least until more browsers support the srcset attribute.

Thanks again for a great plugin!