Loading high resolution images.

[Egg Bramhill]

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

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

[gwpriester]

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.

[gwpriester]

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

[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.

[Acorn]

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: CSS - Full Xara Lazy Loading Layers.xar.
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

[gwpriester]

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.

[jaydear]

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

[Egg Bramhill]

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.

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.

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)

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">

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.

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.

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

Ditto, the same Lazy loading.

[Acorn]

@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:

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:

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

[Egg Bramhill]

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.