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.