Question about merging images?

[ecrusaders]

Hello, I'm new to the forum and pretty new to website design in general.

I use dreamweaver to assemble my pages and psp 8 to create my images for the most part. Ok here is my question.

I want to create a horizontal image using gradient from say white to red that is 1 pixel high and 650 wide. Then I want to make a vertical image that also uses a gradient from white to grey and is 700 pixels high and 1 wide. I then want to somehow merge them and build my layout on top of that. I know I could easily make an image 650X700 and mix them that way then set that as my background....but wouldn't it be better if I could somehow tile both images and mix them that way?

[ecrusaders]

I just merged them in psp 8 to see the difference in sizes and the 650X700 was 59KB as opposed to about 1KB per on the 1X650 and 700X1. So obviously I would save a lot of space by somehow setting one as a background and laying the other on top of that with a transparency or something...

[kapow]

I don't think your idea is possible on the web. You can get two 'layers' to overlap with CSS, but I don't think you can achive partial transparency.

As far as I know (feel free to correct me - anyone)
A gif image offers either 0% or 100% transparency for any given pixel. What you want is something like 50% transparency for all pixels. This is usually done with an alpha channel ie instead of the usual 3 colour channels (rgb) you have another for transparency: r,g,b and alpha - where each channel is 1-100% for each pixel.

I believe a png image will provide alpha transparency but the problem is the browsers. IE is by far the most popular browser. Whilst IE supports png I don't think IE supports alpha transparency.

If your requirement is for a select audience you can ask them to get a browser that supports alpha transparency (sorry I don't know which). However if your requirement is for a general audience its not effective to ask them to change browsers.

So I don't think it will work.

[ecrusaders]

Thanks for the reply. I have been using IE and jpg images so I guess thats not going to work.

So how do I cut down on my 59 KB image without making it look blocky? I know there are optimizers and stuff but I haven't really worked with any. If I have to I'll just use a solid background and spruce it up a bit.

[divaone]

hmm.. tough one. 1) perhaps post to the css forum and ask if anyone is familiar with a page gradient generator or code. 2) try a horizontal or vertical gradient instead of a large diagonal gradient. make the horizontal image something like 1200w x 1h; make the vertical image 1w x 1200h. make the image fixed using css. 3) search the forums for 'image optimizer' if you choose to stick with the diagonal gradient. there are several threads with program suggestions.

hth

[kapow]

Your best bet is not to use a diagonal gradient, then you can have it at a few k.

If you really want a diagonal gradient. Use photoshop or fireworks and optimise your file: probably as a .jpg with a lot of 'blur'. The blur will reduce your file size. I imagine as you don't have any detail in the image - blur will not hurt it much.

[tbear]

Using PSP, you can 'export' as a .jpg and set the compression rate. The blur suggestions also can be carried out with PSP quite simply, and are sound suggestions :+)

[garann]

Whilst IE supports png I don't think IE supports alpha transparency.

Actually, IE does technically support alpha transparency for PNGs. It's just a pain in the neck. Instead of just displaying the PNG as normal, you have to use a filter for it. Also, it can't be a background image and it can't be an IMG - it has to be a DIV (or maybe other block elements). To get the effect you want, you'd set its width to the width you want your image stretched to and lay the DIV that uses the filter on top of the other gradient image.

A List Apart has a fairly complete article [alistapart.com] describing the method, if it doesn't sound like too much hassle. It will give you the effect you describe, so it may be worth a shot.

[kapow]

IE ...support alpha transparency for PNGs ...you have to use a filter for it.

What's a filter?

- Is it something the site visitor must download?
- or is it something you add to your web page?

[garann]

No, a filter doesn't need to be downloaded - it's already part of the browser. Generally, its proprietary and only understood by one browser. In this case, it's part of IE and only IE. It goes in the CSS for the element. Here it is in the code from the ALA article:

<DIV ID="myDiv" STYLE="position:relative; height:250px; width:250px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png',sizingMethod='scale');"></DIV>

hth,
g.