jpg gif & png - expert help needed! (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

RickP -> jpg gif & png - expert help needed! (9/7/2005 15:18:17)

I am using PSP8 but I suspect that my question here is more to do with how filetypes behave with any image editor(?)

I am designing a site banner using a bgnd colour in html. I want to blend two images into my banner and therfore need to match my html colour exact at the images edges. So, in PSP I create my images and match the colour exact to my banner bgnd, but...

When I save the image as either jpg or gif (with minimal compression) the colour alters a tiny fraction. This in turn causes a slight 'line' in my banner, which I don't want ([>:]). I realsie that this is being caused by the file types and the way they recreate the image but what can I do about it?

Interestingly, if I save the images as PNG the colour stays fast ([:D]) but... when I view it in IE the PNG image does not display at all right - it darkens considerbly!

Any solutions? Anyone [8|]



bobby -> RE: jpg gif & png - expert help needed! (9/7/2005 16:33:04)

IE has no support for PNG, even though it's a superior file type to GIF in many respects (go figure)

Your best bet on something like that is GIF, though I've run into problems with this same kind of thing on PSP6 and The GIMP.

What you might try doing instead is create a fade from the "other" color to transparent, see how it looks then...?




RickP -> RE: jpg gif & png - expert help needed! (9/7/2005 16:43:47)

Thanks Bobby

As it happens one of the images uses a fade effect already, it's just that at the point where the image meets the banner bgnd it still isn't a perfect match (!!!!). I've got as near as poss to it now and I think the human eye will hardly notice the blend on either image - unless if I offer the site for critique on the FP forum then everyone will look too close and spot it [:D]

I conclude that this problem is nothing to do with any image editor. If you think about it, jpg and gif are compression formats and I suppose they will always make some very fine adjustment to colours in an image at even the minimal compression settings. I tried 'tricking' it into the right colours by adjusting the original PSPimage colours off slightly but it just erred the other way instead! Typical eh! [:(]

Thanks again



jaybee -> RE: jpg gif & png - expert help needed! (9/7/2005 17:11:20)

It's probably not PSP, more likely down to the way the browser, monitors, graphics cards etc. render stuff. I suspect the colours you're using are not paired numbers, e.g. #cc66ff or #ff0000.

Try and stick with the web safe colours and you should be alright.



RickP -> RE: jpg gif & png - expert help needed! (9/7/2005 17:19:25)

quote:

I suspect the colours you're using are not paired numbers, e.g. #cc66ff or #ff0000.


Au Contraire!

My html colour is #336699, which = 51,102,153.

I use the exact RGB for my image but when saved to either format it will adjust fractionally - something like: 50,103,104

I think it is just innevitable with the compression formats we are limited to for the web - try it in any image editor and I reckon results will be the same - but I'd be most happy if I were wrong[;)]



bobby -> RE: jpg gif & png - expert help needed! (9/7/2005 23:49:43)

I've had bad luck with PSP and Gimp matching HTML colors to the way a browser renders them.

It's immediately aparent with some colors as soon as you fill or shade or ....

Jaybee's right tho, if you stick with the 216 safe colors it should be fairly consistent.

http://www.w3schools.com/css/css_colors.asp



d a v e -> RE: jpg gif & png - expert help needed! (9/8/2005 0:07:40)

if you use gif and 'lock' the colour you want in the palette then it will be exactly the same (not sure how you do that in PSP) using jpeg will result in small but noticable colour shifts - use a slightly higher than normal compression and also you can sample the background colour of your jpeg (not the psp) and use that colour for your html background :)



RickP -> RE: jpg gif & png - expert help needed! (9/8/2005 17:07:56)

Bobby...

Jaybee's suggestion is 'web-smart' (4,000 odd colours) as opposed to the web-safe 216 - but sticking with these (if it is not too constraing) may be an answer (?)

Dave...

Didn't know about 'locking' palette colours - will look at this.

Yes, I could go the other way round - i.e. produce image first - see what the exact RGB comes out at then use the same in my HTML. I had thought of this but...

1. It means I have to forsake solely web-smart colour in my design (maybe not the end of the world[8|])

2. But the reason it won't work on this occassion is because I have two images (one for each end of the banner). When I work on them and save them they each come out a fraction different from each other - I think there is a known 'law' for this sort of thing!!![:@]

Thanks all



bobby -> RE: jpg gif & png - expert help needed! (9/8/2005 18:02:34)

When I run into this it's when I've already set up the structure and color scheme of the page in html / css and I'm trying to create matching graphics in the editor... typing in the HTML or RGB values.

When I've done it the other way around it hasn't been an issue that I recall.



RickP -> RE: jpg gif & png - expert help needed! (9/8/2005 18:51:06)

Bobby,

Are you saying, create graphics first and then match the colours on the web page in HTML? - therefore (when matching graphic colours) not sticking fast to 'web-smart' colours only?



d a v e -> RE: jpg gif & png - expert help needed! (9/9/2005 0:11:14)

could you post a url and a link to the original graphics? (can you save the graphics in an uncompressed format for those of us without psp e.g. 24 bit png or bitmap/tif ?



RickP -> RE: jpg gif & png - expert help needed! (9/9/2005 6:38:44)

Hi Dave

Thanks for the extended help - Here is a link to four graphics with details:





d a v e -> RE: jpg gif & png - expert help needed! (9/9/2005 7:06:59)

didn't notice much difference in the gif and only a small amount of banding in the left hand side of the jpeg.

yeah for some reason the background colour of the gif is changing to #346799 (sorry no rgb...) i'm not very familiar with psp but i'll explain what i did in fireworks:

i set the background as transparent (i.e. chose #336699 as the matte colour so it's the colour that is transparent in the gif that way the html colour in the table cell will show through the gif background and it will be definitely the right colour. the jpeg isn't going to be perfect and a gif isn't suitable for the gradients, but adding a small amount of noise to the left 50 pixels or so of the right banner smooths that banding (see attached link)

the only other surefire way of doing it is saving as a 24 bit png but the file size will triple

anway feel free to use my versions or load the (fireworks) png files into psp and play with the export settings to your liking

http://members.tiscali.fi/dave_pirjo/test-area/ART_graham_lock/graphics.htm



RickP -> RE: jpg gif & png - expert help needed! (9/9/2005 9:05:59)

Thanks Dave - it's an interesting little fine-tuning conundrum isn't it?

The reason I didn't attempt using a transparent bgnd for the gif is because there is shadowing behind the white text and previous experience tells me that using transparency with this effect isn't very good - but I'll take a good look at your results, which... I can't find from the link above - It gets me to a copy of the page I put up but I can't find any of the graphics files from there - ?



d a v e -> RE: jpg gif & png - expert help needed! (9/9/2005 9:07:47)

oops! http://members.tiscali.fi/dave_pirjo/test-area/ART_graham_lock/ this is where the files are and i put my versions in the copy of your page at this url http://members.tiscali.fi/dave_pirjo/test-area/ART_graham_lock/graphics.htm



RickP -> RE: jpg gif & png - expert help needed! (9/9/2005 9:19:01)

Ah right, thanks,

In that case the gif (with shadowing) looks fine. Going this way I have the option of doing the jpg first and then matching my html to it and just keeping the gif transparent.

So it's either, forsake the absolute web-smart colour or put up with a tiny bit of diference with the jpg colour - the trouble with the latter is that it is very unpredictable how noticeable the line will look in all monitors.

Cheers [;)]



d a v e -> RE: jpg gif & png - expert help needed! (9/9/2005 9:40:22)

to be honest i'm not sure that the line would have caught my attention if i hadn't been looking at it (or been doing a site review and feeling picky!!!) i think the upgrade in filesize for png doesn't justify the difference and people are going to be looking at the quality of your art, not the small difference in your header ;)

i'm surprised by the darkening png in IE - it doesn't support transparency but it does support 24 bit pngs...



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375