script disregards fullsize @2x, only swaps thumbnails

No sizes are disabled in the “retina options”.

Yes same issue here. Before the update it worked. Now it doesn’t load the @2x

Testing further and realising that when the thumbnail is linked to “attachment page” is does swap in a retina file, but when linked to “media file” (necessary for lightboxes) it does not swap in the @2x.

Is it a bug or a feature? ??

I am not sure that is a feature ?? If the @2x is available, it should swap. Please first confirm that it work using the Retina.js method, I don’t do anything fancy for this method, only loads the Retina.js script. If that doesn’t work there is something weird happening and it is not directly related to the plugin.

If that works, try the PictureFill. I suspect now depending on the original/base HTML code, the plugin doesn’t capture it and don’t touch it at all. Do you think you could copy/paste me the HTML code of your post (a small one) that doesn’t work? Please provide the HTML you have in the editor. And it would be very good if you could provide the resulting HTML code (in your browser) for the same portion. Can you do that? That would be really easy to see the issue and replicate it on my side (and of course, fix it). Thank you ??

Hi,

It does not work with the Retina.js method either.

I just tested deactivating your plugin and installing the retina.js as a standalone script (downloaded from https://imulus.github.io/retinajs/), and the effect is the same. Link to attachment page and it swaps, but link to media file and it doesn’t swap.

So indeed the problem seems to lie with retina.js.

Do you have any ideas of how to troubleshoot this issue further?
I am just speculating now, but if retina.js is changing the HTML on the fly it is actually logical that it does not swap for links to media file, since there is no HTML to parse and swap, there is just a link to a file.

Update:
I managed to get it to work with server-side retina-images.

1) Since this method seems more versatile, and also does not need downloading of images twice, why is it not the “recommended method”? What are the drawbacks of this method?

2) My .htaccess in the root folder did not get changed when I activated this method. It still has the same content and hash values. Isn’t that strange?

Watch out, server-side method is not HTML caching friendly. If you use a HTML caching plugin, it will probably not work correctly (will either always serve the normal images or the retina images). But actually if the caching plugin handles two different kind of caches depending on either the device is retina or not, it would work; I mentioned that to a few developers in the past but I am not sure they implemented it.

1) The recommended method is PictureFill because it’s the best ?? Server-side method is nice too but a bit tricky, difficult to debug and I don’t recommend it to non-developers. The caching could stop it, it also override the normal-static serving of the images, well, it might not be the fastest one. I am not sure, I used it for a long time but not recently.

2) Indeed, that’s strange! The Server Side handler must be in the .htaccess. But it works? You get the Retina images on your Retina devices?

PictureFill is the best method by far, easy to implement, cache-friendly, works even natively in many browsers (without the javascript, which we can disable). I consider Retina.js as the second one (it’s simple), and the HTML Rewriter is also excellent if a caching plugin/service can handle it (probably even the best in that case). The server-side is too tricky, not everyone has a .htaccess (Apache only), difficult to debug, maybe doesn’t play well with caching…

I would like to check what is not working on your side with PictureFill. Could you share with me the exact HTML code your are using from the post editor?

// rapport embarassant commence… //

Hello,

2) So, first the .htaccess conundrum. I found the amended htaccess in the root of my development site, not the root of the site itself. Stupid me. I was looking inside the wordpress installation for it as well but apparently never looked in the root folder of my development tree. So that’s the explanation, retina-images method work exactly as advertised.

1) Now, the non-swapping fullsize images when linked to “media file”. I was getting so frustrated that I digged out an old smartphone that I never use. An LG Optimus Pro running Android 4.1.2. And lo and behold, on that phone, picturefill works as advertised!!!!!! On my current phone, LG G2 running Android 4.2.2, it does not work and neither does retina.js. And it doesn’t work either on my tablet, the LG Gpad 8.3 running 4.2.2. Both these devices are newer. I have looked for settings that they should be treated as a useragent-desktop, but can’t find any such thing.

So either it is something related to the Android version, or to the generation of the LG devices. I wish I had more devices to test on. But in any case, the fault I was experiencing seems to lie with the devices rather than with the plugin or the html code. (It would be interesting to hear what @weddje above has to report about his).

But since you asked for it I will post the code from the page in question below, in case you have any ideas.

my dev site

this is the code from the text editor for the page in question:

image below linked to "media file"

<a href="https://peterwennersten.com/dev/wp-content/uploads/2015/02/LitenG?rd-L?gtryck.jpg"><img class="alignnone size-thumbnail wp-image-283" src="https://peterwennersten.com/dev/wp-content/uploads/2015/02/LitenG?rd-L?gtryck-150x150.jpg" alt="Liten g?rd, l?gtryck" width="150" height="150" /></a>

image below linked to "attachment page"

<a href="https://peterwennersten.com/dev/gallery/buildings/liten-gard-lagtryck" rel="attachment wp-att-283"><img class="alignnone size-thumbnail wp-image-283" src="https://peterwennersten.com/dev/wp-content/uploads/2015/02/LitenG?rd-L?gtryck-150x150.jpg" alt="Liten g?rd, l?gtryck" width="150" height="150" /></a>

-----------------------------------------------------

<strong>Verification images (not linked anywhere)</strong>

This is the normal thumbnail

<img class="alignnone size-thumbnail wp-image-287" src="https://peterwennersten.com/dev/wp-content/uploads/2015/02/normal-150x150.jpg" alt="Liten g?rd, l?gtryck" width="150" height="150" />

This is what a swapped file looks like (it has a text- overlay for testing)

<img class="alignnone size-thumbnail wp-image-288" src="https://peterwennersten.com/dev/wp-content/uploads/2015/02/swapped-150x150.jpg" alt="Liten g?rd, l?gtryck" width="150" height="150" />

The ???-filename bug from my other thread I think still holds though, and I don’t get any retina swaps on my desktop monitor when in debug mode either.

Actually skip that 1) passage above.

I did some thorough testing today (making sure I cleared caches in between reloads), with two sites, one running picturefill and the other retina.js, and my old phone behaves no different than the other two LG devices. I also got a friend to check the sites with an Iphone5 and the results match those of the LG devices.

One curious thing is that retina.js on the iphone and retina.js in native browsers on all LG android devices tested, has no effect at all! Nothing is swapped. On chrome and opera, however, images swap. So, picturefill is more reliable than retina.js (but the only thing that works 100% for me is still retina-images server side).

This is a djungle. I have systematized the testing data for these devices, and you can see the results here if you are interested:
https://i.imgur.com/HgsfFLX.jpg

Do you have a wordpress test page with a lightbox of some sort that you know works and swaps in @2x, that I can check with my devices to see how they behave?

Mmm, interesting. You should send those findings on the Github of Retina.js but I guess they should know about it?

Actually my lightbox displays the full size image always, I think it’s more like the way we should do it. Otherwise the lightbox would have to call the retina.js manually when it shows up.

Actually my lightbox displays the full size image always, I think it’s more like the way we should do it.

I agree it would be better not to have to swap at all.

Do you mean that you are serving double-sized fullsize images also to normal devices, causing normal devices to doenload unnecessarily large images?

Or are you using the technique where you optimize the doublesized image so hard (20%-40%) that its file size remains small, not causing any overhead in download time? If yes, how do you get the wordpress gallery to write the <img> tag with half the width/height dimensions of the actual image you upload to wordpress? Or would you go in and edit the dimensions manually for each image in the gallery?

Since retina-images method is the only method so far that gives me the results that I want, I find it hard to abandon that method. But I am struggling to understand the implications of what you write about caching in post #8 above.

So if I don’t actively implement any caching solution, I can avoid the caching problems you mention?

(To me, understanding the intricacies of how caching works is one of the hardest things about creating websites)

Do you mean that you are serving double-sized fullsize images also to normal devices, causing normal devices to doenload unnecessarily large images?

In my lightbox, yes, I show the full-size on my website. That is usually what the visitors want to see when they click on the photo, a bigger version.

Or are you using the technique where you optimize the doublesized image so hard (20%-40%) that its file size remains small, not causing any overhead in download time?

I have seen a difference of quality when doing this (even though a few articles say there is no difference) but you can do it in the plugin by tweaking the JPEG quality. That option was added exactly for that reason ??

If yes, how do you get the wordpress gallery to write the <img> tag with half the width/height dimensions of the actual image you upload to wordpress? Or would you go in and edit the dimensions manually for each image in the gallery?

The WordPress HTML editor already fix the sizes of the images when you add them in your posts and pages. My plugin, depending on the method, switch this image or add srcset information but keep the original size. Of course, otherwise it would blow-up ??

So if I don’t actively implement any caching solution, I can avoid the caching problems you mention?

With no caching, all the methods should work right away. When you start playing with caching methods, then you need to understand how the caching works exactly by the plugin or system you are using.

By the way, is your original issue is fixed? Because that problem sounded really weird and if there is a bug somewhere I would need to fix it.