No Retina images used

Hi Matthias!
Your code looks fine to me!

Have you added the retina sizes with the add_image_size() function?

<?php
add_image_size( 'gaf-vollbild-klein@2x' );
add_image_size( 'gaf-vollbild-mittel@2x' );
add_image_size( 'gaf-vollbild@2x' );
?>

Have you turned on the retina option on the settings page?

Thanks for fast replay.

I have defined the retina size images in the same way I did with the other sizes. With the “Simple Image Sizes” Plugin.

The @2x image sizes are checked on the RWP settings pages.

Retina is activated on the settings page.
There is an info box to add the retina sizes. But I did not do it for all image sizes. Only for gaf-vollbild-xxx images. Is it necessary to do it for all image sizes?

How should the output in source code look like?

No, you only need to do it for the sizes you want a retina version of ??

If you’re using <img> as markup pattern, you won’t see any big difference. The retina images will be included in the srcset attribute just like the other ones.
If you′e using <picture> on the other hand, each <source> tag would look something like this:

<source srcset="gaf-vollbild-mittel.jpg, [email protected] 2x">
<source srcset="gaf-vollbild.jpg, [email protected] 2x">

You won’t see any 2x when using <img>.

Examples: https://github.com/stefanledin/responsify-wp#examples

I use <img>.

You won’t see any 2x when using <img>.

??? How does the browser know about the 2x images?

My sourcecode output looks like:

<img sizes="
(max-width: 494px) 478px,
(max-width: 646px) 630px,
(max-width: 767px) 740px,
(max-width: 1018px) 478px,
(max-width: 1199px) 630px,
740px"
srcset="
FlashAir-III_Retina-Voll-478x285.jpg 478w,
FlashAir-III_Retina-Voll-630x375.jpg 630w,
FlashAir-III_Retina-Voll-740x440.jpg 740w"
src="FlashAir-III_Retina-Voll-740x440.jpg">

But there should be the 2x files in the srcset?
Any proposals?

When using srcset, you don’t need to tell the browser which images that is retina versions. It will be smart enough to choose the most appropriate one based on screen width and pixel density.

Let’s say that you upload an image called image.jpg. These versions would be generated:

Full size: image.jpg
Large: image-1024×1024.jpg
Medium: image-300×300.jpg
Thumbnail: image-150×150.jpg

If you’ve created a size called medium@2x, it would be 600px wide.

Medium@2x: image-600×600.jpg

The output would look like this:

<img srcset="image-150x150.jpg 150w, image-300x300.jpg 300w, image-600x600.jpg 600w, image-1024x1024.jpg 1024w, image.jpg XXXw" sizes="...">

Or with <picture>:

<picture>
    <source srcset="image.jpg">
    <source srcset="image-1024x1024.jpg">
    <source srcset="image-300x300.jpg, image-600x600.jpg 2x">
    <source srcset="image-150x150.jpg">
</picture>

None of these are a retina version?
FlashAir-III_Retina-Voll-478×285.jpg
FlashAir-III_Retina-Voll-630×375.jpg
FlashAir-III_Retina-Voll-740×440.jpg
FlashAir-III_Retina-Voll-740×440.jpg

The retina sizes are not in the srcset.

Here is the image size screen.

And here the RWP settings

The uploaded image has 1480×880 Px size.

Now I tried it again.
I gave the images new names.
“gaf-vollbild-mittel@2x” got to “gaf-vollbild-mittel-ret” now it is working. Six image url’s are in the srcset.

Perhaps you can have a look at the code if there is a problem with @-sign or numbers.

Thanks for the great plugin!

Nice to hear that you found a working solution. But there must still be some kind of issue with RWP.
I’ve recreated this scenario myself now on a brand new installation and with the Simple image sizes plugin. I added “gaf-vollbild-mittel” and “gaf-vollbild-mittel@2x” but I didn’t get it to work either. Then I realised that the uploaded image was smaller than the “gaf-vollbild-mittel@2x size”. When I uploaded a larger image everything worked as expected ??
This is not what happens to you?

Thanks for the review by the way ??

The size of the uploaded image has exactly retina (@2x) dimension.
Or do you mean the size in kB?

No I mean size in pixels ??
Okey, that might explain the problem. If the original image is exactly as large as a XXX@2x size, WordPress would not generate that size. It would just use the original image. That means that RWP wont find any retina version.

For the biggest version might your point be right. But why is there no medium@2x and small@2x file found? This is smaller then original = full@2x.

I have no idea actually, but I would really like to find out! It’s quite hard to debug this issue just by asking you questions. Do you have a local installation of the site that you can try a modified version of the plugin on? Or if you send me a link to the theme and all other plugins that you’re using? I would like to recreate as much as possible myself!

The site is still under development. It is online but until launch password protected.

I can send you a list of all plugins and the theme name. But it is a premium theme.
We should do that by mail.

Okey, well in that case we could do a bit of die(var_dump()) on that site to? ??
I could make a new version of RWP that outputs messages and info that I need in order to debug.
You can contact me on info<at>stefanledin.se.