Why are the text and boundaries / edges of graphics blurry in this image, and how can I fix it?

Question

My friend made a logo for me. But between us we cannot figure out some problems.

The text is blurry. Where the different coloured squares meet is blurry (might not be correct term, possibly "clashing"?). We've tried changing the format between jpeg and png.

When she sent the file it looked fine. But when uploaded to my Wordpress site, something happens, I don't know what. Maybe it's the white background. Here is the image:

1. What can we do, if anything, to make the text clearer?

2. The lines where the 4 squares meet seems to blur when focussing on them for more than a second. I'm not sure what the term for that is but something is happening. Is there a way around this while keeping this color scheme?

Answer 1

Your original image ("8SLgo.png", labeled "here is the image" in your question) already has the blurring between squares and blurry text. Here it is, enlarged 5x and composed against a white background:

It looks to me as though your friend created the image in a smaller size and then enlarged it to the 110x130 size before sending it to you. If the enlarging was done in the usual manner, this would create interpolated (blurred) pixels between the solid areas of color and around the borders of the letters.

It would be difficult, if at all possible, to undo the damage from the image that you have. Instead, you'd need to go back to the beginning and create the image in the size you actually wanted in the first place, and using the appropriate font size.

Note that I did not introduce any additional blur by enlarging the image 5x because I used a "sampling" method not "scaling" so as to simply enlarge the individual pixels.

EDIT: After I submitted this answer, the "here is the image" file was replaced with a GIF having slightly larger dimensions. Here is that image, also enlarged 5 times. Note how different, but still bad, the text looks, and that the blur between the solid areas is larger, 3 pixels wide instead of one pixel wide. Those differences are probably due to the second resizing operation from the already-blurred PNG to GIF (size changed from 110x130 to 120x153).

Answer 2

Ok, there are several possibilities. You can try to identify source of your problem using a list of possible causes or jump directly to different approach I would suggest.

List of possible causes

1. What software are you using to create this logo? If you use vector SW like Illustrator I would suggest recreating it in Photoshop since rules that usually mean that logo should be always vector probably don't apply in your case. This is not that common, but on the way from vector to raster, image might get a bit distorted.
2. What kind of anti-aliasing are you using with text? I would go with crisp.
3. And most importantly, are you sure that your image element containing logo in your WP theme is pixel perfect same size as image exported from PS/Illustrator? Remember that even slightest dimensional changes can cause weird distortions.
4. Lastly, consider how is your logo inserted in WP website. Is it hardcoded into your custom theme as link to file uploaded via FTP, or did you upload it using some WP function, pre-build in your theme maybe? Point is, is it possible that your logo image went through some more compression on its way to the server? Consider this and if you think it might be double compressed, try uploading it via FTP and altering your theme, it should be pretty straightforward.

New approach

This all is based on the presumption that you'll use a raster format logo on your site. But you can approach this matter from different angle entirely. You can simply design your logo in vector software like Illustrator and then use it in vector format on the site as well. I am using logo in .svg format on WP site with no problems at all. Just export it from Illustratr in SVG format and then use it as you would jpeg. <img src="vectorlogo.svg" class="mylogo" /> should work just fine. Just remember to set your logo dimensions in CSS because of the vector format. This way, your logo will be clean and crisp on all displays including high resolution displays like retina etc.

Personally I would first try to implement vector format logo and go trough the list only if vector fails. Trying vector first might save you some time with identifying issues using my list and I can't think of any disadvantages of using svg instead of jpeg or png in this case.

I hope this can help you solve your problem or at least understand possible causes better.

Answer 3

Your example GIF

Here's an image made in Photoshop, but exactly at the scale required (not resampled), and text antialiasing set to "sharp" - saved as PNG 24. Obviously I don't know what font was used and so I've used Trajan Pro which looks similar. The result is a lot sharper than your example.

If your image looks sharp before uploading to your website, perhaps there is some additional compression going on as others here have suggested.

Answer 4

Use a web-suitable palette and that will help with the dithering at the boundaries