I think I’ve arrived at a solution… perhaps not the most elegant or easiest, but it seems to work.

The trick seems to be to convert the lightbox images (on the individual layers) into placeholders that reference the actual image files.

The code I placed in the placeholder body html is:
<img src="index_htm_files/***.jpg"
style="position:fixed;
object-fit: contain;
left:50%; top:50%;
transform:translate(-50%,-50%);
width:1500px;
max-width: 80%;
max-height: 80%;">

You have to make sure the image files are in the index_htm_files directory. This can be accomplished by putting them in a “junk” page and giving them the appropriate names. I noticed that drag / dropping the image onto a rectangle doesn’t work… apparently Xara has a bug of not allowing naming (via Name > filename="***" or the new Web Properties > Image Filename feature). The export assigns a numerical filename that overrides what you put in. BUG REPORT!!! But if you drag and drop the image directly onto the page board, naming it is possible.

An extra benefit to this method is that you can also make the image responsive to the size of the user’s browser (the code with the max-width and max-height).

As it is late, I am stopping my experimenting. Tomorrow I will see how well Xara responds if I assign the placeholder a class and move the style coding into the website head html. Fingers crossed.