Reducing image size when it's shared across variants

Hi all,
Apologies for yet another question. I'm trying to reduce the size of some of the images I have on my pages. These are shared between my 'desktop' and my 'mobile' variants. If I change the image sizes using the 'Utilities>Optimise all images' option, does this change the image size across both variants? Or would I need to be looking at the destktop version and it changes only the image size for that variant? I figure (possibly incorrectly) that I need the larger size for the 'desktop' variant but can ramp down the image quality for the smaller viewing size 'mobile'.

Or am I better 'unsharing' the image across variants and reducing the mobile variant version accordingly?

Hope this makes sense. I'm currently getting a Chrome audit of 67 percent on my home page. (Thanks for that tip https://www.talkgraphics.com/showthr...SEO-fo-xara-WD Gary)

Yours,
Robert

As far as I can determine, you XDA is smart enough not to care that you have shared across variants or that you have optimised all photos.
The XDA is optimising the image in the Bitmap gallery and then all your instances (e.g., Main & Mobile) are constructed from that.

The only way to separate this out is to create a Bitmap Copy.

I therefore believe you are good to go without altering anything.

Acorn

In my experience, “Optimize all” will treat the images in the two variants independently… unfortunately, even if they are not different sizes. Each will be optimized for the size at which it appears in its variant. (as Acorn indicates) So, you’ll end up with two files for the image when you export (one for each variant), and two more (x2) if you select export retina bitmap.

If the files are identical in size for the two variants, you can give the two copies a shared filename, and it will only export one copy. Be careful, however, because if you use a shared filename, and then you later decide to resize one of them without deleting the name, one of them will overwrite the other, and one of your variants will show the wrong size image.

Quote:

---

Originally Posted by gcellison

In my experience, “Optimize all” will treat the images in the two variants independently… unfortunately, even if they are not different sizes. Each will be optimized for the size at which it appears in its variant. (as Acorn indicates) So, you’ll end up with two files for the image when you export (one for each variant), and two more (x2) if you select export retina bitmap.

If the files are identical in size for the two variants, you can give the two copies a shared filename, and it will only export one copy. Be careful, however, because if you use a shared filename, and then you later decide to resize one of them without deleting the name, one of them will overwrite the other, and one of your variants will show the wrong size image.

---

A good answer, which I omitted as it has the stated shortfall.The new XDPXv17.0 Image Filename does get around this difficulty if the images are identical (only scaled) but introduces new images for any crop or rotation.

Acorn

Quote:

---

Originally Posted by Acorn

A good answer, which I omitted as it has the stated shortfall.The new XDPXv17.0 Image Filename does get around this difficulty if the images are identical (only scaled) but introduces new images for any crop or rotation.

Acorn

---

Very good to know. I haven't explored the intricacies of the new filename option yet. I'll keep your advice in mind.

Optomizing images has no effect on the produced web image, it merely reduces file size of a saved .xar or .web file.

Quote:

---

Originally Posted by Egg Bramhill

Optomizing images has no effect on the produced web image, it merely reduces file size of a saved .xar or .web file.

---

Perhaps it has changed. When I began using WDP v10, I didn’t optimize images for the website export that I published the first time. When I accessed the site on line, the images took too long to download. Afterwards, I optimized all images, and the time was more typical.

I checked the file sizes, and indeed, WDP had exported them much larger before optimization.

In other words, optimization reduced the size of the bitmap stored with the project (.web / .xar), but it also determined the resolution of the images exported for the internet.

If that’s no longer the case, Xara must have changed the functioning of the website export tool.

Quote:

---

Originally Posted by Egg Bramhill

Optomizing images has no effect on the produced web image, it merely reduces file size of a saved .xar or .web file.

---

That is true Egg, until you decide to double the size of the image on the page.

Always keep a master image for backup.

Acorn

Yes, agree there Acorn so I rarely use the optimise option.

Quote:

---

If that’s no longer the case, Xara must have changed the functioning of the website export tool.

---

I can't recall any changes but I'm of an age were I can't recall much at all these days. The current position is that optimising images within the xar/web file reduces the images resolution to 192 ppi when saving to file to your HD.

So guys, when optimizing within xara reduces file size of the images but does it mess with image quality? If so then when we output to web, it also changes the image quality once again? Two times? All this could have been avoided if Xara allowed us to optimize our images outside of xara and output to web as we wished untouched/virgin ;)

Quote:

---

So guys, when optimizing within xara reduces file size of the images but does it mess with image quality?

---

Yes, it does it reduces the image in Xara from a 300ppi image for example to a 192ppi image. But this is what occurs anyway if you've resized the large image. On publishing it creates either 96ppi image or a 192ppi image if using HiRes images on the site.

So it screws up the clarity of the image twice.

I don't think it screws up the clarity twice Behzad, just once when optomising the image from xxxpx to 192px. From there it just gets exported with all the same clarity.

Dear Egg, but if from 190 it goes down to 96 dpi for the web, for sure it is doing it again. As a result image quality reduces with size.

If you have a 600ppi image in your xara web page and reduce it to a size required to display on your webpage, Xara, on publishing will create a 96ppi version of this image. If you select to also upload Retina images it exports that same 600ppi image but at 192 ppi.

So if you optimise that 600ppi image it's saved within the .xar file aa a 192ppi image. It will create two images, one at 96ppi and one at 192ppi.

Further if you use the same image within a mobile variant, reduced in size, it will create two more smaller images at 96ppi and one at 192ppi.

There will be no further degradation beyond that point.

Thanks Egg.

Quote:

---

Originally Posted by Egg Bramhill

If you have a 600ppi image in your xara web page and reduce it to a size required to display on your webpage, Xara, on publishing will create a 96ppi version of this image. If you select to also upload Retina images it exports that same 600ppi image but at 192 ppi.

So if you optimise that 600ppi image it's saved within the .xar file aa a 192ppi image. It will create two images, one at 96ppi and one at 192ppi.

Further if you use the same image within a mobile variant, reduced in size, it will create two more smaller images at 96ppi and one at 192ppi.

There will be no further degradation beyond that point.

---

Thanks Egg, that’s good to know.

Hi all,
Back after two weeks of cr*(py migraines. Thanks for all the help. I've reduced my images and even deleted a few but I'm still getting that weird issue where, despite what someone showed on a video clip screenshot of my mobile variant in action, still is showing up weirdly on both my friend's iphone and on mine. We've cleared history and I've republished it multiple times. I still get big blank spaces where images should be and even some of my text isn't formated properly (as a 'click here' button). I've no idea what's going on but the site looks poor in mobile format right now and everything looks fine on Chrome at 'mobile' size when viewed on my desktop. I've no idea what's going on and had hoped that reducing the images used/removing some would really help.
www.historicedinburghtours.co.uk if anyone has any further suggestions? Much appreciated as always.

As you have reworked and tested so much, you need to clear your browser cache with Ctrl+F5.

Acorn

Thanks Acorn,
Does that achieve the same as clearing my history in my phone's safari browser as that's the device I'm testing it on? I can also purge the cache - would that help?
Thanks again.

Quote:

---

Originally Posted by forresthowie

Thanks Acorn,
Does that achieve the same as clearing my history in my phone's safari browser as that's the device I'm testing it on? I can also purge the cache - would that help?
Thanks again.

---

Yes and it should help.

Acorn

Hi there, cleared my iphone Safari cache/history and did it in the application settings too. Purged the cache on my 1and1 server. Switched off my phone. Website still displaying almost none of the images. Seems to be safari and seems only to be safari on iphones (my friend's in Germany and what she's sent me looks like what I have). I'm at my wits end with this. What I get on my phone (broadband or network makes no difference) is not what I am publishing and isn't what I get on my website variant in Chrome or IE or Edge. I could understand it if the images were large and the page was really slow (although it IS slow and I'm looking into changing my .htaccess file to leverage browser caching AND image compression) but even the 'click here for more information' text over a shape (to make a button) is displaying incorrectly.
Apologies for going on with this one - I just don't know why it's showing so badly on (typically) a browser on a popular device.

I think maybe I should make a new thread for this as the original topic has changed (although the original thread topic was my attempt to solve the problem). Hope this is more use for others.