Image Lazy loading

[Tessi]

Hi Acorn

Thank you very much for the nice welcome.
I have the version: Xara Web Designer+ 23.0.68981 SL x64 Apr 3 2024
Is this sufficient?

I have jpg images throughout the website that are displayed by a code in the htasses file in webp.
I hope that doesn't interfere with lazy loading?
And yes, Xara should have implemented lazy load long ago.
Others finally did it too.

Tessi

[Acorn]

Tessi, your version is more than sufficient.

You'll have to explain what you mean by JPEGs coded in the .htaccess as WebP.

If you have ticked the WebP option in Web Properties > Websites > Include WebP images, then Xara publishes both JPEG and WebP so you can picked either as WebP is fully rendered in all major browsers for over three years now. Both filetypes are uploaded but are only used when called so you could pick 'n' mix.

Acorn

[Egg Bramhill]

Perhaps this Acorn?:

LINK

[Acorn]

Perhaps this Acorn?:

LINK

Cheers Egg, totally no need for this for Xara rendering checks if the browser supports WebP and handles it from there.

Acorn

[Egg Bramhill]

No Acorn. In your example file your placeholder specifically calls for a jpg image:

<img src='index_htm_files/bear.jpg' width=100% height=100% loading='lazy' />

Therefore it will never load a .webp image, only the bear.jpg image. The script I linked to endeavors to call the webp file if the browser can handle it but if it can't (i.e. Safari) it loads the .jpg equivalent.

Not that I've got that js script working via .htaccess though

[Egg Bramhill]

On the issue were you use the default.jpg
I believe it's pointless having all images lazy loading. You need to have images within the 'above the fold' load normally which is what I've done in my demo. The image tiger.jpg is not lazy loaded and all the others are.

I find you always need a non-lazy image near the page bottom to stop the first lazy one loading right off.

I can't understand why you state these images need to be placed at the bottom, it appears to work fine if they are within the 'above the fold' section.

DEMO

[Acorn]

On the issue were you use the default.jpg
I believe it's pointless having all images lazy loading. You need to have images within the 'above the fold' load normally which is what I've done in my demo. The image tiger.jpg is not lazy loaded and all the others are.
I can't understand why you state these images need to be placed at the bottom, it appears to work fine if they are within the 'above the fold' section.
DEMO

Egg, it may simply have been that I had no "real" images in my design and the web page or Google needed to get its teeth into something.

Of course, you would never waste processing time having images above the fold lazy loaded.
If your images are all external (a good thing) then simply remove loading="lazy" from the placeholder <img> code.

Acorn

[Egg Bramhill]

I agree with Acorn's post above but it's also worth considering it's fairly easy to create your own slideshows and loading them into your main pages using placeholders.

In the link below the left-side slideshow is created using a website transition. The right-side slideshow uses a slip / vertical transition. Any other transition loads all the images across 9 pages on loading the first image but I've avoided this using lazy loading, so the images are only loaded if the viewer clicks the next button.

These pages load fast as they are only loading an image if it's required. The PageSpeed Insights scores the mobile version as a 91% performance, the desktop version as 100% performance. Although the images look identical they are completely separate. Of course the remainder of the screen is created using a screen-grab so in reality the mobile version would load faster if it where text etc.

Image quality is fairly low as they are only enlarged screen-grabs of your slideshows. With the originals it would be far better.

LINK

[Acorn]

I agree with Acorn's post above but it's also worth considering it's fairly easy to create your own slideshows and loading them into your main pages using placeholders.

In the link below the left-side slideshow is created using a website transition. The right-side slideshow uses a slip / vertical transition. Any other transition loads all the images across 9 pages on loading the first image but I've avoided this using lazy loading, so the images are only loaded if the viewer clicks the next button.

These pages load fast as they are only loading an image if it's required. The PageSpeed Insights scores the mobile version as a 91% performance, the desktop version as 100% performance. Although the images look identical they are completely separate. Of course the remainder of the screen is created using a screen-grab so in reality the mobile version would load faster if it where text etc.

Image quality is fairly low as they are only enlarged screen-grabs of your slideshows. With the originals it would be far better.

LINK

Egg, valid and useful to the discussion.

I have never liked using this approach as it mucks up the browser's page history too much for my liking, especially if the presentations are automated.

Acorn

[Egg Bramhill]

One other con re my lazy-load method is the need to use .jpg's in case the visitor is using Safari which can't universally load .webp images. I have looked for code that inspects the viewers browser and supplies the most suitable image but it's very convoluted.