I recently wrote an article for The Business of Boudoir about the common mistake people make when trying to determine the size and resolution to export images from Photoshop and Lightroom. The article is filled with some history about why we are stuck with confusion over DPI vs PPI. Go give it a read if you are struggling with that topic.
Now even with that understanding, there is still some confusion on how to correctly export images at the size and resolution you want from both Lightroom and Photoshop. There are a number of different ways to handle this in each application. In this article I will go over Photoshop.
Now let's do some basic math. 3000 pixels at 300 pixels per inch, 3000/300=10.
So this will create an image that will print at 10″ wide.
Now let's take a look at the Image Size function inside of Photoshop. We can see from this dialog that our math was indeed correct. 10″ x 10″. Here is the key factor in this dialog box, the Resample Checkbox. Here I have it unchecked. What does that mean? It means any change I make now, only affects the math. They do not change the pixel dimensions of the image. Let me repeat that, THE PIXEL DIMENSIONS WILL NOT CHANGE. Sorry for yelling 🙂 but this is where I lose people.
So let's prove that. I am going to change the Resolution to 72 PPI. You can see the Image Size is still 25mb, the pixel size is still 3000 x 3000, but the internal math has recalculated the print size to roughly 42″ x 42″. 3000/72=41.667. You will also not that if you open the drop down next to Width and Height that Pixels is greyed out. That's because we are not resampling.
So what exactly is resampling? Well it is taking the original pixels and crunching them down to less pixels or expanding to more pixels. The latter is not something you typically want to do as Photoshop has to guess at what needs to be added to fill in the extra pixels. That is typically called upsampling. More frequently you will be downsampling, reducing the amount of pixels. Why downsample? It makes the physical size of your image smaller. You want this for speed in loading images on the web. In this image, all I have done is check the Resampling box.
At this point nothing has changed. So lets knock this image down to a reasonable size. For Facebook, there are some set sizes that give you the best image quality. Remember Facebook compresses your images so sticking to their guidelines helps. The maximum size for a Facebook image is 2048. Here are Facebook's specs. So you can upload a 720, 960 or 2048 width image. So let's go for the lowest so we can see what effect it has on our image. We can see Image size is now reduced to 1.4MB. Pretty drastic reduction because we have thrown out 8,481,600 pixels from our image. 3000 x 3000=9,000,000, 720 x 720=518,400. Now this is still fairly large image to upload to the web. Why is it still 1mb? It's still full image Photoshop file. It has not been compressed to a JPEG or PNG file yet.
So now we have to save it as a JPEG or PNG file. When you save as a PNG you get an option dialog where you can control the Compression. I set this to No compression. It creates a 1.6mb PNG file. If we save as a JPEG we get some different options.That created a compressed JPEG file that is only 29kb. A substantial reduction in file size. Now I used Save As for both of these. I still have my original file in Photoshop however, I have thrown away pixel information. If I save this file then that information is gone forever. So what is the solution?
Save For Web
Im actually amazed how many photographers do not use this option. This is my go to tool for exporting images from Photoshop that are destined for the web or maybe small res proofs for a client. This gives you the most control over your exported image and does not trash the original file at all.
I'm moving away from my sample 3000 pixel image so you can actually see what this feature does for you.
As you can see from this dialog box, it is loaded with options and information. In this example I have set the Image Quality to 80 which Photoshop considers Very High. It is optimized, converting to sRGB if it was something different, and I have set the width to 2048. This is going to create a JPEG for me with these settings and it will not impact my original image in Photoshop.
If you look at the bottom left corner of the Preview window you can see that it gives you an estimated size and download speed. You can select various speeds by clicking the little dropdown area. So this image will be approximately 609kb and will download in 25 sec on a 256kbs internet connection. You can control this by either reducing the pixel size or lowering the quality. I feel this is bay far the best method for getting your images out of Photoshop and onto the web.
In my next article I will go over the Export options available in Lightroom.