Photo by Michael Maasen on Unsplash
Resolution for web and print media can be super confusing.
I’m often asked by my clients (and my mom):
- What resolution is my image?
- What is the best resolution for web? For print? Are they different?
- How do I send the printer my images in 300dpi?
- Why won’t my high resolution image upload to my website?
- Can I make this low res image into a high res image?
- What is dpi?
- Why did this print blurry? It looks good online.
If you’ve ever asked these or similar questions, rest assured that you’re not alone.
As a business owner, you obviously don’t need to be an expert at images or their resolution. However, having a basic understanding of it can save you time, money and frustration when dealing with suppliers, printing things on your own or updating your website.
Know the basics of resolution, so that your images will look sharp and professional everywhere you print or place them.
This is a huge topic and it wouldn’t all fit into one blog post, so I’m only breaking down the basics here to keep it short and simple. If you’d like to learn more, I recommend that you to google your question if you’re short on time OR email it to me – I’ll shoot you an answer as soon as I can!
Basics
Web Resolution (ie. low res or web res) = 72ppi
Print Resolution (ie. high res) = 300dpi <— most often, but it depends on what you’re printing
What resolution is my image?
On a PC: Right click the image, select Properties and go to the Details tab. The image info will be listed there.
On a Mac: Right click the image, select Get Info and expand the More Info tab. The image info will be listed there. You can also often see the details of your image underneath its preview in Finder.
It’s easy to go down, but hard to go up
Can a high res image become a low res image?
YES
Can a low res image become a high res image?
Technically yes, but it may look blurry
Are DPI and PPI the same thing?
NO. DPI is for print and PPI is for web, as outlined below. However, they’re used pretty interchangeably these days. If someone asks you for a web image at 72dpi, just know that they mean PPI and this term confusion isn’t going to affect the outcome of your project.
DPI = Dots Per Inch (print – dots prefer to dots of ink)
PPI = Pixels Per Inch (web – pixel stands for Picture Element and is a tiny square of one colour)
When working with files, there’s 3 things to consider:
- Resolution (ppi/dpi)
- File dimensions in mm, cm, inches, pixels, etc
- File size in kb or mb (kilobytes or megabytes)
The smaller #1 and/or #2 are, the smaller #3 will be.
PRO TIP: Always procure the highest resolution images for your brand as possible, so you can easily use them for any print or web project.
Web
Web resolution is simpler than print resolution (plus so much of business is online these days), so let’s start with that.
Screens/websites/apps are visually made up of pixels, which are thousands of tiny squares lined up in a grid across your screen.
Screens need lower resolution that print materials to look sharp – 72ppi (pixels per inch). So there are literally 72 pixels in every inch of the image.
Due to the nature of the internet, image resolution must be low to view properly and load quickly. Low resolution doesn’t mean that the image will look blurry, it just means it needs fewer pixels per inch for optimal viewing. You can still have a sharp looking image on your website at 72ppi.
If you upload an image with higher than 72ppi, it will either automatically be scaled down for you (if you’re uploading it somewhere like Facebook) or it will load really slowly. Having it automatically scaled down sounds like a quick solution, but it may not be done very well, which can leave your image fuzzier than you’d like.
Images on your website:
Just because your image is 72ppi doesn’t mean it’s automatically suitable for your website. You want your website images to be small in file size as well (400kb and under is best). If they’re too big, they’ll load slowly and no one wants a slow website. If you use WordPress and have a lot of too-big images on your website already, you can install a plugin like Smush to downsize/smush all your images into smaller versions of themselves (that still look great online).
To ensure a lightning fast website, ensure your images are
- 72ppi
- 200kb or under
If editing your images yourself, make sure to use one of the tools at bottom of this post.
Print resolution is much more complex, so again…we’ll stick to the basics!
Printing requires higher resolution, whether you’re printing images or text. High resolution images look sharp, but can also have a large file size and take longer to load, print or transfer.
The most commonly requested print resolution is 300dpi. A lot of print materials will require 300dpi, such as:
- business cards
- book covers and packaging
- brochures and fliers
- magazine advertisements
- professional photo prints
Your printer will let you know what they need, depending on the media. They’ll give you the “specs” for the files they want for the job, which is short for “specifications”.
Small vs Large format printing
The print pieces listed above are relatively small and usually viewed up close (from a few inches to a few feet away). When you’re printing something much larger that will be seen from a distance, like a banner or large poster, you can get away with fewer dots per inch (ie. lower resolution / dpi). Large banners will commonly require 150dpi. Rest assured the print will still look sharp to viewers from afar PLUS the file size will be lower, making it faster to send and get printed. If you wanted to send a 5×2 foot banner at 300dpi to the printer, the size would be massive and make the whole process difficult. Best to scale the resolution down, if the image dimensions need to be large. When you’re printing a small image, the dimensions are small, so the resolution can be high without impacting the file size too much. It’s a balance between those two measurements: image dimensions and resolution/quality.
If that was all a bit fussy for you…
Just remember to ask the printer for the “Print Specs”, so you know exactly what to be providing to them (or what to ask your designer to provide). Ideally you’ll only have to pass information between suppliers, and not have to worry about anything on your end!
PRO TIP: Printers, designers and photographers are ALL able to adjust images for you.
They may charge a fee for this of course, but if you don’t have photoshop or another image editing application that you’re comfortable with…this fee is often well worth it for the hassle it will save you.
How to edit the size or resolution of images at home
Do you need to take care of some editing or printing by yourself and aren’t sure where to start? It all depends what software or device you want to use. I’ve listed a few options below to get you started!
Adobe Photoshop: Check out Adobe’s tutorials
On a Mac: Check out Apple’s instructions for using Apple Preview
On a Mac or PC: Check out this tutorial for both Microsoft Paint and Apple Preview
Online: Check out Canva’s Photo Editing options or check out this list of other free photo editing software.
Hopefully that run down on image resolution gets you on the right track! If you’d like a much more in-depth breakdown of resolution, check out Wikipedia’s explanation.
If you have any questions, you’re always welcome to contact me.
