Are Your Web Graphics Fuzzy? Here’s Why and How to Fix It.

One of the first things you learn when you start a blog is this: You will soon attempt to create your own graphics. It’s inevitable, whether you want to make your header, or create a button for your weekly meme.

The first thing you need is a good image editing software. If you want to invest in a mack-daddy program, like Adobe Illustrator, or Photoshop CS4, knock yourself out. But chances are you don’t want to drop that much money, unless you’ll be designing a heck of a lot of web graphics!

I have been using Photoshop Elements 6.0 (new version: Elements 7.0) since I started designing my blogs a while back. I also had to be able to create ads for my local blog, High Country Mom Squad, and buttons for different features on Real Life. I will tell you that it is MORE than I need! 95% of bloggers won’t need the big guns. (And you’ll save over $500, too!)

Now, we don’t have time for a full tutorial on creating graphics, but I will give you the solution to the number 1 BIGGEST problem I see all over Blogdom!

Fuzzy graphic images!!

Here are a few suggestions when you create your own graphics:

  • I always design my graphics with 300 dpi resolution. They say that the web doesn’t actually show more than 75, but it’s worth it to make sure you get the best quality.
  • Next, always save your work as a .psd (or raw file) first. Each time you save an image as jpeg, the quality declines. So you must save only from .psd to your desired image extension.
  • If your image has hard lines and not much shading, you should ALWAYS use the .gif extension when saving your work. If you don’t you will get… a fuzzy image, poor web  image resolution
  • If your image has a lot of shading, or it’s a photograph, I use the .png extension, instead of .jpeg. Lots of digital scrapbook designers use the .png extension heavily. It also will allow you to use a transparent background if you need that.

So hopefully these tips will help you sharpen up your blog buttons and headers, and improve your web image resolution! Add some tips or questions of your own in the comments if you have them.

About Sarah Pinnix

I'm a mom, blogger, vlogger, libertarian. I love Jesus, and my husband, too. Social Media Strategist for a Non-Profit (All statements here are solely my own)


  1. Musings of a Housewife says:

    Great tips. I do all my designing in Illustrator which means NO FUZZY GRAPHICS! 🙂 However, I do occasionally have to use my Photoshop Elements, so this was very helpful.


  2. GIMP is a free, open-source alternative to Photoshop. It’s quite powerful, and worth every penny you’d pay for Photoshop. 🙂

    Also, a caveat about PNG’s and transparency: Internet Explorer does not handle the transparency well at all. There are work-arounds, but it’s still an annoying issue to deal with.

    Another suggestion to add to your excellent ones: In addition to using 300dpi, design at much larger dimensions (pixels) than you ever intend to use the image for. In other words, if you are designing a header to be 700×150, design it at, say, 1400×300. Then when you reduce it, it will be much crisper.

    Often people end up designing smaller than they want (i.e., buttons) and then end up trying to increase the size. Leads to pixelation and blurring.


  3. Great tips, Steve! Thanks! I didn’t know that about IE. IE does have some quirks, Doesn’t it? So just make sure you test your images in each browser.

    Great tip about designing larger. Then you’ll have a larger image if you ever need it for a print publication, too.


  4. Stephanie's Mommy Brain says:

    Thank you for such great tips!! My husband has installed GIMP on my computer but for the life of me I can’t figure it out. Guess I just need to play with it more. You are definitely right that eventually we all start playing with the graphics side of blogging. When it works the way I want it to – it’s fun. When it doesn’t – I want to throw something. 😉


  5. I’ll be sure to share this with my daughter. She loves to create graphics in Ph Ele. Thanks! Nice to meet you. Came across your place at BlogCatalog.


  6. chickadee@afamiliarpath says:

    thanks for the tips!


  7. I downloaded Elements a couple weeks ago. I like it very much. I have this image in my mind of exactly how I want my blog to look, and for the life of me I can’t make it happen. I get so confused with the code. If you have any tips for the best tutorials to read, please let me know. I’ve seen walkthroughs, but they don’t produce exactly what I want, and I can’t find something that explains how all the different codes work together.


  8. Jen - Balancing beauty and bedlam says:

    ok, I need baby steps like why when I went to the library were the words on my header cut off, and how do I lower them…ugh. And how many people look at my blog and think…hmmm…is that on purpose as part of the balance of beauty and bedlam. 🙂 hee hee

    Waiting for the scoop on HT. Let me know when it’s up. It’s 12:03am EST…off to bed.


  9. Kirby3131 says:

    I have absolutely no idea what you’re talking about LOL I still have a free blogger template for my blog. I’m hoping that this summer I will take the plunge and learn a new language — How to design my blog. I’m putting this in my file. Thank you!


  10. Any tip about making my blog better is appreciated…but I would prefer pictures, I have to see it or it won’t stick with me.


  11. Amy Andrews says:

    @Stephanie – Regarding GIMP, you might check out these tutorials by malgalin on YouTube, especially the one about layers which does a good job of explaining the basics. His videos are great!

    By the way, I bet newbies to Photoshop etc. would benefit too.


  12. Awesome blog! will bookmark it for future reference.


  13. YOU ARE AMAZING!! I have been looking for an answer to why my header was fuzzy and appeared to have grey pixels around the lettering… It was as simple as saving the file as a GIF! Thank you for your tips, very helpful!


Speak Your Mind