DPI

What DPI target(s) we should have for image uploads/transformations?

DPI determines how many pixels your printer is going to cram into one inch of space on the page. That’s why a higher DPI image looks better than a lower DPI image – the more pixels you squeeze into a small area, the finer the detail in your printed image.

Resolution and image pixel density are two separate concepts often blurred into the single term “resolution.” This makes it difficult to provide what’s needed.

Resolution refers effectively to the amount of information in an image, and more concretely to its dimensions measured in pixels. The amount of detail you capture in an image—whether a photo, scan, or graphic—is directly related to its resolution, as to capture ever more detail, you need ever more pixels. You might need quite a lot of pixels to provide a zoomable image of something with a lot of detail, like a machine, or to print a large-format photograph. To determine how big an image should be on your website, you have to know what size in pixels it needs to fill.

High Resolution Images

For printing, the recommended resolution for all images and art files is 300 dpi. The offset press cannot accurately reproduce resolutions above 300, so it is the industry standard.

Note: submitting files at a resolution higher than 300dpi does not improve print quality, and beyond a certain point it makes the files too large to process easily.

Medium Resolution Images

Sometimes, the only images or art files available are under 300 dpi. If your images or artwork are in the 200 dpi-300 dpi range, they will still look pretty good, although not quite as sharp as images at a full 300 dpi.

Low Resolution Images

Images with less than 200 dpi resolution are considered low resolution, and they will exhibit notable pixelation / blurring in the final printed product.

Images used on the internet are typically 72 dpi. This is a suitable resolution for websites since it enables a small file size and does not look visibly pixelated on most computer screens.

However, images at 72 dpi will ALWAYS look pixelated and low-resolution when printed.

Retina Displays

Retina displays, also known as “high DPI” displays, are awesome in that they cram more pixels into their screens than standard displays. This means that each individual pixel is even smaller so you get a much sharper image than on a standard screen.

All you really need to know is that if you’re optimizing for a retina display that’s squishing double the number of pixels into the same area as a non-retina display would, you need to double the pixels in your image so it still appears crisp. So, a logo that’s 300px across normally should be saved at 600px. Then, when that image is presented at 300px as originally intended, it’ll look nice and crisp on retina screens since the image has double the number of pixels and so does the screen. The DPI/PPI setting in Photoshop is still irrelevant because you’re not printing it out.

WARNING: Do not Upsample

It may seem like a good idea to open up your artwork in Photoshop and just change the resolution setting from 72 dpi to 300 dpi. However, this doesn’t actually increase the resolution in your artwork, it just makes the pixels in the pixelated image larger. This is called upsampling, and while these images will technically read as 300 dpi once you expand them, they will still look just as pixelated / blurry on the printed page.

When you change the resolution on an image, you’re resampling it, or modifying the amount of information in it. You can downsample, which tries to average adjacent regions of pixels to reduce information without making it blurry. Upsampling, by contrast, extracts patterns of details to fill in information, though it can’t create detail where none exists.

Downsampling is typical when you have a very high-resolution image, such as one captured by an iPhone or digital camera, and you want to reduce its size and storage based on how it much detail is necessary for the size at which it appears on a web page.

Choosing a different density is common for interface elements and for certain output devices that reproduce the size of something based on the ppi in the image file instead of sizing to fit on a page or other unit of measure.

Web considerations

We might be able to use srcset which would allow us to use higher DPI images for print.Though, this would require more overhead around what images we provide, and probably but up against storing/page load?

For example, this could allow us use image1-72dpi.jpg for web and then use image1-300dpi.jpg when media=print.

References:

Responsive images - learn web development: MDN. Learn web development | MDN. (n.d.). Retrieved December 21, 2022, from https ://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes
Dara. (2015, March 27). What dpi do web images need to be? (spoiler alert: It doesn't matter). Dara Skolnick. Retrieved December 21, 2022, from https://daraskolnick.com/image-dpi-web/
Fleishman, G. (2019, June 26). How to set a higher DPI without changing an image's resolution. Macworld. Retrieved December 21, 2022, from lhttps ://www.macworld.com/article/232934/how-to-set-a-higher-dpi-without-changing-an-image-s-resolution.html

Advanced Authoring Guidelines for Print