Understanding Image Resolution: DPI in Print Vs. Web (Part 1)

Getting the right image-file size can be a headache for anyone. Uploading images sometimes seems impossible because of website requirements (too large, too small, wrong file type- you name it!). And it’s not unusual to take a beautiful image from your screen and find it completely pixelled in print .

Optimizing your images' original file for print or web use in advance is the best way to guarantee the results you are looking for. If you’re looking to print, then resolution is a big deal. Scratch that, image resolution is a HUGE deal for both print and web mediums. There are ideal resolution values for every printing size. Printing a poster out of an ID size picture might not turn into great image quality. In fact, in most cases it will not. Sometimes people think, "oh well on the web there’s not such need for optimization; if the image is big it it'll work..." right? Wrong! Image size plays a big role on page loading time and something as simple as naming your image properly could increase visitors. Larger images may look better, but also kill your load times and increase bounce rates.

Understanding the The Basics

Before you get started, there are some terms that you should get familiar with:

Dots Per Inch (DPI): Each dot is a sample of your image. The amount of dots per inch determine the overall quality of your image. The more dots, the more detail. Standard and Professional Printers produce images with tiny dots that mix four colors: Cyan, Magenta, Yellow and Key black also known as CMYK or the subtractive color system. There is space between those tiny dots (less space - crisper image) and the DPI refers to their density.

Pixels and Pixels Per Inch (PPI): Wikipedia describes them as "the smallest controllable element of a picture represented on the screen". Each pixel is a sample of your image, made up of tiny “sub-pixels” that combine light elements that the naked eye blends into one. In addition, pixels help create images using a 3 or 4 color system. RGB (Red Green and Blue) will display better on screens, whereas CMYK will provide the best results in digital and/or offset printing.

Resolution: This is your image quality. If your resolution is high, your image becomes clear and sharpened to the eyes. Your image resolution requirements change from web to print. 72dpi would be completely acceptable for a website, but if you’re going to print it will not look its best. Depending on your printing size you could start at any point between 150dpi and 300dpi. (300 dpi is usually the default for most high-quality printed products).

File Formats

You have probably found .jpeg, .png and .gif files on different websites. These names indicate the format of the file you are dealing with. Here’s what you should know:

• JPEG stands for Joint Photographic Expert Group. This format is the most commonly used on the web because it’s ideal for colors and brightness. Photographs are usually saved in this format.

• PNG stands for Portable Network Graphics. It’s mainly used to preserve transparencies on images. Therefore they become easier to include on graphics, especially if you’re creating buttons or icons.

• GIF stands for Graphics Interchange Format. It supports animations and is very useful for large blocks of color.

File Size

File size refers to how your file is measured in kilobytes (KB) or mega bytes (MB). 1,000 KB is 1 MB. The more MBs the "heavier" the file and the slower the digital load. To improve load times in digital mediums compress images. Compressing a file does not necessarily means lowering its quality. As you can see in the image below, it takes a lot of compressing before visually altering a picture. This 60.4KB was compressed to different sizes using a free online image optimizer. It gives you a set of compressed versions of your original image so you can choose the one to use.

Resizing an image is especially useful for storing and sharing. Web image resolution is thought to be linked with very large files, which is not necessarily the case. Large files will be harder to send via email and will take lots of storage space from any device. Think of it before using your files for any professional printing project. File sizes and formats are the very basic things to know about image resolution. Defining your print and web needs is the first thing to do to make sure your images are optimized properly. Make sure to keep an eye for our next post on web and print optimization tips. Visit our comment section below and let us know what you think. Are there any specific topics you would like us to elaborate on?