A little help needed: Blurred image improvements.

**bmangraphix** · 12 April 2007, 11:18 PM

Ok, I must be doing something wrong. If someone could please shed some light on an issue I am having.
When I upload any graphics to web pages they seem blurry or distorted around the text.
I save them in different file formats, sizes, etc. but I still do not see clear images on some of them. White backgrounds are ok but color backgrounds I think are the issue.
Here is the link to show you what I mean.
http://www.maidwellclean.com/links.aspx
Please if any suggestions you have I would appreciate it.
Thank you,
Brian

**Ron Duke** · 12 April 2007, 11:35 PM

Brian,
If you have reference to the word "Maid", have you tried saving your word in graphic form with the same color background as it appears on the website? If there's any feathering this could make a difference.
However, there are others on this forum that are far more qualified to help you, so be a little patient. Help is on the way.
ron

**bmangraphix** · 13 April 2007, 12:39 AM

RonDuke,
Yes the word "Maid" logo is saved with the same background color as the header.
My issue is when I create a logo or design with Extreme on a color background the test is blurred and the entire design is also not clear.
the example is on the links page of the Maid Well site. and also on my own site as well. Some designs are just not as clean as others.
Thanks so far,
Brian

**Egg Bramhill** · 13 April 2007, 12:49 AM

Brian,

There could be several things that create this blurriness. Firstly though I'm a bit puzzled to what image type you're currently using for this logo. If I save it and paste it into XXPro I get the image on the top of the attachment below. It seems to use black as a mask.

The second image is a screen grab of your logo that you state is fuzzy

The bottom image is my attempt to remove the fuzziness.

**Egg Bramhill** · 13 April 2007, 01:07 AM

Continued:

Here are some of my thoughts/pointers:

The best results for this type of image is a gif. With jpgs you will get artifacts around the edges of shapes, so a general rule of thumb is for photographic images use jpg's and for images with large areas of single colour and text us gif's. Png's are also a possibility but these still have problems with earlier versions of IE if you're using transparency.

Create the image at the size you want it and export it at 96dpi, which will maintain this size.

If you can match/incorporate the background within the image, this is better than using a transparent gif.

A major cause of blur is not working in whole pixels. Always endevour to resize all shapes and text into whole pixel values.

Ensure that the background shape also lays on whole pixels in the X and Y planes, then move every shape within the drawing to whole pixel x and Y locations.

If you're using bevels only use whole pixel sized bevels.

Finally when you export your image alway select the "Minimise visible anti-aliasing".

**bmangraphix** · 13 April 2007, 02:18 AM

I appreciate the input thus far. I can live with the header logo of Maid Well for now and thanks for the instructions on cleaning it up, I will try that soon.
The real problem lies with designs I have attached.

**bmangraphix** · 13 April 2007, 02:23 AM

Both of the images above were saved as the origional size. Notice the blur on the larger one. And even though the smaller design appears cleaner, when it is loaded on a web page it is also blurry or fuzzy.
I plan on using this design for an ad to my site and I would like to see what I am doing wrong to cause it to appear blurred.
Brian

**Egg Bramhill** · 13 April 2007, 02:36 AM

Brian,

The large image above has a classic jpg look with artifacts around the lettering. I notice it on your site as well, although the browser says it's a png. I reckon it's a png made from a jpg to have those artifacts.

I attach below a gif, a jpg and a 16 colour png, in that order. (You might need to narrow your browser window down to get tham to stack one above the other)

As for the smaller image, the text size relates to about 6Pt which is going to be almost impossible to read at that size even if you go for a specific pixel font. 6Pt is only 8 pixels!

Charles Moir did a great thread on optomising small text sizes and a few tips on making them sharper. You'll need to search the forum.