So Gary, the remaining 40% just shut their eyes and hummed?

@Bill, you have to understand what Xara offers.

On Web Blocks, not everything in a Main WB need appear in a Variant.
You can make them skinny so Mobile should be treated as a one long page or pages.

What you set up in Main for a fantastic Transition website may not be effective for a Variant where a Scrolling website would be better.
Xara does not allow a mixing of Conventional/Scrolling/Presentation/Transition.
I far prefer Conventical as each page is its own HTML page with its own Background.
Yet, Mobile rarely needs fancy transitions or Backgrounds so v. Scrolling is good enough.

So you can have a joint design for both Main and Mobile Variant as Transition.
When happy, clone off and delete Main and change it to Scrolling and you have a mobile site.
Clone off the Mobile variant and you have a main site.

You now have to work out how viewers access your Mobile site if they land on your Main, with all its downloads in one file!
You've lost the war.

What is needed then is a generic landing page (a one-page index) with Main & Variant, or easier, Scale to fit width that allows for a viewer to choose.
You can also code for an automatic jump that detects the browser width and pick the right presentation Main or Mobile.

Back to the image question.
I might still keep a Xara Main and Mobile variant if I could run both as Conventional.
The trick is to ensure all the Mobile pages are long enough to keep the happy thumb scrollers happy.
When they hit page bottom, you have a View More... link.
If they scroll up, you might consider when they hit top to have a pop-up to ask if they want to Scroll up more..., or again, a link.
I've not tried but it is probably possible to set this website scrolling to be seamless.

So with Page Speed Insights, it will only be looking at an individual page so Mobile will score higher.
If you include loading='lazy' for your major images then you should be cooking.
Still not easy to do: https://www.talkgraphics.com/showthr...e-Lazy-loading and @Egg's demo at the end shows what you need for external image linking.


  • Big first assumption, the image is not going to be trimmed or tweaked in Xara.
  • Drop an image onto the design as normal and scale.
  • Now select its Placeholder and link to the source file with this <img> Tag:

<img id="unique image identifier" src="<source path>/<A nice image filename>.jpg" alt="describe the image" loading="lazy" width=100% height=100% />

  • The image still renders but is not part of the design as you are now linking to it externally.
  • There should always be a first and last image that are not lazy loaded.
  • You can post-process the image with CSS.


Now you can have tons of images...

Acorn