using sliced Browser Background images with Xara?

[Guest]

I believe we are not talking about the same thing - the problem is that you have a programming background and I don't.
So we approach things from different perspectives.
What I see in both Websites I linked to is missed opportunities to make images load faster. That's why I'd like to slice with
very different image settings. So that I could change my Background image often and also have lots of images on the Page itself
without making the website slow.
But I of course also would like suppress the horizontal Toolbar because I do not want anyone to watch left or right who has a smaller
Monitor than the Background Image extends.
I am only interested in Graphics and maybe in Performance, but I don't have an idea how all that stuff is wired in the Background.

PS: I did not quite get the Suggestion you made.

[mwenz]

polyxo,

Slicing images was very beneficial on sites when dial-up was the norm. While there is still some benefit, it is largely moot with any connection faster than a 56k modem.

Try the CSS3 technique Steve Ledger shows here:

http://xara-users.info/demos/auto-re...ckground-css3/

With optimized images, the result is fast and efficient.

Take care, Mike

[gwpriester]

Yes, Paul but would this work for a background image? It will work for images that are on the page but I am not sure if you could do this with a background image.

Both of the sites polyxo linked to are as I suggested dominated by the background image and the page graphics are very spare. Especially the China one.

The Pipeline image is over 300K The China image is under 90K. Interesting as both as the same size.

I should think that part of the challenge is not to slice the background image because on slower computers it just loads all of the slices at once, but to find or create a dynamic image and then see just how small you can make the file size. The pipeline image has much more detail which contributes to the larger file size. The China skyline image has a large area of sky which compresses to nothing and the main part of the image is relatively small.

What this says to be is both designers wanted the impact of a large image but were willing to trade off by keeping the page content minimal. And this also makes for a much more interesting site because of the play against large to small.

Also I notice that the pipeline image is large 1900 x 1200 whereas the China image is very small 1024 x 683 so they must have used some script to get the image to scale to the size of the screen. I would look at the page source code and see if you can discover the script used to scale up the image.

[pauland]

Gary,

I understand the aesthetic of the large images and I was certainly pleased to see the examples. The pipeline one is very effective on the first page, less so when they put in more content on the second page - starting to unbalance things. The China site avoids that problem by having content that is positioned relative to the browser sides rather than in static positions. If you resize the window, content moves relative to the right browser edge.

Mike has included a link to the CSS technique used to scale the background images - it's the technique used on the sites in question.

Paul

[pauland]

I believe we are not talking about the same thing - the problem is that you have a programming background and I don't.
So we approach things from different perspectives.

I don't think that's the case at all. I probably should just have said outright that the slicing idea won't get the right result. I did see that slicing could be used to optimise images in Xara, but as Mike points out, it's really not worth it for the small gain and it can never properly replicate the background techniques used in the sites you provided links to.

What I see in both Websites I linked to is missed opportunities to make images load faster.

I didn't see any issue with loading those images on my system and compared to many sites designed with Xara, they are lightweight!

Go with the link provided by Mike and do it with CSS; optimise the image as a whole but don't worry about squeeezing out the last few K to make download faster.

[Guest]

Many thanks everybody!
I will definedly try Steve Ledgers approach - his result looks very good. Still -and I hope you don't mind me saying that...
A feeling remains that the cause of the Pain somehow got mixed up. Let Slicing be widely obsolete for traditional application due to faster Internet - and I'll agree.
With the Backdrop-Samples I just experimented with however I could save about 2/3 of the Data Volume without visible defects (page displayed over blurred
and strongest compressed area). 100kb vs 300kb is quite a difference, that has nothing to do with squeezing out the last kb Paul (one could quite as easily shrink the Pipeline image).
Again I'm talking not about a single image which gets loaded once and then stay put, but on frequently changing Backgrounds.
Being able to create Images with zones of different compression and even adapted file-formats to me seems even particularly awesome on really huge, partly occluded images (by page
or viewing on small Screen-Resolution). While I read your answers carefully noone could make me change my mind regarding this Point.

But and that seems to be great but - sliced Background images seem to be notoriously complex to be hooked up as Browser-Background.
When searching the Web I discovered that anyone else trying what I asked for failed as well (and was confronted with an equally high level of Skepticism
Concluding I find that the Pain is not caused by actually cutting images to optimized pieces. Instead the use of that Technique/its Output seems widely unsupported for the namely purpose.
Not only in Xara but quite generally in Webdesign.

[mwenz]

Really, there is no download benefit as regards speed with properly optimized images. There is, when done properly, a visual difference, a perception of speed gain. But that is all it is.

When slicing became the norm, it was all table-based layout. So tables were used to place the slices. Later on, when divs became the norm (and still are) slice placement was placed into divs. And this method is still used in certain applications (like Photoshop) to slice a web site design and *begin* the work of the overall site work.

In applications such as Xara, with its absolute positioning, you should be able to accomplish what you desire fairly easily. If it were me and working on just slicing a background image, I would place an image on my page, slice at the borders of the page simply be drawing a line and choosing to slice the image. Then optimize the pieces and perhaps take the portion of the image on the actualy page and either overlay it with a rectangle with a white fill and change its transparency--then group the two so they export as a single image. Make sure clip to page is off (or is it on, I don't know because I don't use Xara for web sites).

But...the CSS method is a far better method.

Take care, Mike