The challenge of mobile images - discussion

I’ve tested a number of sites from TG and many others with Page Speed insights. I’ve adopted @eggs ideas with a graphical header for branding. And as roll ahead the % of phone browsing continues to rise. Admittedly I usually have my tablet in my lap; but I’m certainly not everyone.

The challenge is that people want to see pictures while phone browsing; or do they?? My designs are bordering on one image per page. Sure I’d like to add more, but I simply cannot. One makes images as small as possible but it’s a knife edge.

Perhaps phone browsing is for branding and contact only? Maybe viewers on phones want to see what a client does, and not what a client did? Xara would have most builders believe that a 1200px site, would have all those images on mobile; especially in a block format. I’d say respectively it’s incorrect.

Back to the question. How are important are images on mobile? How small should they be?
Are we obsessing with speed too much on mobile?

I did a poll recently on one of the stereogram sites that we post images on. 40% of the respondents indicated the viewed our images on cell phones. Insane. But that is the reality. More and more people are using their cell phones as a computer. And unless you need a computer for work such as graphics or writing, a cell works very well. I think only 20% said they viewed on a desktop computer.

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

@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

Just a mechanics question. After you drop an image into the design, you select its placeholder. Do you mean select the image, turn into a placeholder and add code.
In the placeholder the code you mention would go into the body of the placeholder?

W

Quote:

---

Originally Posted by bwood

Just a mechanics question. After you drop an image into the design, you select its placeholder. Do you mean select the image, turn into a placeholder and add code.
In the placeholder the code you mention would go into the body of the placeholder? W

---

Bill, all yes.

Acorn

Bill, here is a method that breaks down the approach, hopefully into bits that are easier to grasp.

All your master hi-res images are in a Masters folder.
You drag an image from Masters onto your design page and it renders as normal.
What you have created is a replica of the Master image as you probably adjusted its size to fit the page.
It will be given a numeric filename unless you apply its Image Filename.
At the same time your Master image is now part of your design file and occupies a large part of the design file size.
Yes you can Optimise Images but unless you do have a Masters folder and subsequent changes will max out as this images 96/192dpi for its fitted dimensions.

Instead, you create a box the size of what you want the image to appear as on the design page.
You then use its Web Properties > Placeholder > Replace with graphic file and Browse to the file in the Masters folder.
What you now have, when you save your design, is an external assets folder containing the master image, full size.
Nothing is added to the Bitmap gallery unless you have ticked the Regenerate option. This makes a scaled replica of your master image, which can still add into the the design file storage.

Undaunted, you realise that you can use a free tool to create thumbnails of your master images and create a sub-folder to hold them.
Assume they have the same image filename or something very similar for easy reference.
You can now drag the thumbnail and resize it to what you want.
You have no calculations to perform but you have to link to your masters somehow.
A browser will not use a local filestore link as this is a security risk.

Luckily, the Replace with graphic file option can be put to use.
This time use it with any shape on the design page for any graphic file at all.
Ensure Regenerate is unticked to avoid any addition into the Bitmap gallery.
Now locate the newly created external assets folder where this image has been copied.
Delete that and instead copy in all the master images you expect to use.

Here comes the sleight of hand.
For each resized and placed image in your design, open its Placeholder Body and insert:
<img id="unique image identifier" src="<source path>/<A nice image filename>.jpg" alt="describe the image" loading="lazy" width=100% height=100% />
Change the id, set the src to 'index_html_files/<master-image>.<ext>, describe the image in alt.

For your Hero image, remove the loading="lazy" parameter.
This allows Lighthouse and Insights to be happy to find an image early on.
Do the same for any image within the height of the expected viewport, i.e., before the client scrolls down.

You can use Xara to create the thumbnail.
Drop a master image onto the design. Yes, mega size alert.
Clone it and make the clone very small.
Create a Bitmap Copy of this small clone. try 64px for its longest side.
Resize and fit to fully cover the original.
Delete the original.
When you save and re-open the design file, the original image will have disappeared from the Bitmap gallery, as any unused bitmaps (nowhere on any page or layer) will be deleted from the file.

A long way round!
What you are trying to achieve is all you large images to end up as external assets.
You can then drag it onto the design, and make a very small thumbnail copy.
Then you can Replace with graphic file and rescale over the original.
When you delete the original and save and re-open you have a lumpy thumbnail in the design but on render, the original in all its clarity.
The lazy loading step is the killer addition.

Acorn

That’s a clear example even I can understand Acorn. Step by step for even non coders. Thanks.

Acorn said …… 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.”

I like the above idea Acorn. But I don’t understand “as transition” and clone off and delete. I’m certainly not an expert, but a one page mobile site might also be achieved by putting everything on the index page. The other pages remain in the design but no linkage in phones. Correct?

Quote:

---

Originally Posted by bwood

Acorn said …… 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.”

I like the above idea Acorn. But I don’t understand “as transition” and clone off and delete. I’m certainly not an expert, but a one page mobile site might also be achieved by putting everything on the index page. The other pages remain in the design but no linkage in phones. Correct?

---

Bill, it is a method to ensure both site designs have the identical URLs to each page. You then have a one-to-one relationship so you could manfully force a change to either path to toggle between the main and the mobile site.

It is more of a problem for a conventional main to a scrolling mobile of just one page; you would have to juggle main pages with different URLs to a mobile one-page site that had targets instead.

I reckon I'll have to build a few examples...

Acorn

Acorn … clarification on your chunk of code ….

Here comes the sleight of hand.
For each resized and placed image in your design, open its Placeholder Body and insert:
<img id="unique image identifier" src="<source path>/<A nice image filename>.jpg" alt="describe the image" loading="lazy" width=100% height=100% />
Change the id, set the src to 'index_html_files/<master-image>.<ext>, describe the image in alt.

The image <a nice image filename> is the name of my file. No changes to the image id correct? Alt is my description of pic.

This is a fascinating solution.

Thanks
W

Quote:

---

Originally Posted by bwood

Acorn … clarification on your chunk of code ….

Here comes the sleight of hand.
For each resized and placed image in your design, open its Placeholder Body and insert:
<img id="unique image identifier" src="<source path>/<A nice image filename>.jpg" alt="describe the image" loading="lazy" width=100% height=100% />
Change the id, set the src to 'index_html_files/<master-image>.<ext>, describe the image in alt.

The image <a nice image filename> is the name of my file. No changes to the image id correct? Alt is my description of pic.

This is a fascinating solution.

Thanks
W

---

Bill, say you have a design file, A.xar.
When you publish, you render as .html so you publish your resources to index_html_files. Else we are looking at an index_htm_files folder.
Your image is B.png and you have used the Placeholder > Replace with graphic file option.
When you save your design, B.png is copied into an A_xar_files folder.
When you render, B.png is included in the index_html_files folder.

The <img> Tag should be made with an id value that is solely associated with A.png; the alt text can have a duplicate elsewhere.
The src is then just the render path and filename: index_html_files/A.png.
A and B can be any legal strings for a filename.
png could be jpg, webp, gif or any format a modern browser can handle even is Xara cannot.

Acorn

Got it. Very cool. Its a great tool. I'm messing with it. I'm making the hero image first -- THEN creating a thumbnail. The placeholder alone will stretch and deform the original image. Then draw a rectangular shape and replace with the thumb. Image quality is retained.

@acorn - furthering this discussion with a questions.

You can make a thumbnail with the process that you mentioned. But don't you have to have the correct dimensions of the photo before placing into the placeholder? Lets say you want an larger image on a mobile page. You find the dimensions of the placeholder you want - then fit a photo to those particular dimensions. Then 'replace with photo' in placeholder, and throw that saved photo into the placeholder. Of course you do not regenerate image.

If you make a thumbnail - then bring the thumbnail into the placeholder, the thumb that you made must be the correct dimensions of the placeholder. Anyway that's what I'm find after following your instructions. It certainly does save a lot of space - but I'm finding that master photo > thumbnail has to be the correct dimensions of the placeholder, especially if its a hero image. Make sense ?

Quote:

---

Originally Posted by bwood

@acorn - furthering this discussion with a questions.

You can make a thumbnail with the process that you mentioned. But don't you have to have the correct dimensions of the photo before placing into the placeholder? Lets say you want an larger image on a mobile page. You find the dimensions of the placeholder you want - then fit a photo to those particular dimensions. Then 'replace with photo' in placeholder, and throw that saved photo into the placeholder. Of course you do not regenerate image.

If you make a thumbnail - then bring the thumbnail into the placeholder, the thumb that you made must be the correct dimensions of the placeholder. Anyway that's what I'm find after following your instructions. It certainly does save a lot of space - but I'm finding that master photo > thumbnail has to be the correct dimensions of the placeholder, especially if its a hero image. Make sense ?

---

Bill, yes all sensible.

I said:

Quote:

---

Originally Posted by acorn

You can use Xara to create the thumbnail.
Drop a master image onto the design. Yes, mega size alert.
Clone it and make the clone very small.
Create a Bitmap Copy of this small clone. try 64px for its longest side.
Resize and fit to fully cover the original.
Delete the original.
When you save and re-open the design file, the original image will have disappeared from the Bitmap gallery, as any unused bitmaps (nowhere on any page or layer) will be deleted from the file.

---

The "Delete the original" is really two-fold. From the Bitmap gallery and the design page. When you do this, the image on the design page reverts to the Xara Default. You then delete that. The other way round also works. What you are doing is removing the large image from being stored inside your design file.

Apologies for the lack of clarity.

Acorn

Certainly getting the hang of this now Acorn. It’s been parsing the mobile size considerably. On the pasteboard I’m using arrow indicators where placeholder images are used (for my benefit only). Certainly can be used on the larger variants as well.
My work flow - I bring the image in and size it. Note the size, and export the photo and save. Now delete the photo from the design. Draw a rectangle the size of the photo, in placeholder replace with photo, generate image unchecked.

Very handy tool. I’m still a bit foggy on the thumbnail idea, but the replace photo option is very handy.

Quote:

---

Originally Posted by bwood

Certainly getting the hang of this now Acorn. It’s been parsing the mobile size considerably. On the pasteboard I’m using arrow indicators where placeholder images are used (for my benefit only). Certainly can be used on the larger variants as well.
My work flow - I bring the image in and size it. Note the size, and export the photo and save. Now delete the photo from the design. Draw a rectangle the size of the photo, in placeholder replace with photo, generate image unchecked.

Very handy tool. I’m still a bit foggy on the thumbnail idea, but the replace photo option is very handy.

---

Bill, to avoid any recording, add the <img> Tag into the Placeholder without any Regenerate set and then delete the image from the Gallery.

You should document all your steps as it is still a pain and messy.
I can then validate them for you.

For instance, is the master image in its own non-Xara path or in the Xara External Assets folder?

Acorn

Working on that Acorn. I have my Master images in their own folder. All very large as I do my own photos. Then after correctly sizing and processing I place them in another folder, usually a folder marked “mobile”. I think that’s the external.

I’m working on another museum. Based on the lumber industry. All the images on the phone variant page 1 are placeholders. I’m not finding an exceptional speed increase. Yet, on the full variant I am.

Www.Nipawinmuseum.org