Selecting Image Size

But since Lazy Load XT works, except for retina

Sorry i should have been more specific. What works is lazy load with the a3 plugin activated. With the lazy load xt plugin both the rwp_img and rwp_attributes code output a larger natural image than specified in the media query.

For example,

<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$attributes = rwp_attributes( $thumbnail_id, array(
    'element' => 'img',
    'sizes' => array('Homepage', 'Homepage2' )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="(min-width: 981px) 402px, (min-width: 480px) 691px, 402px">';
?>
    </a>

Gives me 402×271 (natural 691×466) when viewed as desktop, so the natural image should be 402px wide not 691.

If i add retina images to the array as follows:

<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$attributes = rwp_attributes( $thumbnail_id, array(
    'element' => 'img',
    'sizes' => array('Homepage', 'Homepage@2x', 'Homepage2', 'Homepage2@2x' )
));
echo '<img data-srcset="'.$attributes['srcset'].'" sizes="(min-width: 981px) 402px, (min-width: 480px) 691px, 402px">';
?>
    </a>

I get 402×271 (natural 1382×932) when viewed as desktop. So it is using the retina version of the 691×466 image, which should only be displayed for smaller devices (min-width: 480px) 691px.

I get the exact same results when using rwp_img

<a href="<?php echo get_permalink( $post->ID );?>">
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
echo rwp_img( $thumbnail_id, array(
    'sizes' => array('Homepage', 'Homepage@2x', 'Homepage2', 'Homepage2@2x' ),
    'attributes' => array(
        'sizes' => '(min-width: 981px) 402px, (min-width: 480px) 691px, 402px'
    )
));
?>
</a>

I have explained the details just for your own interest because i don’t think this is an issue with the plugin but rather the lazy load xt script having some kind of incompatibility with your plugin. The reason i say this is because the a3 lazy load plugin outputs the correct image sizes for all my media queries. So it works properly, but for some reason xt does not.

except for retina, I think you should ask yourself if it’s really that important? As I’ve said before, it’s on logos and symbols that you really can tell the difference. If a photo is retina or not isn’t that obvious.

Yeah, i remember you saying this so thought i would put it to the test. Since i don’t have a retina display, i used a half resolution image in place of a larger resolution image. For example, a 400×400 image where a 800×800 image would normally be. This resulted in the image looking noticeably blurry. Was this a fair test of what non retina images would look like on a retina display?

My thinking is that high dpi displays are the future and it’s only a matter of time before they become commonplace so it’s best to futureproof myself now. Who knows, in a few years i could be asking you how to get RWP working with holographic displays? 😛 😉

I think you should ask yourself if lazy loading is this important to. It makes sense on pages with many images

I do plan to use images throughout posts so lazy loading would be a benefit. Again, it helps to futureproof by increasing speed so it’s something i would definitely like to use. I’d prefer to embrace new technologies wherever possible.

Fortunately a3 lazy load is working well, and my issue of slow lazy loading post images miraculously seemed to fix itself after testing all those other plugins last night. So i’m happy with that.

I think we should close this thread soon, we are very far away from the original question

True! I forgot what my original question was! lol Thanks for your patience!