Trouble creating clean graphics

[esawdust]

Having alot of trouble creating clean graphics for my site (www.esawdust.com). For some reason the image loads blurry on the net but while editing it in Paint Shop Pro 7 or Microsoft Composer (or FrontPage) its crystal. I dont have a bunch of experience with the graphics things so Im wondering if Im saving wrong for web use. Goto my site and youll see what I mean... the top logo is blurry and I had the same problem when I loaded a logo into my vBulletin Board. Thanks for any assistance!

Greg
eSawDust.com

[Kaizen]

Are you giving it a set area to display in.

Take a look at the html code in the templates or paste here and we'll have a look.

[jamesez]

Originally posted by esawdust
For some reason the image loads blurry on the net but while editing it in Paint Shop Pro 7 or Microsoft Composer (or FrontPage) its crystal.

Hi Greg,

The problem you're having is that you're saving things as jpeg's and not GIF's.

JPEG is a "lossy" compressor, which means "I can compress better if you're willing to accept some quality loss." Unfortunatly, JPEG has a lot of trouble with sharp boundaries, like the color change between your text and the background. This makes for either funny looking color swatches or blockyness around the sharp edge.

GIF is a "loss-less" compressor, which means that the uncompressed version is byte-by-byte identical with the original.

GIF does not experience the same sharp-line-fuzz that JPEG does.

This is a fairly common mistake people new to web graphics make, in that they convert everything to JPEGs.

Remember this simple rule: JPEG for pictures, GIFs for everything else.

[esawdust]

Tried saving the files in the different formats.. the .gif images are limited to dithered or solid.. both look awful. Ive been saving everything as .jpg in the highest quality format. They too still come out blurry when viewed on the net. Im at a loss here... Its gotta be something simple.

As far as having a set area I load it to the header area in frontpage. I size the image in the graphics program then save and insert. Is there another way?

Greg

[jamesez]

Something you might want to try is pick up a copy of Photoshop 6 *or* ImageReady (if they still sell it), as both have a terrific web export system that lets you lock colors and play with different settings.

If you don't mind breaking compatibility you could try .png, but that's probably not the best idea. png's are lossless compressed but have a huge pallete size.

As to the image size thing, if you specify the width and height in an img tag, and it's not the same as the actual graphic, the browser will do some image scaling and it looks ugly.

[s.molinari]

I don't know if this will help you but to get sharper images I design at least 3 times bigger than I actually need. When I'm happy with what I have I reduce the size by one third. Then I change the color format. That works best for me.:)

Scott

[Sinecure]

There is only 1 problem I can see being associated with doing it that way. Lets say you have a 1 pixel black border around your image. You then make it smaller, that 1 pixel, how does it get smaller?? Well it simply blurs.. :(

[s.molinari]

Of course, when designing a graphic with a border at three times the size, you would plan for the reduction and it almost happens automatically anyway. If I wanted a border then I would make the border so it looks good. If I made the border with 1 px I would hardly even see it and it would look acceptable so automatically I would make the border bigger, let's say 3 px.;)

Also this method is only good for smaller graphics. Like the webring logo I did at www.php-resource.de. (btw, I won a contest with that logo.:)) As the needed graphic gets larger than the amount of sizing should be reduced.

The tip is also not from me. I read it in a book.:D

Scott

[s.molinari]

here is an example:

here is a smilie as in vB :)

here is a "reduced" smilie that I made real quick

as you can see the image is sharper or rather less pixely around the edges. I must add this makes making giffs with a transparent background much more difficult. But if you get it right, it looks better IMHO.

Scott

[Sinecure]

very valid points :D