Problem resizing graphic (reducing size) (Full Version)

All Forums >> [Web Design] >> Web Graphics



Message

womble -> Problem resizing graphic (reducing size) (8/21/2005 16:35:38)

I have a problem with a graphic (a logo) on a site that I'm redesigning. The original graphic is a jpeg (516 x 333px and 300 px per inch). I've been using it on the previous version of the site at 150 x 98px, still as a jpeg and it looks okay-ish.

With the new site though I'm trying to reduce the size of the top of the page to get more content 'above the fold'. I've been trying to reduce the image to 75 x 48px and I looked back through previous posts that suggested reducing the dpi and using bilinear resizing (I'm using PSP8 btw). I've reduced the resolution to 72dpi and resaved as a gif.

By doing that it doesn't look too bad in PSP, though a little pixellated (though I have to have it magnified quite high so I can see it clearly), but when i view it on the web page it looks extremely pixellated and kind of squished and elongated (and yes I have remembered to change the height and width attributes in the code). I've no idea what's wrong here. Can anyone suggest anything I might be doing wrong?

Thanks. W



Tailslide -> RE: Problem resizing graphic (reducing size) (8/21/2005 17:30:02)

Ok - now don't yell at me... I know you changed the dimensions in the code, but did you change the file name from photo.jpg to photo.gif? I only say this because I've done this before now plus the "always good for a laugh" forgetting to upload the new image to the webserver so the page just finds the old one.




womble -> RE: Problem resizing graphic (reducing size) (8/21/2005 17:33:01)

Yep, did that (double checked that first because I know I'm losing my marbles)...and I also have a valid doctype too [;)]



dpf -> RE: Problem resizing graphic (reducing size) (8/21/2005 17:46:50)

womble : do you still have the original (516 x 333px and 300 px per inch)? sounds like you rediced that once and are now working from the reduced version. remember that .jpeg is "lossy" and each time it is saved, more data is lost. I suggest going back to the original or aas close as you can get. also, personally, i have never had luck going from jpg to gif. if it were me i would stick with the jpg



caz -> RE: Problem resizing graphic (reducing size) (8/21/2005 18:00:15)

And try a percentage resize in PSP, keeping original proportion. [8|]



d a v e -> RE: Problem resizing graphic (reducing size) (8/22/2005 0:01:21)

could you post a link to the original?

also when you resize you can take it down 50% use unsharp mask (not *too* much) then take it down to the exact dimensions. if you can you can reduce it to 25% of its original size first.



womble -> RE: Problem resizing graphic (reducing size) (8/22/2005 5:18:35)

Thanks for the suggestions guys. You can see all three of the versions here
I've solved the 'squished look' problem. When I went back and checked the code I realised I'd got the logo in a float and I hadn't altered the width attribute in the css [img]http://www.ddeaf.org.uk/forum/images/smiles/smiles2/doh2.gif[/img].
It looks better now, but still seems a little pixellated to me.

I changed it to a gif because I've got a stylesheet switcher on the new site which changes the background colour of the site and as a jpeg it was appearing in a white block, so I changed it into a gif so I could make the background transparent. I'll have a play about with some of the suggestions though and see if that makes any difference.



dpf -> RE: Problem resizing graphic (reducing size) (8/22/2005 9:19:47)

quote:

as a jpeg it was appearing in a white block,
to avoid that, set the background color identical to where you are placing it on the screen and it will blend in perfectly



Tailslide -> RE: Problem resizing graphic (reducing size) (8/22/2005 9:39:23)

quote:

ORIGINAL: dpf

quote:

as a jpeg it was appearing in a white block,
to avoid that, set the background color identical to where you are placing it on the screen and it will blend in perfectly


Dan - she's got a stylesheet switcher so the background colour will be changing.



dpf -> RE: Problem resizing graphic (reducing size) (8/22/2005 9:54:07)

quote:

Dan - she's got a stylesheet switcher so the background colour will be changing.
oh - so am I expected to actually read posts now? sheesh



caz -> RE: Problem resizing graphic (reducing size) (8/22/2005 10:04:16)

I was going to suggest png format, but IE has problems with that I think - Tail?



Tailslide -> RE: Problem resizing graphic (reducing size) (8/22/2005 10:16:32)

It does have problems with png transparency. There are ways round it with scripts but frankly could never be bothered to experiment! Aparently IE7's fixed that. So it'll only be another 10 years until we can forget all the legacy browsers that do have problems *sigh*.

If it's causing a major problem then you could always have different logos with different colour backgrounds as background images for the header div (or whichever) on the various stylesheets.



d a v e -> RE: Problem resizing graphic (reducing size) (8/22/2005 14:24:18)

ok in photoshop (but you can replicate the steps in psp)

- i resized to 50% the original size (always reduces nicely when you go in steps of 25%'s) then applied unsharp mask at am amount of 20% and a radius of 1 pix

- then i resized to the final size (75px X 48 px) then applied the same amount of unsharp mask.

you can play with the amount of unsharp mask and the radius (using a higher radius is ok in larger pics but it can look a little *too* sharp if you go too far)

saved as gif at 256 colours and 100% dither.

ideally you woud work from a vector version (if you had one or could be bothered to recreate it) and size without loss of quality but i think using the above steps as a guide you can get a fair looking logo...

[image]local://upfiles/5827/2FB1E62B372B458CADE615AA9D06DC73.gif[/image]


incidentally the Dd s in the original fullsize logo are a bit ropey?! they smooth out fair enough on the smaller logos but they look a bit bad (to us picky gits;)



Tailslide -> RE: Problem resizing graphic (reducing size) (8/22/2005 14:36:09)

That's really useful info Dave thanks! I'd never have thought of doing incremental resizing.

Smartypants [:D]



d a v e -> RE: Problem resizing graphic (reducing size) (8/22/2005 15:53:36)

yeah i know ;)
if you notice when you zoom in or out in factors of 2 (say 50% or 25%) that the image is smoother and clearer than it is if you say zoom to say 67%...



womble -> RE: Problem resizing graphic (reducing size) (8/23/2005 9:25:14)

Thanks again guys for the suggestions - I'll give them a try (a little bogged down with work at the moment so it'll have to wait a couple of days). Re: vectors, I'll have a word with the designer who originally did the logo for us. He let me have the original image I'm working from and he still does some design work for us so he's got the orignal artwork but I'm not sure if that includes a vector. No harm in asking though.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625