Question about retina use/setup

Aldo
(@ab_lu)

9 years, 11 months ago

Hi Stefan

A question about retina setup.

You write in the documentation for retina setup (https://github.com/stefanledin/responsify-wp#setup): There’s no thumbnail@2x since that would be the same as medium.

But as there is no image size with @2 no retina image is served for the thumbnail size.
Actually it would make sense, to be able to provide already present image sizes for retina. Otherwise we will end up with many double files just because of the @2.
Or am I misunderstanding something?

Thanks,
Aldo

https://wordpress.org/plugins/responsify-wp/

Viewing 11 replies - 1 through 11 (of 11 total)

Plugin Author stefanledin
(@stefanledin)

9 years, 11 months ago

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. thumbnail@1.5x, medium@2x, large@2.5x 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.
Thread Starter Aldo
(@ab_lu)

9 years, 11 months ago
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
Plugin Author stefanledin
(@stefanledin)

9 years, 11 months ago
One note about retina. The img markup pattern would produce something like the following when retina is active:
<img srcset="image-xs.jpg 385w, image-xs@2.jpg 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, image-xs@2x.jpg 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?
Thread Starter Aldo
(@ab_lu)

9 years, 11 months ago
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 ><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)"><img srcset="/app/uploads/2016/06/blgp-Logo-385x272.jpg, /app/uploads/2016/06/blgp-Logo-770x544.jpg 2" class="lazyload img-responsive"></picture>
Plugin Author stefanledin
(@stefanledin)

9 years, 11 months ago

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!

Thread Starter Aldo
(@ab_lu)

9 years, 11 months ago

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

Thread Starter Aldo
(@ab_lu)

9 years, 11 months ago

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.

Thread Starter Aldo
(@ab_lu)

9 years, 11 months ago

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?

Plugin Author stefanledin
(@stefanledin)

9 years, 11 months ago

Is it enough with my answer in the other thread?

Thread Starter Aldo
(@ab_lu)

9 years, 11 months ago

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

9 years, 11 months ago
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

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Question about retina use/setup’ is closed to new replies.