The innerworkings of retina images

[gcellison]

Hello and happy Friday.

A question for anyone who has delved into the innerworkings of the retina images option and how it relates to Xara’s JavaScript. I have done a bit of experimenting and perhaps have isolated how it works, but I would like to get confirmation, if possible.

The quick background: I am generating some of my images outside of WDP, storing them in a subdirectory of index_htm_files (generated by the software), and requesting them on the WDP page using HTML placeholders. (The quality of the particular images is better this way. I have tried using a higher DPI setting in WDP, but it doesn’t produce the clarity I want.) The problem is that the retina image option is obviously not available; so, I would like to induce it manually.

From my exploration, it appears that the retina images are called by a function (xr_retina) located in roe.js which automatically alters the requested filename by suffixing “@2” if the conditions are met. It also appears that the only thing necessary to invoke the retina image is the assignment to it of an additional class, “xr_rn_” in the HTML code.

Has anyone attempted to do this, and if so, could you please advise if it is correct that to accomplish the retina image manually, I need only assign the additional class and generate and store the higher quality (@2) image in addition to the original?

Any help is greatly appreciated.

[Acorn]

What we have is an IMG Tag of form:
<img class="xr_rn_ xr_rnsp_ xr_ap xr_rno_http://localhost:8000/virt82a17d19/index_htm_files/2.png " id="Artistes" src="http://localhost:8000/virt82a17d19/index_htm_files/2@2x.png" alt="" title="" style="left:600px;top:322px;width:176px;height:133 px;">

Never having looked into the coding, I imagine the equivalent as a dialogue between the browser and the HTML file.

Little Browser: What have you got?
Code: Well I have an image here in my src that you I've started to downloaded - 2@2x.png. Can you use it?
Little Browser: Well, it's a bit too rich for me.
Code: OK. use this other one that you'll have to download instead - 2.png.
Little Browser: That's OK. Pity about the first one though. My Big Browser eats Retina images for breakfast.
Big Browser: Yup! Tasty too. I throw all the tiddlers back. In fact, I never see them.

What Big Browser does is downloads all the @2x images and roe.js cancels the others.
It is possible that as the @2x render starts for the first image, roe.js checks with Little Browser and uses JavaScript to switch round all the srcs to the 96dpi versions.

I would save all my images at 192dpi and just offer up <img id="Artistes" src="http://localhost:8000/virt82a17d19/index_htm_files/2.png" alt="" title="" style="width:100%; height:100%;">.
Retina Browsers will render at the intrinsic size and non-Retina ones will have to scaled accordingly.

The downside is you are sending an image that is four time that required.

This may not be a problem if you are also using the same image as a larger pop-up, a thumbnail, in more than one location and in Variants, all at different sizes.
Xara produces different intrinsic sizes for all of these and then, additionally, all the Retina equivalents.
Each HTML fetch has a lag and the overall page render can end up slower.

To do what you are suggesting by adding the the ClassName "xr_xn_" but you also have to knit in the non-Retina path and provide both images.
Edit one and you must edit the other. Change the path...

Acorn

[gcellison]

To do what you are suggesting by adding the the ClassName "xr_xn_" but you also have to knit in the non-Retina path and provide both images.
Edit one and you must edit the other. Change the path...
Acorn

Thanks, Acorn.

I wasn’t sure how the coding worked, but when I isolated it, it appears that the function I mentioned earlier defaults to the non-retina version, but if the conditions are met, it alters the name of the requested file by inserting @2 before “.jpg”. In other words, it seems that the Xara JavaScript function is written to take care of the switch, presumably meaning that the only image requested for the particular device is the one that corresponds, and that choice is automatic as long as the image is assigned the class.

As you mention, I could export all the images at 192dpi, but (as you also point out), this would be a big waste of bandwidth for anyone who doesn’t need the larger version.

I did some additional testing after I posted my question, and it appears to be working as I thought, but I am still not 100% sure.

Thanks for your input!