Have you ever printed out a photo or viewed an image on your computer that is fuzzy or pixelated? At VIEO Design, we tend to call them "jaggy."
If you're having a problem with jaggy images (like our poor Jaggy Santa on the VIEO Christmas tree), it's probably is the result of using an unsuitable image resolution.
What Is Image Resolution?
The resolution of an image refers to the number of pixels or dots that make up that image.
A higher resolution will mean your image or graphic will look more crisp and a lower resolution will mean it will resemble Mario in his Super Mario Bros 3 days. Although I do enjoy a good 8-bit image, sometimes it’s just not appropriate.
Image resolution is measured in PPI (Pixels Per Inch) and DPI (Dots Per Inch). There is confusion about these terms because they are incorrectly being interchanged. Without going into too much detail, PPI refers to the number of pixels on a screen and DPI refers to a printed piece and the cyan, magenta, yellow, and black dots.
The two resolutions you need to pay attention to are 72PPI and 300PPI. A 72PPI resolution is used for web-only images and 300PPI resolution is used for digital images that will be printed.
Here’s a quick way to see if your image is print quality. WARNING: This tip requires the use of Arithmetic.
Say you have an image that is 1697 x 1810 pixels, and you’re wanting to print this image at 8” x 10”. To figure out the maximum PPI you can get from this image, you would have to divide the width in pixels by the width in inches and do the same for the height.
1697/8 = 212
1810/10 = 181
In this example, 181 is the maximum PPI you can get when you print the longest size at 10 inches, and since that number is under the 300PPI minimum, the image will go all cattywampus when you try to print it at the 8" x 10" size you want.
So, how do you know what size you can print this image at and maintain its image quality? Simple - divide each side by 300 to find out the maximum length and width you can print it at. In this case it’s about a 5” x 6”.
1697/300 = x
1810/300 = y
This rule also applies when it comes to digital display. Luckily, you’re usually working with smaller resolutions, so the original pixel dimension doesn’t have to be as large.
If you want to avoid ugly, pixelated images, always think ahead about the pixel dimensions of your image, so you can use it at the correct PPI. No one likes jaggy images.
Now that you've got all of your web images looking crisp and clear, are you ready to move on to the rest of your website?
Check out our Website Redesign Checklist ebook to make the most of the process, or contact us today for help.