Even the best of us have run into the problem of having blurry or pixelated graphics. More than likely, you understand how frustrating this problem can be.

Plus you probably wouldn’t be reading this post in the first place if you didn’t, huh?

If you've been designing graphics for your blog or business, you've probably run into a few instances where your graphics come out blurry or pixelated. I'm walking you through best practices to avoid this frustrating problem!

Not only do pixelated images look like crap, they’re hard to read and they show a huge lack of professionalism. For many of you, the graphics you produce are a reflection of your brand, so it’s time to sort out this issue once and for all! I know you want your business to be taken seriously and you want your graphics to make you look like the rockstar you really are, so today I’m giving you a few tips on how to avoid this problem.

Why do images become pixelated?

In order to understand this, however, first let’s talk about how images are created.

Raster images are graphics that are made up of pixels. Pixels are tiny squares of color that when combined, complete an entire image. Almost all web images are raster images, and therefore anything you pull from the web, as well as all photographs, are raster images.

Images are saved at a certain resolution which is measured by the amount of pixels per inch (ppi). Low-resolution images are saved at 72ppi (for web graphics), and high-resolution images are saved at 300ppi (for print graphics). Web graphics can be saved as low res files because 72ppi is the lowest resolution they can be while still looking clear on a screen but while still being a small file size for uploading on the web.

The problem with images being made up of pixels is that once they are saved at a certain resolution (both high or low), you can’t actually add more pixels to the image. This then means that you can’t enlarge the image without it looking pixelated. By stretching the image larger, you’re actually just enlarging the pixels themselves, making them more visible to the naked eye, therefore making your image looks pixelated. Womp wompppp.

So how can you avoid pixelated images entirely?

The key to resizing raster images is to always keep a version of the highest possible resolution you have. That way you can save it down to the appropriate sizes as needed. When you need to resize the image smaller, I recommend doing so in a program like Photoshop which will resample the pixels of your image and optimize them for its new size. Plus, Photoshop allows you to choose what resolution you’re saving your image at and allows you to adjust the file size before you save it.

However, if you want to avoid your graphic from ever becoming pixelated, you can design it as a vector image instead of raster.

What’s a vector graphic?

A vector graphic is an image that instead of being made up of pixels, is made by using complex algorithms to create smooth, clean lines. By eliminating the need for pixels, vector graphics can therefore be resized infinitely without losing image quality or image resolution. Because of this, I totally recommend designing in vector first and then exporting your image as a raster file when needed.

Why is it important to design in vector?

Here’s the thing, you can convert an image from vector to raster, but you CANT convert an image from raster to vector. I know, it’s super obnoxious, but that's the way the cookie crumbles my friends. In fact, the “best" way to convert a raster image into a vector image is to just completely redraw it by hand. If this sounds like that would take forever, you are totally correct.

The point is, if you never want your graphic to be blurry, designing in vector is the best and easiest way to do so.

For your reference, here’s which file types are raster or vector:

Vector images are typically saved as PDF, Ai, or EPS files.
Raster images are typically saved as JPG, PNG or GIF files.

How can I design in vector?

I know what you’re thinking: “Okay, okay Mariah, I get it, I’m supposed to design in vector – but how the heck do I do that?!”.

Two words: Adobe Illustrator.

Illustrator is part of the Adobe suite and it’s literally the bomb.com. It primarily works in vector and in my opinion is the easiest to use of the three programs. I’m currently in the process of putting together a program to teach you all of the basics of Adobe Illustrator to eliminate the overwhelm of teaching yourself and ensuring you learn only the tools you actually need to create any graphics you could want for your blog or business.

Until then, grab the free checklist that will walk you through and ensure your images are never Pixelated. Plus I’ll email you updates on the Illustrator course when it’s ready in action!

Sizing and Resolution

The last way to ensure your graphics don’t turn out blurry and pixelated is to size them correctly. Figure out what dimensions you need your graphic to be and design it the correct size the first time. Even though resizing vector images is super easy, if the new dimensions are different than you had originally designed around you’ll have to spend time tweaking your design when you could have just done it correctly the first time.

Once you’ve designed it to the correct dimensions, you’ll need to save it out:

For web images, you’ll need to save your graphic out at 72ppi
For print graphics, you’ll need to save it as a high res (300ppi) PDF (though some printers prefer a different file type, PDF is the industry standard).

And that's all there is to it! All it takes is using Illustrator to design your images and then saving them out at the correct size and resolution and you’ll never have a pixelated image again. BOOM! Now make sure you download the free checklist for you to reference every time you're designing your graphics!