Pixel-Perfect: How to avoid grainy, pixelated, and blurry graphics
A problem we often see clients encounter lies in the realm of image quality. Unfortunately, grainy, pixelated images just don’t cut it for the savvy media consumers of today. The good news is, with a little extra insight, this issue can be easily avoided.
Raster vs. Vector
First, let’s go over some terminology – there is a distinction to be made between raster images and vector graphics. Digital photographs, because they are made up of pixels, are an example of raster images. Enlarging a raster image past the size in which it was originally created (to the point where you can see individual pixels, i.e. when there are too few pixels per inch) often leads to pixelation and blurriness. In contrast, vector graphics are comprised of lines and shapes instead of a grid of pixels. An example of a vector graphic would be an original logo file made in Adobe Illustrator.
Top Tips for Saving Files
Assuming that you have the highest quality image possible to start and access to the Adobe Suite, at least Photoshop or Illustrator (if not, you can download a free trial here), let’s talk about how to properly save a file for different online formats. When you’re saving an image that will be going online, you’re probably going to be dealing with raster-based file formats such as JPEG, PNG, and maybe GIF. When you have a complex image with several colors such as a photograph, JPEG is the best file type to use. If this image will be going online, make sure that it is saved at 72 PPI in RGB color format by going to File > Save for Web and changing the preset to JPEG High. This will ensure the image will look great on a screen and load quickly! When you are saving an image that’s not as complex with fewer colors, such as a logo or a simple graphic, a PNG will be a more suitable file format (Save for Web and then change the preset to either PNG 8 or 24). Both PNG-8 (8 stands for 8 bit and can accommodate 256 colors) and PNG-24 (accommodating millions of colors) would work, but since PNG-24 has support for more colors, it is favorable unless a larger file size is not an option. PNG also allows for a transparent background, which works well for websites or graphics when a logo is being placed over something else.
When you’re saving an image that will be shared on Facebook, a 1200 by 628 pixel JPEG is usually good to go (again, make sure to Save for Web and you can adjust image size by going to Edit > Image size and typing in different dimensions in Photoshop). However, note that if your image is smaller than these dimensions to start, sizing it up will only make it pixelated. The proper dimensions for a profile picture on Facebook are 180 by 180 pixels and 851 by 315 pixels for a cover photo.
Some More Terminology
So, you may be wondering since we’ve mentioned it a few times, what are DPI and PPI, and what’s the difference? DPI stands for dots per inch, referring to the printer’s output of an image—a printer generates each pixel of a printed image in the form of several small dots. A higher DPI creates a higher quality print. Likewise, a higher PPI (pixels per inch) is favorable in most cases as well—although increasing PPI also increases file size, which can make images load more slowly on the web. For this reason, 72 PPI is favorable for the web and 300 DPI is recommended for print.
We hope this brief overview of how to properly save images and choose the right file types for various formats was helpful! If you have any questions, feel free to reach out.
Invite Change Media Group to your inbox! You’ll get our start-up series of emails, then one email a week of must-know info. No spam ever, unsubscribe any time.
Carly Fox is CMG’s Visual Composer. Originally from Pittsburgh, PA, Carly will graduate from the University of Michigan next year with a Bachelor of Fine Arts and a Minor in Business. She is excited about combining functions of the left and right sides of the brain by studying the interplay between business and creative practices. Other areas of interest include fashion, writing, painting, and yoga.