Working with modern Image File Types

[Acorn]

At present your XDA effectively handles images that are JPEG and PNG. It also coverts SVGs to Text and Objects.

If you work with very high resolution graphics, as many do, Xara impacts on SEO by stripping away the filename.
Yes, there is the new Image Filename capability but it is quite buggy as I have documented in the dear Xara Forum.

The next difficulty is file dimensions.
Xara will adjust your hard-earned images down to 96 dpi and with Full Width Stretch, you loss crispness on high resolutions.
Equally, a SVG is probably rendered as an image, destroying its whole purpose of being a vectorised object with a vector program. This is more loss of definition.

Lots of files means lots of design file size.
Sadly, Xara has not yet managed to deliver a scalable product in either web design or DTP.

Since ever, therefore backward compatible, Xara has built in the concept of a Support Folder.
Basically, if you use Web Properties > Link > Link to file, the picked file is stored external to the design file.

I have started to used this to good effect elsewhere: restoring Squishy/Squashy to v15.0 users & document versioning .
The concept is not difficult, just obscure.

This is a simple workflow:

• Open a new design.
• Create an object and Web Properties > Link > Link to file to any small file. This can be deleted later.
• Save your design. Let's call it Acorn.xar.
• Immediately beside Acorn.xar, you have created a folder called Acorn_htm_files/.
• Open in and delete the file you linked to, if you want to. I keep log.xara for my documentation.
• Drop all your large images into the Acorn_htm_files/. As many as you like and the design file Acorn.xar is unchanged.
• I use a tiny Thumbnail Generator against all these image files with a Width of 128px and an extension of THUMB and Xara can accept. (https://www.codeproject.com/articles...rocess-thumbna)
• When you drag these into a design, you get a small Bitmap that can be scaled to the final size you want. They will be lumpy but these are just going to be Placeholders. The KEY point is the design file stays small.
• I then use https://squoosh.app or any compression tool to generate .webp or .aviv files; the latter do not render in most browsers yet. These reduce file sizes considerably.
• The final trick is the utility I am now presenting:
  JS - Image Placeholder Generator.xar
• Drag a clutch of your newly-minted WebPs onto the button in Preview (probably safer in a real browser and not Xara's stale IE instance) and each file now has the required Placeholder body (code) to add into the THUMB images.

Yes, a lot of knitting but you can now squish & squash all day, deliver crisp images in stretches and pop-ups, handle newer file types, treat SVGs as vectors and keeps the design file well under control.

I am sure there are many more uses.

I am still experimenting with a THUMB replacement service where the true file is added in as the source so all current Xara transforms are honoured. This will bypass the need for introducing Placeholders for image files.

That's for another day.

Acorn

---

The fuller Placeholder code ought to be:

<picture>
  <source srcset="index_htm_files/Acorn.avif" type="image/avif">
  <source srcset="index_htm_files/Acorn.webp" type="image/webp">
  <img src="index_htm_files/Acorn.png" alt="AVIF full example with fallbacks" width=100% height=100% />
</picture>

to handle fall-backs when you have all such file types at hand.
The design file for this is all of 13.7kB with the Support Folder holding three images (avif, webp, png) of sizes (40.6kB, 135kB, 378kB).