Question about retina use/setup

Hi Aldo!
It depends on your image sizes. In my example, which has the default sizes in default dimensions, medium happens to be twice as large as thumbnail.
This might not always be the case. If thumbnail is 200 and medium 500, there’s no problem adding a thumbnail@2x size which is 400 pixels wide.

RWP looks for image sizes which names is name@denisty. [email protected], medium@2x, [email protected] and so on. When it fetches the thumbnail size for example, it also looks for additional sizes with the same name but with an @2x suffix.
That’s why they need to have the same name. You have a point of course regarding double files, but that’s the way it is right now.

Ok, I set now the following sizes

add_image_size( 'image-xs', 385, 9999 );
add_image_size( 'image-xs@2', 770, 9999 );

add_image_size( 'image-sm', 500, 9999 );
add_image_size( 'image-sm@2', 1000, 9999 );

add_image_size( 'image-md', 770, 9999 );
add_image_size( 'image-md@2', 1540, 9999 );

add_image_size( 'image-lg', 1000, 9999 );
add_image_size( 'image-lg@2', 2000, 9999 );

add_image_size( 'image-xlg', 1540, 9999 );
add_image_size( 'image-xlg@2', 3080, 9999 );

As you can see some sizes are generated twice.
Maybe it would a feature for the future to be able to set the retina sizes manually in picture_attributes?

Then I have now another issues.
As soon I set ‘retina’ => true I get the following error in the console for each image:

Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate /app/uploads/2016/06/blgp-770x544.jpg
Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate /app/uploads/2016/06/blgp-2000x1414.jpg
Failed parsing 'srcset' attribute value since it has an unknown descriptor.

Any idea?

Thanks,
Aldo

One note about retina. The img markup pattern would produce something like the following when retina is active:
<img srcset="image-xs.jpg 385w, [email protected] 770w, image-md.jpg 770w" sizes="...">

It would look like this without retina:

<img srcset="image-xs.jpg 385w, image-md.jpg 770w" sizes="...">

The end result would still be the same though. A browser running on a retina screen would select the 770px image (or whatever image that’s at least twice the size). A non-retina screen would select the 385px image.

Things is a bit different when using <picture>. The same scenario would look something like this with retina turned on:

<picture>
    <source srcset="image-md.jpg" media="(min-width: 385px)">
    <source srcset="image-xs.jpg, [email protected] 2x">
    <img srcset="image-xs.jpg">
</picture>

In this example, image-md.jpg would only be used when the media query matches. The retina version of image-xs.jpg will only be used on a retina screen which is smaller than 385px.
I find this to be more logical than the img markup pattern actually.

The same example without retina:

<picture>
    <source srcset="image-md.jpg" media="(min-width: 385px)">
    <source srcset="image-xs.jpg">
    <img srcset="image-xs.jpg">
</picture>

Regarding the console error, I guess there’s something wrong in the markup.
Can you post it along with debug info?

Here the debug info:

### RWP Debug ###
Attachment ID: 102
Image sizes: thumbnail, medium, medium_large, large, image-xs, image-xs@2, image-sm, image-sm@2, image-md, image-md@2, image-lg, image-lg@2, image-xlg, image-xlg@2, full
Image width: 3508
Image height: 2480
Image sizes found: thumbnail, medium, large, image-xs, image-xs@2, image-sm, image-sm@2, image-md, image-md@2, image-lg, image-lg@2, image-xlg, image-xlg@2, full
Images found:
- thumbnail: /app/uploads/2016/06/blgp-Logo-150x150.jpg,
- medium: /app/uploads/2016/06/blgp-Logo-900x636.jpg,
- large: /app/uploads/2016/06/blgp-Logo-1800x1273.jpg,
- image-xs: /app/uploads/2016/06/blgp-Logo-385x272.jpg,
- image-xs@2: /app/uploads/2016/06/blgp-Logo-770x544.jpg,
- image-sm: /app/uploads/2016/06/blgp-Logo-500x353.jpg,
- image-sm@2: /app/uploads/2016/06/blgp-Logo-1000x707.jpg,
- image-md: /app/uploads/2016/06/blgp-Logo-770x544.jpg,
- image-md@2: /app/uploads/2016/06/blgp-Logo-1540x1089.jpg,
- image-lg: /app/uploads/2016/06/blgp-Logo-1000x707.jpg,
- image-lg@2: /app/uploads/2016/06/blgp-Logo-2000x1414.jpg,
- image-xlg: /app/uploads/2016/06/blgp-Logo-1540x1089.jpg,
- image-xlg@2: /app/uploads/2016/06/blgp-Logo-3080x2177.jpg,
- full: /app/uploads/2016/06/blgp-Logo.jpg
Media queries:
- Use image-sm when min-width: 500px,
- Use image-md when min-width: 770px,
- Use image-lg when min-width: 320px

Markup:
<picture ><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="/app/uploads/2016/06/blgp-Logo-1000x707.jpg, /app/uploads/2016/06/blgp-Logo-2000x1414.jpg 2" media="(min-width: 320px)"><source srcset="/app/uploads/2016/06/blgp-Logo-770x544.jpg, /app/uploads/2016/06/blgp-Logo-1540x1089.jpg 2" media="(min-width: 770px)"><source srcset="/app/uploads/2016/06/blgp-Logo-500x353.jpg, /app/uploads/2016/06/blgp-Logo-1000x707.jpg 2" media="(min-width: 500px)"><!--[if IE 9]></video><![endif]--><img srcset="/app/uploads/2016/06/blgp-Logo-385x272.jpg, /app/uploads/2016/06/blgp-Logo-770x544.jpg 2" class="lazyload img-responsive"></picture>

Looks like the X is missing after 2 in the srcset.

srcset="/app/uploads/2016/06/blgp-Logo-385x272.jpg, /app/uploads/2016/06/blgp-Logo-770x544.jpg 2"

…would be:

srcset="/app/uploads/2016/06/blgp-Logo-385x272.jpg, /app/uploads/2016/06/blgp-Logo-770x544.jpg 2x"

I’ll look into it.

Thanks!

Stefan,
For some reason, there is missing the “x”.
The markup returns: /app/uploads/2016/06/blgp-Logo-1000x707.jpg, /app/uploads/2016/06/blgp-Logo-2000x1414.jpg 2
But it should be:
/app/uploads/2016/06/blgp-Logo-1000x707.jpg, /app/uploads/2016/06/blgp-Logo-2000x1414.jpg 2x

My fault, sorry!
I did not add the “x” in the retina image size: add_image_size( ‘image-lg@2’, 2000, 9999 );
Should be add_image_size( ‘image-lg@2x’, 2000, 9999 );

Didn’t know it retrieves the “X form the filename.

A last question regarding media_queries.
I would like to have the following:
– image-xs max-with 320px
– image-md min-with 321px
– image-xs min-with 700px
– image-md min-with 100px

How can I achieve this?

Is it enough with my answer in the other thread?

Could you maybe give me an example how I would set the sizes string using using rwp_img()?

I think this would do what you wanna achieve:

echo rwp_img( $id, array(
    'sizes' => array( 'image-xs', 'image-md' ),
    'attributes' => array(
        'sizes' => '(min-width: 700px) 385px, (min-width: 321px) 770px, 385px'
    )
) );

image-xs is the default image.
image-md is used between 321px and 700px
image-xs is used when the screen is larger than 700px