Optimizing Images for Web and Print
Not all file types and color modes are created equal, so when it comes image files, there are a few easy steps you can follow to optimize your image for whatever platform or media your image is intended - whether that be print, or web use. Following these steps will guarantee that your images look their best, with sharp online display and beautiful color tones in your prints.
In this post, I will walk you through the basics of how to prepare your images to use on the web, as well as how to optimize your images for printing.
How to Optimize Images for Web
Lets start with a few terms that you need to understand:
Color Mode: RGB
Anything light-based (computer and TV monitors, smart phones, and the LCD screen on your DSLR) uses 3-color additive mode, which combines the colors red, blue, and green to produce all of the colors that we see on our monitors. It's pretty amazing to think that just these three colors, in various combinations, can create that many colors, right?
Your DSLR's default color mode is sRGB (Standard RGB, is affectionately known as "silly RGB" because it isn't the best quality), and even when you switch profiles in-camera while you are shooting to, for example, Vivid or Neutral, you will still be in a form of the RGB color mode.
If you feel the need to double-check your file in Photoshop to see what color mode you have, follow this path:
Keep in mind that the above method is a simple way to check the color mode. When we change color modes later in the tutorial, we will use a more fine-tuned method.
Resolution: Pixels Per Inch
The resolution of an image is measured in pixels per in (ppi). The minimum resolution for an image that is being uploaded online is 72ppi. Anything less than 72ppi will result in:
- Poor quality
- A very small image
"Pixels per inch" is exactly what it sounds like, too! The term is simply describing the number of pixels in an image. If we zoom in and compare the amount of pixels in an image at 72ppi versus 300ppi, we are going to see a lot more pixels:
The small, rectangular bounding box in the photo above represents the area that we zoomed in on. At 72ppi, a lot more colors are showing up, whereas at 300ppi, there aren't as many. This is because 300ppi is a much higher resolution, therefore the image has more detail (pixels) per inch.
You can also think of it this way: in the 72ppi image, you have a lot of information compressed into a smaller file, whereas at 300ppi, the information is more spread out.
When sharing your images online, be sure to upload them at a low resolution - 72ppi is always a good number - as this will make your blog and webpage load much faster and take up less storage, which is ideal when your website has a storage limit. It is also a small deterrent for people taking your image without your consent.
Best File Types for Web: JPEG, PNG, PDF, BMP
The file extensions listed above are the most commonly used extensions for web-based media. They are compressed files, meaning they are smaller files, which, like we discussed above, helps the images load faster in a web browser.
Since these types of files are compressed files, they are NOT recommended when printing your images - we will touch on that in the next section below.
How to Optimize Photos for Print
While your RGB images may look fantastic on-screen, once printed, you may find that they lack something - they will often be darker, or lose saturation. This is because RGB colors are optimized for screen display, not printing.
To get the most out of your prints, you will need to switch to...
Color Mode: CMYK
Used for printing and ink, this 4-color subtractive mode produces all colors using a combination of cyan, magenta, yellow and black. Most of our at-home printers use a combination of these four colors in their ink.
In many cases, your printing company will specify that your files be converted to CMYK when you send them over to be printed. They may also suggest that you download a custom color profile from their website.
If you are printing at home, be sure to convert your image files to CMYK before you print. This will ensure that your images are optimized for print.
To convert files to CMYK in Photoshop, select Edit>Convert to Profile>Working CMYK then follow the prompts.
Note: It is important to convert your file to CMYK this way rather than the way we checked our color mode earlier. Selecting Convert to Profile creates a more detailed profile. You may or may not see any sort of shift in the RGB image versus the CMYK image on your screen, but you will see a significant difference when your image is printed.
Resolution: Dots Per Inch
As photographers, Dots Per Inch (DPI) will not come up as much as Pixels Per Inch (PPI) since our photo editing software, like Photoshop and Lightroom, measure our images in PPI, but it still doesn't hurt to understand what it is. Sometimes, your printing company will use the term DPI, so it is helpful to understand what they mean.
Just like your computer monitor's resolution is measured in pixels, the resolution or output of a printer is measured in dots.
You know how on a newspaper print you can see tiny dots within the ink? DPI is that exact same thing. Instead of printing out pixels, our printers lay down many, many dots in order to create a print. So, much like PPI, the higher the DPI number, the better the print resolution.
Best File Types for Printing: TIFF, PSD
Remember how we talked about files such as JPEGs being compressed? When it comes time to print, we want a file type that will contain the most information for optimal printing - ie, not a compressed file!
PSD and TIFF files are the preferred file type for printing high resolution images. They will make for very large files, though, so you will want to save a JPEG to upload online, and then have a separate TIFF or PSD for printing.
Download your FREE Optimizing Images for Web & Print Cheat Sheet HERE
Do you have any questions or comments about optimizing images for web & print? Leave us a comment below - we would love to hear from you! And please share our tutorial using the social sharing buttons (we really appreciate it)!