Image Resolution for Website Design and Graphic Design

Having images at the right resolution is very important when it comes to sending the files to the printer, be it your own printer or a local firm. Images at the wrong resolution can lead to fuzzy prints or your printing firm just refusing the work. If you’re creating anything which might get printed one day you should be aware of the resolution you’re working at or you may find yourself or your printing firm having to re-create images down the line which can be not only time consuming but costly.

It’s a little different when it comes to making images just for a screen, as we’ll briefly look into.

What is Image Resolution?

Resolution is in basic terms, the size of an image. It’s the density of dots that make up the image when printing. The bigger resolution, the more detailed it is, the lower the resolution, the less detailed and fuzzy it becomes. DPI (dots per inch) and PPI (pixels per inch) are often used and are much of the same thing. When going into the sizes there is a lot of background reading to be done, I would suggest reading this article called Say No to 72 dpi, it outlines resolutions mainly for screens very well and explains why the concept of PPI for web design is a bit of a myth and is often misunderstood—simply as video works in pixels, not inches.

Image Resolution for the Web

The goal of an image on a website is to get it to load fast. It’s useless to have massive images on your website and it takes forever to load—especially on mobile devices using a slower connection. There is no notion of DPI on a computer screen, it’s done in pixels, not dots and inches like a printer. Without going into massive detail here, check out the Say No to 72 dpi article linked before if you’re really interested. Equally there is a good article on the Myth of DPI at the Web Designer Depot website. But to keep it simple, if you need an image to be 100 pixels by 200 pixels, make it that size, the DPI or PPI doesn’t matter if it’s just for viewing on a screen.

Image Resolution for Printing

Normally printing firms require work to be at least 150 DPI, but often at least 300 DPI is required. Some specialist printers might require even more, it’s a good idea to check with the printers before carrying out work if you know it’s a larger printing project. Generally the bigger resolution the better the image can be printed.

Vector Images

Vector images don’t use resolution the same way as normal images. Vector images are based on maths to calculate paths and a frame of where the image goes. It has no concept of sizes and resolutions. Basically speaking, if you want your image 100 times larger the calculations are multiplied by 100. This means that vector images are not tied to the same constraints other images are, they can be scaled up and down as much as you want without losing quality. If you’re printing something really, really large then a vector would be the way to go. It keeps your file sizes low and you don’t need to worry about quality. The trade of is you need specialist software and knowledge to create these images and not everyone has both in their head or installed on their PC! A common application used to work with vectors is Adobe Illustrator. Sometimes your printing firm will prefer it if you can provide artwork such as logos in vector format as it allows them to scale it as they need without worrying about quality.

To Summarise All That!

If you are making an image for the web or digital displays, ignore the DPI or PPI just use the dimensions you need it to be such as 400 pixels by 800 pixels. After all, 400 x 800 pixels is always going to be 400 x 800 pixels.

If you are making an image for print, create your document in the physical size you need. If it’s for a 40” x 40” print, make your document that size and set it to 300+ DPI. It’s easier not to work in pixels here, it confuses matters. This is because having a higher DPI/PPI requires less physical space to fit those pixels in. Confusing? Try create a document that’s 1000 x 1000 pixels at 300 DPI. Then create another document that’s 1000 x 1000 pixels at 72 DPI. You might think that the document that’s 300 DPI is going to be bigger right? Wrong. The 300 DPI document is 8.47cm x 8.47cm. The 72 DPI document is 35.28cm x 35.28cm which is bigger! This is because the 300 DPI image is squeezing in more of your pixels per inch. The 72 DPI image is squeezing in less of your pixels per inch, so it spans a larger area. If you work in the physical size you need from the off, it makes things much simpler.

If you are making an image which might be used for a bit of everything you should really work with a vector, or at really large resolutions. Failure to do so might find printing on larger surfaces impossible without re-creating your image.

, .

Can’t get enough? Subscribe to the Newsletter.

Using the great power of the internet—and MailChimp—you can get what I write straight to your inbox. All things design, web, and even photography sometimes.

It’s very occasional, and if it turns it it’s not for you, you can unsubscribe with just one click.