Loading high resolution images.

On a recent thread it was said the OP would look at ways to load high resolution images for viewers wanting this option.

Quote:

---

I will do as you suggest and add the ability to download the full resolution images for those who wish to examine in greater detail.

---

LINK
It got me thinking what would be the best way to do this.
There were a couple of ways I could think of:

1. Load the high def images into pop-up layers. Problem with this is the content of all pop-ups are loaded on page-load, so it's a big download required even if the visitor doesn't look at them.
2. Load each hidef image into it's own page. No issue on a small site but it could quickly become quite cumbersome if there where multiple hidef images required and very large .xar file size.

Here's my solution. It loads two javascript files, one defines functions and is only required to load once. The second is a javascript array which can contain different array files to load the images.
The demo only uses 4 images at present but they are not loaded until a thumbnail is clicked. (Unlike Highslide that loads both the thumbnail and the hi resolution image at the same time)
Each image is 2400 x 1351 px and is between 500 & 1000 Kb's in size.
The site uses fit to width which I've set to a max of 2400 px ensuring maximum resolution upto that browser size.

DEMO

This is a great example where the answer if supported would be webp file format. Every news site I visit used this file format and it is time for Xara if they really want to be a web design application to add this ability.

Here's an example 165KB webp file that TG software does not support. https://static01.nyt.com/images/2020...y=90&auto=webp

Yes Gary, when I ran the webpage through a site speed test one of the things it mentioned was the use of webp files. This wouldn't be difficult in the situation here as the hi-res photos are held in a 'images' folder and not the index_htm_files folder.

Just quickly loaded the jpgs into a jpg to webp converter. There's a very marked reduction in file sizes see 1001@2x.jpg compared to 1001@2x.webp (higlighted) Same for 1002@2x image.

What impresses me about webj is the photos are very clear and the detail amazingly sharp, while the file sizes as you note are small. How hard would it be to bypass one more smart object and give us something we can really use?

Quote:

---

Originally Posted by Egg Bramhill

Yes Gary, when I ran the webpage through a site speed test one of the things it mentioned was the use of webp files. This wouldn't be difficult in the situation here as the hi-res photos are held in a 'images' folder and not the index_htm_files folder.

---

A useful solution but with all such codings it distracts from the power that Xara already provides. siran and I already bounced ideas around in https://www.talkgraphics.com/showthr...5-Lazy-Loading.

I have taken my final example and placed the big images into pop-up layers and remove the trigger as the pop-up itself is now the trigger: Attachment 128618.
To make it work, I have added the images into a second page but the images can be stored anywhere and can be optimised webp without any changes.

The pattern is:

1. Add the Website Code (head) CSS to your site.
2. For each image, add a new CSS ClassName rule that invokes the image as a background.
3. In a pop-up layer create a sized Box with Placeholder code (body): <div class="lazy ClassName"></div>.
4. Add a Thumbnail to MouseOff, basically, anything that open the image pop-up layer.
5. Embellish with Web Animations, delays and speed of presentation; anything you can add to a layer.

The big image is only loaded when its pop-up layer is triggered.

Acorn

This is something Xara should be doing. User's should not be asked to resort to scripting a function that should be part of a professional program.

Sounds like an update feature that we might actually be happy to pay for ;))

Quote:

---

Originally Posted by jaydear

Sounds like an update feature that we might actually be happy to pay for

---

I'm with you on that. Web Designer Premium owner, and this is the first year I haven't renewed, but certainly would for webp support.

I'm not sure I'm following your thoughts here Acorn. Your demo works very well. It only loads images as required (i.e. Lazy). However so does my method.

Quote:

---

Add the Website Code (head) CSS to your site.

---

Not required by my method, instead it loads a .js file named functions.js on website Head once.

Quote:

---

For each image, add a new CSS ClassName rule that invokes the image as a background.

---

My method does a similar thing loading individual images into a placeholder on a single pop-up layer (not numerous pop-up layers)

Quote:

---

In a pop-up layer create a sized Box with Placeholder code (body): <div class="lazy ClassName"></div>.

---

Mine has a similar placeholder with the following:</div>.<img id="myImg" src="https://parkeston.com/xara/big-images/images/myImg@2x.jpg" width="1204" height="675">

Quote:

---

Add a Thumbnail to MouseOff, basically, anything that open the image pop-up layer.

---

As these thumbnails require to load on page load there is no point in loading them via a placeholder.

Quote:

---

Embellish with Web Animations, delays and speed of presentation; anything you can add to a layer.

---

My metod also allows this but as my aim is to reduce the requirements of pop-up layers to a single pop-up layer then only one transition can be applied.

Quote:

---

The big image is only loaded when its pop-up layer is triggered.

---

Ditto, the same Lazy loading.

@Egg, the difference is yours relies on JavaScript and mine is handled natively by the browser; less to go wrong across different browsers.
Yours is limited to the varying contents of the array for the image, title and description. Mine is still mainly Xara-driven and can be embellished as I tried to show: links, transparencies, delays & animations so I consider my approach an enhancement.
The Thumbs as Placeholders were pure red herrings as I said anything could be the trigger (Bullet 4); I was trying to given pause for people to consider what they could do.
Your point on having many pop-up layers is valid but the weight of them is trivial so the file size will grow slowly and there is next to no abstraction of the presentation of content. You can even drop the image into the Layer, set to Thumbnail size and Optimise. You then make it full size and the images is blurry but good enough to know what it is. When you add the Placeholder code, even that does not get published. The design file is then around 50kB larger; 100 images would add 5MB to the design file size.

For your approach, it can be refactored to:
array-1.js:

Code:

---

var photo = new Array();
photo[0] = ["https://parkeston.com/xara/big-images/images/myImg@2x.jpg","title-0","s0 "];
photo[1] = ["https://parkeston.com/xara/big-images/images/1001@2x.webp","title-1","s1 "];
photo[2] = ["https://parkeston.com/xara/big-images/images/1002@2x.webp","title-2","s2 "];
photo[3] = ["https://parkeston.com/xara/big-images/images/1003@2x.jpg", "title-3","s3 "];
photo[4] = ["https://parkeston.com/xara/big-images/images/1004@2x.jpg", "title-4","s4 "];
photo[5] = ["https://parkeston.com/xara/big-images/images/1005@2x.jpg", "title-5","s5 "];
photo[6] = ["https://parkeston.com/xara/big-images/images/1006@2x.jpg", "title-6","s6 "];
photo[7] = ["https://parkeston.com/xara/big-images/images/1007@2x.jpg", "title-7","s7 "];
photo[8] = ["https://parkeston.com/xara/big-images/images/1008@2x.jpg", "title-8","s8 "];
photo[9] = ["https://parkeston.com/xara/big-images/images/1009@2x.jpg", "title-9","s9 "];

---

Then functions.js is simply:

Code:

---

function Photo(n) {
  document.getElementById("photourl").innerHTML = photo[n][0];
  document.getElementById("phototitle").innerHTML = photo[n][1];
  document.getElementById("spare2").innerHTML = photo[n][2];
  document.getElementById("myImg").src = photo[n][0];
}

---

Your Links then become: <a href="javascript:xr_cpu(4);%20Photo(0);" onclick="return(xr_nn());"> for the first and changing the index to display each other image and associated contents.

Your use of IDs for the placeholder objects will however fail for Variant use (photourl, phototile, spare2 & myImg). You could change the IDs to ClassNames and tweak the get statements to getElementsbyClassName().
Ultimately, you are changing the DOM on the fly and this will impact ARIA as screenreaders will not follow the links readily. You have no ready means of adding Alt text.

Acorn

Thanks for this Acorn.

Quote:

---

For your approach, it can be refactored to:

---

I've thought for a long time that the 'functions.js' file could be reduced but never have enough js knowledge to achieve this. I'll get back to you later on how to impliment this, as well as your suggested 'array-1.js' file refactoring.

What I prefer about my method is that it uses a 'global' functions.js file across the whole site. Then each page loads it's unique array.js file.
I can then easily duplicate that page and have it load it's own unique array file, which alters the image to load, title and text explanation.

Having set up a website in this fashion I no longer need to open Xara to amend the content, just open that page's unique array.js file in notepad++ and change and save and upload to my server and the changes are instant (Ctrl+F5 to avoid cache). I can even keep the array info within a Google sheet, change it there and download as a csv file and easily create the array.js file from there with a bit of tweeking.

Over the next couple of days I'll try to reproduce my Demo using your CSS method which I grasp in the main. One issue I have is with the Head CSS and amending the class content from within Xara's placeholder window. It's to easy to mistype / Apply and end up with the whole thing snafu'ed. I assume you could load this style sheet as an external file and avoid doing this from within Xara?

Quote:

---

Originally Posted by Egg Bramhill

Thanks for this Acorn.

I've thought for a long time that the 'functions.js' file could be reduced but never have enough js knowledge to achieve this. I'll get back to you later on how to impliment this, as well as your suggested 'array-1.js' file refactoring.

What I prefer about my method is that it uses a 'global' functions.js file across the whole site. Then each page loads it's unique array.js file.
I can then easily duplicate that page and have it load it's own unique array file, which alters the image to load, title and text explanation.

Having set up a website in this fashion I no longer need to open Xara to amend the content, just open that page's unique array.js file in notepad++ and change and save and upload to my server and the changes are instant (Ctrl+F5 to avoid cache). I can even keep the array info within a Google sheet, change it there and download as a csv file and easily create the array.js file from there with a bit of tweeking.

Over the next couple of days I'll try to reproduce my Demo using your CSS method which I grasp in the main. One issue I have is with the Head CSS and amending the class content from within Xara's placeholder window. It's to easy to mistype / Apply and end up with the whole thing snafu'ed. I assume you could load this style sheet as an external file and avoid doing this from within Xara?

---

Egg, it's horses for courses. External JS or CSS files can be invoked into any page or globally. I only place everything into Website/Page Head/Body or Placeholders to make it one design file for TG demonstrations. For these, I use an AutoHotKey macro to copy out code from Xara's nasty little textbox view into Notepad++ where styling and clarity is top notch. Another macrokey puts the changed detail backing to the Xara textbox area.

A bit of refactoring on mine.
I put Placeholder code (body) detail in the Boxes displaying the large image. I need only have used special Names, htmlclass="lazy marblesSmall", etc.
I could use a convention of ClassNames to reflect the image filenames and then some JS to generate the require CSS.
Everything would then be static other than the addition of a special Name to a shape.

My red herring Thumbnails were me also automatically moving things out of the HTML file to make the download time far faster.
This decoupling allows the images for the Thumbs to be changed outside of the Xara design file; another great time saver.

Acorn

Very impressive Egg.

I should probably move this thread to Dear Xara but I am not sure anyone even looks there.

Quote:

---

I should probably move this thread to Dear Xara but I am not sure anyone even looks there.

---

TG members do Gary, it's just that Xara devs never do.

Getting really tired of Xara's new "improvements" and New Features" that achieve no overall gain to the fluidity and real improvements to the software.
Would gladly swap: New & Improved Handles, New Content Type: Diagrams, Paragraph Borders & Backgrounds for the ability to handle webp files....
Most of my sites are portfolio sites and this would be perfect for clients viewing portfolio images an large desktop monitors.

I agree LGF but there's nothing stopping to using them now if you have so many portfolio image websites.

See attached.

Affinity Photo have announced they will be adding webp to their export filters in the next major release. Not there yet but another route to converting jpgs tp webp.
Come on Xara!

LINK

you can already open a webp in AF and save it as another file type - its good that they are adding this to their export

@ HD Yes you can but you currently open a jpg and save it as a webp image.

Meanwhile here's a great online convertor:

LINK

Quote:

---

Originally Posted by handrawn

you can already open a webp in AF and save it as another file type - its good that they are adding this to their export

---

You can do the same in the browser and IrfanView. A Copy & Paste will add it in as a Bitmap to your Xara design.

If you want to embed your local filestore webp into your Xara design, there is a tricky way:

1. Create a small Rectangle as your intended Thumbnail.
2. Use Web Properties > Link > Link to file > Browse to webp & Apply.
3. Immediately Link: Do nothing & Apply.
4. Web Properties > Placeholder > HTML code (body): <img src="index_htm_files/webp" style="width: 100%; height:100%;" />
5. Clone and make larger and place on a new Layer.
6. Link from the Thumbnail to the new (pop-up) Layer & apply Settings.

You then only will reference the webp through your published or exported website:
Attachment 128672

Things to note:

1. You need to keep/know the same image ratio as your webp.
2. The Placeholder image will not appear so you are stuck with a coloured box. You could use the Copy & Paste as I described above for the Thumbnail. Do not do it for the larger image & Optimise Images too.
3. webps are typically far smaller so embedding a portfolio does not blow the Xara design up as much as with JPEGs/PNGs.
4. Do check all works with all your browsers.

Acorn

thank yoou for that

of course my design would not be a website but good to konw ;)

I'm having problems following that Acorn. Any chance of a xar file?

Quote:

---

Originally Posted by Egg Bramhill

I'm having problems following that Acorn. Any chance of a xar file?

---

Egg, here you are:

:pointAttachment 128673

Do note you need to attach your own webp file or even use the Link to the one I compressed.
If still unsure follow the Steps with a new design file.
webps do not show in early versions of Xara Preview as these use IE.

Acorn

Hi Acorn, still can't follow you and get this to function:

Quote:

---

Originally Posted by Egg Bramhill

Hi Acorn, still can't follow you and get this to function:

---

Egg, I've tried my own instructions again with another image file and all works.

Either of these are good:
<img src="index_htm_files/bg_alt_4.webp" width=100% height=100% />
<img src="index_htm_files/bg_alt_4.webp" style="width: 100%; height: 100%">

The embedded file is in the exported index_htm_files folder:

Filename Type Size (kb)
.. (Parent Directory) <Directory>
1.png PNG Image 27.21 KB
xr_main.css Stylesheet 3.94 KB
xr_text.css Stylesheet 0.02 KB
xr_fonts.css Stylesheet 0.00 KB
xr_fontsie.css Stylesheet 0.00 KB
png.js Javascript 1.17 KB
roe.js Javascript 58.74 KB
ani.css Stylesheet 21.23 KB
bg_alt_4.webp WEBP File 187.12 KB
xr_files.txt Text File 0.05 KB
0.gif GIF Image 0.04 KB

Check the embedded file is in a folder under %localappdata%\Temp\XaraTempSupportFolders when your design file is open.

Acorn

P.S. The Link to flowers.wepb in https://www.talkgraphics.com/attachm...3&d=1610628508 has time-expired.

my there are times I am glad I only have to sync asset to soundrrack ;)

Quote:

---

Originally Posted by letsgofishing

Getting really tired of Xara's new "improvements" and New Features" that achieve no overall gain to the fluidity and real improvements to the software.
Would gladly swap: New & Improved Handles, New Content Type: Diagrams, Paragraph Borders & Backgrounds for the ability to handle webp files....
Most of my sites are portfolio sites and this would be perfect for clients viewing portfolio images an large desktop monitors.

---

Sorry for the very late "thank you" - I've got AF and it's great - as is Affinity designer...

Support for WebP on export and publish is now available in Xara Designer Pro+ https://www.talkgraphics.com/showthr...e-21-0-0-61527

Download trial to give it a try here: https://www.xara.com/pro-plus-download/

Quote:

---

Originally Posted by MB365

Support for WebP on export and publish is now available in Xara Designer Pro+ https://www.talkgraphics.com/showthr...e-21-0-0-61527
Download trial to give it a try here: https://www.xara.com/pro-plus-download/

---

Do read https://www.talkgraphics.com/showthr...w-WebP-Support.

Acorn