Discussion on different images on different variants

[bwood]

I’m having a debate on another graphics forum regarding different images on different variants and changing download times.
I’m more of a visual designer, and often revert to different images on different variants, or I’ll copy and paste the same header image on different variants, rather than using a repeat option.
The debate is this.
If one uses different images, or a copy and paste option from large to small variances it will drastically increase the download times of a desktop or iPhone user.
In my experience I’m not finding this at all. Some larger images of course may take a second longer to load, but overall with Xara I do not experience this problem.
Has anyone encountered longer load times using different header images on different variances working on the same page.
Many Thanks
-Bill

[Egg Bramhill]

Not 100% sure I'm following you Bill.

When you create desktop @ 1500px with an image in Xara, say it's 1500px x 1500px.
You then create tablet variant at 1000px and resize that image to 1000px x 1000px (Doesn't matter if you share or Copy/paste)
Similarly you do the same for a mobile variant at 500px and resize it to 500px x 500px (Doesn't matter if you share or Copy/paste)

When you export the site there are three images created in the index_htm_file, one for each variant, each with a different file size.
When a visitor opens your site the DOM determines his/her screen/browser size and serves up a single image dependant on that. It doesn't load all 3 images.

This is even more important to understand now that we can create WebP images. Xara may create 4 seperate images for each variant size (12 images) but it only serves up one of the 12.

Of course things get more complicated when you go Scale to Fit Width

[Acorn]

Bill, say you have created an image called Friends and it is PNG format.

You could add it into a Placeholder with Web Properties > Placeholder > Placeholder > replace with graphic file: Friends.png.

The attached has Friends.png weighing in at 562kB.
But there is only only image called six times.

They are all on one page but normally you would only have one of each across three Variants.

The seventh is a Full Width Stretch and it is still using the same file.

Friends.zip
Unzip and run the design.

Acorn

[pauland]

I think there is some confusion here, or I may be the confused one.

If I understand correctly Bill is talking about a conversation with non-Xara users.

There are three techniques that may be followed when considering creating images for multiple formats.

1) Use one image across all formats
2) Use a smaller image for mobile formats
3) Use a cropped image or alternate image for mobile formats.

In the case of 1) the argument is that a good quality desktop image penalises mobile downloads when an alternative version would reduce the download payload and be more suitable for a mobile format.

In the case of 2) we are simply reducing the mobile payload but still maintaining quality.

In the case of 3) we are adapting content to suit the format AND reducing payload and quality.

So imagine I have a picture of a group of people with a building behind and space at the side.

I can show everything on the desktop and tablet. For the mobile format I crop the image closer in to the main subject - cutting out what is unnecessary and supplying an image of smaller dimensions. Alternatively I provide another image that illustrates the subject in a way more suitable for a smaller viewing format. That's how 3) works and it is the better approach. Images that work well on larger screens are not always suitable for mobile screens and we need to acknowledge that mobile downloads can be far slower if the phone is not connected to WiFi or in an area with poor reception.

As far as bandwidth goes we could just dismiss non urban users in poor reception areas as a tiny proportion of the audience.

I and many others think that mobile versions of websites that are graphic and information heavy should be heavily edited for the mobile platform, not just a desktop version made small.

[Egg Bramhill]

I can follow that PERHAPS a cropped image may be better for a mobile device Paul but if your cropped image is the same size as the original reduced image the file sizes of both would be for all intents and purposes the same filesize give a take a few pixels depending on colour content.

[pauland]

I can follow that PERHAPS a cropped image may be better for a mobile device Paul but if your cropped image is the same size as the original reduced image the file sizes of both would be for all intents and purposes the same filesize give a take a few pixels depending on colour content.

Well if you have a large image ( pixel size ) for desktop, using one half that size ( in pixels ) could give you 1/4 of the MB payload. A cropped image may be far better for that format and the filesizes much smaller.

For phones on WiFi it's not such an issue these days about payload but having a mobile-specific website is.

[Acorn]

@pauland, Bill said another forum but also mentions variants. It is therefore safe to assume Bill's referring to a Xara-design as he then describes actions he does with variants and copying images.

Xara has mucked up Image Filenames big time but ignoring this, Xara's approach is still flawed.

If your image is shared across Variants, the XDA outputs one image.
Change anything and you get a different image for each one changed.
If you copy & paste an unnamed image into two Variants, the XDA outputs one image if they are identical in size and orientation.
A scaled, squished/squashed or rotated image can use CSS and the same file

I always assume a smartphone viewer will shift their device from portrait to landscape at a whim.
Tablet users and desktops may alter the viewport or zoom.
With these user stories, it would be more sensible to keep the same-sized image up to the width of the smallest Variant.

If the image is a hero one, you can add Full Width Stretch and use the same image across all Variants.
Heroes by definition are large and high definition so you should accept the hit.

The best image presentation is no image at all.
Use SVG as it scales.
Use Xara Rectangles with Linear and Circular Fill.
Avoid Transparencies, Feathering and Shadows within Xara, use CSS for Effects.
Don't use Highslide.
Avoid custom bullets.
if you are not careful, you end up with lots of things that become images, without realising.

You are then left with those images that can only be images.
All images are best offset presenting as WebP.
Only then do I consider cut-down graphics across the Variants.

Acorn

[pauland]

@pauland, Bill said another forum but also mentions variants. It is therefore safe to assume Bill's referring to a Xara-design as he then describes actions he does with variants and copying images.

Yes, but I put the general context of why different images for mobile can be important and desirable. That is not technology-specific.

I always assume a smartphone viewer will shift their device from portrait to landscape at a whim.

That's not a good assumption to make, or a desirable assumption to make.

Tablet users and desktops may alter the viewport or zoom.

They may also choose to move to a more professional site that does not require them to do things like that.

With these user stories, it would be more sensible to keep the same-sized image up to the width of the smallest Variant.

That is not always the case and I disagree.

If the image is a hero one, you can add Full Width Stretch and use the same image across all Variants.
Heroes by definition are large and high definition so you should accept the hit.

But at a lower size an alternative image may be a better choice.

The best image presentation is no image at all.

Not at all. Images cannot always be represented as illustrations, but certainly graphics can be very appropriate.

[Acorn]

@pauland, I am happy for you to disagree but you have pooh-poohed almost everything I suggest people do with their phones or browsers.
Have you built this against a UX context? Have you conducted usability tests with potential customers?
If so, we have have come away with different outcomes.

I often change my browser aspect. I often zoom into a site's detail, professional or otherwise. I see many others doing similar interactions.
I also have had to deliver a system, not just a website, to a customer where some staff were afraid of MS Windows and would not change away from VGA resolution, only wanting turn-key applications.
There is a spectrum of use and to discount any user story is flawed. Collectively, they will lead to design decisions that are justifiable and not opinion.

My point about having no image was directed towards the smartphone user who might be faced with a lot of scrolling to hit the content that is of interest.
Scrolling ruins any presentation as the viewer is more likely to miss context and important information.

Desktop/laptop and tablet are of a like nature so that using the same resolution/image for them is no biggie.

As far as bandwidth goes we could just dismiss non urban users in poor reception areas as a tiny proportion of the audience.

I design for non urban users, being one myself. It it works for my set-up, as an outlier, then I have high confidence it will work elsewhere.

I and many others think that mobile versions of websites that are graphic and information heavy should be heavily edited for the mobile platform, not just a desktop version made small.

I totally agree. I, however, come from the position if my main site is well-tuned, a port into a mobile one is far less onerous.

I spend a lot of time emulating large and small and seeing the objective reports from Lighthouse and other tools and use these to guide my better understanding.

Acorn

[pauland]

@pauland, I am happy for you to disagree but you have pooh-poohed almost everything I suggest people do with their phones or browsers.
Have you built this against a UX context? Have you conducted usability tests with potential customers?
If so, we have have come away with different outcomes.

I often change my browser aspect. I often zoom into a site's detail, professional or otherwise. I see many others doing similar interactions.
I also have had to deliver a system, not just a website, to a customer where some staff were afraid of MS Windows and would not change away from VGA resolution, only wanting turn-key applications.
There is a spectrum of use and to discount any user story is flawed. Collectively, they will lead to design decisions that are justifiable and not opinion.

My point about having no image was directed towards the smartphone user who might be faced with a lot of scrolling to hit the content that is of interest.
Scrolling ruins any presentation as the viewer is more likely to miss context and important information.

Desktop/laptop and tablet are of a like nature so that using the same resolution/image for them is no biggie.


I design for non urban users, being one myself. It it works for my set-up, as an outlier, then I have high confidence it will work elsewhere.


I totally agree. I, however, come from the position if my main site is well-tuned, a port into a mobile one is far less onerous.

I spend a lot of time emulating large and small and seeing the objective reports from Lighthouse and other tools and use these to guide my better understanding.

Acorn

Most users naturally use phones in a portrait orientation. It is the more natural use of a phone because holding it that way is safer and ideally we can design a website that can be operated in that orientation just with the thumb and no other hand required.

It's great to support landscape orientation but bad practice to require it.

https://ux.stackexchange.com/questio...landscape-mode

As for removing images from mobile sites? Well, no. We just need to change our content to suit the usage of someone that is on the go vs. one sat in front of a laptop. Mobile versions should be a distillation of content not necessarily a complete version of a desktop site. When it comes to mobile - if in doubt leave it out. Mobile is very much about decluttering but retaining engagement.

My comments don't follow a specific user story because I generally try and use the same principles always.

We don't have to agree - it's a discussion. Most TG users just don't want to make mobile versions at all if they can help it!