Image Resolution in Photoshop: Preparing for Print and Web Use

Let's talk about resolution, resizing images, and how to appropriately prepare things for print or web. This particular image, when I first open it up, if I want to get a sense of how good a quality of an image is this, how much detail is in this image, I'm going to get a true sense of that if I zoom in to 100%. At 100%, the bigger the image, the more detail there is.

Your zoom level is important because if you're zooming in beyond 100%, and you can see your zoom percentage down here,  then you are enlarging those pixels. And as I zoom in on those pixels, you are going to see those pixels when you make them large enough. When you're at 100%, one pixel in your image is mapped to one pixel in your screen.

So this is an accurate representation. If the image looks bad at this size, it's bad. If it looks crisp and sharp and good and detailed,  then it is.

So this is your most accurate judgment. If you're zoomed out, a blurry image,  sometimes if it's just a little bit blurry, it might look okay if you're zoomed out. But when you zoom in 100%, then you see, oh yeah, it's a bit soft.

Now this image is pretty good. It's got some nice focus on it. It's nice and crisp.

Also, if something is pixelated because you're zoomed in, that's different than it actually being a pixelated image. It's only pixelated because you've zoomed in on it. So be careful of your percentage of zoom.

Now, when I zoom back out to fit everything on screen here, if I want to prep this for print and I want to know how big can I actually print this at good quality, I can judge that by looking at my image size. When I go into image size here,  this is going to tell me at a certain resolution or pixels per inch, how big can I print this? This is a print concept. And we're going to talk later about how this applies to web graphics and how we might want to change the resolution of web graphics.

But when it comes to resolution,  that is a print thing of how many pixels per inch. And the goal, the ideal is 300 pixels per inch. Now, I can't just change this to 300 while I leave resampling turned on.

I'm going to turn resampling off. The term resample means to recalculate or refigure out the number of pixels,  meaning it could add pixels, it could subtract pixels. We have to be very careful if we want resampling to be turned on.

If it's turned off, it will not create or remove any pixels. It will not resample them. If I change this to 300 pixels per inch, now we're getting a smaller print, but it's higher resolution.

Higher resolution means more pixels per inch. Low res means fewer pixels per inch. The idea is that if you have one pixel per inch,  that pixel, that square block is an inch.

And that's huge. Like you would see that if you're close to it. Now, if you're a mile away, then, you know, maybe if this is a billboard and you're in your car traveling at 55 miles an hour on the highway, having a few pixels per inch might be fine on a billboard because it's so far away.

But if you're looking at, let's say, a business card or a magazine or a book or something, and it's in your hand close to your face where you can see the detail, you want something higher resolution because you don't want to see those pixels. You don't want to see those square blocks. So the ideal is 300 pixels per inch,  and we want to be taking our current pixels, not adding more pixels, not removing any more pixels.

We want to keep the same number of pixels. We just want to see when we shrink those pixels so small that the human eye can't see them when they're printed, how big can I actually get this? So this is almost 8.5 × 11. Not quite.

If I go to 8.5 by a little bit more than 11,  I get down to 277, which is pretty close to that 300. You're really not going to notice much of a difference between 275 and 300 pixels per inch. So this would still print fine at an 8.5 × 11.

Now, if we want to go up to an 11 × 17, I need to go up to this. Now we're down to 206. It would be okay, and it depends on how far away you're going to be.

Is this going to be a poster on a wall that you're generally going to be several feet away? It would probably be okay. The ideal is 300. That would be better, but really, you know, anything from like 200 is starting to get a little bit lower, but like 225 and above, you're probably fine.

Again, the ideal is always to try to get to 300 whenever possible, but it depends on how far away you're going to be from this. So this print that's 32 inches by 48 inches at low res, you can print it that large,  but at 72 pixels per inch, when you get anywhere close to that, you're going to see those pixels. Again, as far as it being really far away on a billboard, not a problem.

So you have to know your use case. How far are you going to be away from that image when you're looking at it? So whenever you just go into your image size, if you just want to see how big can I print this,  turn off resampling, switch to 300, that'll tell you. Or if you want to know what the resolution is at a certain size, then put in that size and see what it tells you the resolution will be at that size and is that acceptable or not, depending on how far away you're going to be.

Now, let's say we want to go to 300 pixels per inch, be exact. Then I can check that. I just leave the resample off, just going to go to 300, hit OK.

I did not add or remove any pixels. I just changed the setting so that when you take this into other design apps such as Illustrator and InDesign, it will come into those apps at the appropriate inches, right? The set number of inches based on that 300 pixels per inch, as opposed to coming in huge and then you're having to scale it down and try to figure out what the right resolution and right size is in those other design apps. Also, images always start their life as RGB because we capture light.

RGB, red, green,  and blue, those are the primaries of light. And so if we want to print this, ultimately things need to be converted from light, which is RGB, into pigment, which is CMYK. And ideally, in a theoretical world, we wouldn't have needed a fourth color.

Theoretically, when we think about pigment and how it differs from light, it would have been, theoretically here speaking, just three colors,  just like we have red, green, and blue. We would have had the white of the paper and you're applying yellow ink, you're applying cyan ink, you're applying magenta ink, and theoretically where they overlap, it would have been black. Now, because of impurities of inks and so forth,  it's more of a muddy brown.

It's not a true good black. We wanted to add black and B was already taken by blue, so we went with K for black and that gives a nice true black because the overlap of these other three colors doesn't give a nice true punchy good black. So that's why we had that black in there.

And so CMYK files are kind of working differently because we are starting with white in the sense that if you start with the white of the paper, you add ink to it, right? And as you add ink, you get darker. If the goal, for example, is to get to white, you actually have to subtract ink to get to white, right? You have to remove it. That's definitely the opposite of RGB.

RGB is what we call an additive process because if the goal is to get to white,  how do you get to white? Do you start with a pitch black room where you add light and you get brighter and brighter to get to white light? You're adding color. Whereas CMYK,  you're removing color to get to white. So these things, they work opposite because you start with opposites.

If you, for example, are in RGB, you're starting with the absence of light. You're starting with blackness, right? So you're adding colors to get to white. Here, when you start with a piece of paper, you're not starting with any color.

And so as you add color in RGB, you get brighter,  but as you add color here, you get darker. It's the opposite, right? So that's something to keep in mind when you're doing color adjustments. If you're ever in a CMYK file, dragging up versus dragging down in curves will be opposite of each other.

And are you adding color to get brighter? Or are you removing color to get brighter? CMYK and RGB kind of work opposites of each other. So whichever one you learn first, the other one kind of feels a little bit foreign because everything kind of feels topsy-turvy upside down because everything is kind of reverse of each other. But ultimately, even though we start as RGB, we can convert to CMYK.

And CMYK, when we convert to it,  will be converted into those printable inks. Now it's possible that your image could go through some color changes a little bit because CMYK is a more limited color palette. So I've got this file here, which shows the color capabilities or the color range of CMYK, RGB, and what we can see with the human eye.

There's also colors that we can't see with the naked eye, but of colors that we can see, mixing up red, green, and blue in various amounts gives us a good range of colors. CMYK mixing up those inks gives us fewer colors, meaning we can see colors on our screen that we technically can't. There are different RGB color spaces.

For example, sRGB, or safe or standard RGB, is a smaller color space that is more for things like on the internet. They go with a smaller RGB space. Better, higher quality monitors are capable potentially of going to Adobe RGB to show more colors.

There's a lot of monitors that don't do that, but some can. For example,  a lot of Apple displays can show more color than just sRGB, but it depends on your particular monitor. So there are different ranges of RGB, some of which are bigger, some of which are smaller.

So it's not that there's just one RGB and 1CMYK. CMYK, for example, usually is device specific for that particular paper, for that particular printer. What is that paper printer combination capable of doing? But in general, for the most part, RGB can show colors that you can't print.

So think of converting to CMYK as you're losing color. Generally, you're converting down to CMYK for the most part. We start all images by capturing light.

We start as RGB. So you want to keep it as RGB, in my opinion, as long as possible, because if you are going to use this online and in print, I like to do my retouching and color correction and everything in RGB. And also everything in Photoshop works in RGB.

Most things work in CMYK, but not everything in Photoshop works in CMYK mode. So I generally keep my images captured as RGB, edited as RGB,  keep working as long as I can, and then at the end convert down to CMYK. And I can always keep a copy as my RGB original.

I just save my print version down to CMYK. And you can do that by going in to converting to CMYK. So I do that later on in the process.

So I make sure my resolution is good and I convert to CMYK. And then as far as formats go, when I'm saving this, if you're within standard Adobe apps, Photoshop is a great format. So you just go with Photoshop and this PSD file, you can import that into Illustrator.

You can import it into InDesign. You really can't go wrong within the Adobe world for going with Photoshop. Now, if you're going to send this to like a printing service as just like a photo printing service or something,  a lot of times they don't allow you to upload Photoshop files, right? When I talk about printing, there's commercial printing, like offset press.

There's also photo printing services where you send it and you get a photographic print back. So it depends on what you're using it for. So Photoshop going to InDesign, Illustrator, great.

That's one way we can save it. If you were saving this for uploading to, let's say, a photo printing service or something like Shutterfly or another kind of service, kind of like that, for that, I would say save it as a JPEG. So you could do a save as, save as a JPEG, and sometimes you can't save as, especially if you have layers, by the way.

So let's say I had some layers in here. Let's pretend I do some color correction here. When you go to save as, it's only going to show you file formats that support layers.

So you can do a save as with Photoshop, but if you ever want to make a JPEG out of something that has multiple layers, you'd have to do save a copy. So because you keep your original for editing purposes and then your copy, that could be a flattened JPEG, because keep in mind that JPEGs do not support layers. So I could save a JPEG and then I could call this for print and just make sure you go with the largest quality because the highest quality will give you a bigger file size,  but we don't care about a big file size when we're just uploading this to a printing service.

It might take a little bit extra to upload, but we want the best quality. So the lower you go with the quality, the worse it can look. It does reduce your file size, but I don't want my print to be of lower quality.

So I go with the highest quality, largest file size. That way I get the best print quality because a lot of printing services will not allow you to upload a Photoshop document. We go with a JPEG instead.

Now let's take a look at another image here and let's say we want to save this for the web. If we're putting this online, this image might be way too big. If I view this at actual size, the 100% size, this is way bigger than it needs to be.

Let's say within a website there's a certain allotted area, like if you're saving for social media or something, they might have certain pixel dimensions. If you're working with a Web Developer or you're working with some sort of website and they say to go to a certain pixel size,  like on social media, then we want to resample to that current size. So to that new size I mean.

We can go to our image size and this time I do want to resample because I want to throw away the extra pixels because online we want these images to download quickly. So let's say we're putting this onto a website and we need to optimize this. It's different if you're putting something on social media, they're going to take care of the optimization.

With social media you can actually often upload a much bigger file and they're going to lower the resolution, they're going to optimize it, but let's say you're putting this onto a website where you need to optimize it yourself and they require it to be a certain pixel dimension. So in that case I would want to resample it. And I'd want to look at the number of pixels that are necessary because we measure things online in pixels.

We don't worry about the resolution, that is a meaningless number. It can be one, it can be a thousand, I don't care what it is. Just leave it at the 72 or whatever it is.

It literally doesn't matter. All that matters is the pixel width and pixel height. That is what matters because online we measure our screens in pixels.

And here's just an easy quick way to start to get an idea of how many pixels. The average big screen is an HD screen. So that is a 1920 screen, 1900 pixels.

If it's a 4,000 version, that's a high res, it's twice that. So 1920 times two. But a lot of people don't have those big HD screens if let's say you're on a laptop.

A lot of laptops are somewhere between 13 to 1500 pixels. 1400 being kind of a, 13-1400 being kind of a common size. So let's say 1300 pixels.

The entire screen is 1300 pixels. If I wanted something that would cover the entire screen, 1300 pixels would cover, on a lot of computers,  the entire screen. Now if I only want to cover half, I'll need half that.

So let's just round it down to like 600 pixels. So it all depends on how big it's going to be on that screen. Right.

And so we go with a certain size and when I resample, it's going to resample and throw away the extra pixels that we don't need. We hit okay. And then we zoom in to 100 percent.

And let's go back here. Zoom in 100 percent. Now I'm on a high res screen.

And technically that means that I need twice that amount of pixels if I'm going to make a high res image. Notice how this is only about a quarter of the screen. And I said I wanted to try to go for about half the screen.

So it depends on if you're going to make a high res web graphic or a low res because back when we went from iPhones being like the iPhone 3 to 4, cell phones went high res. Eventually that same thing happened to desktops as well where technically I know I said it was about 1300 pixels. If it's a high res screen, it's twice that.

Just like an HD display, which is 1920, the high res version of that is a 4,000 display. It's twice the 1920. So technically I need something about twice this big.

So let me undo that. And if I go to my image size,  instead of going to 600 pixels, right. So let's say if the whole thing is 1300, it's really twice that.

It's really 2600. So half of that would be about 1300 pixels if I'm going to do a high res image. I'm on a high res display here.

And so now notice how big this is on my nice high res display. If you're not sure exactly how many pixels to go with, talk to your Web Developer, look up for a social media site. What do they want? It all depends on how you're going to use this as to what size you make it.

But once you've gotten the right size, once we have resampled to that size,  it is literally shrunk down your image. You've thrown away pixels. So I now have fewer pixels than what I started with.

Make sure you're doing this to a copy of your original. Don't save over your original. So make sure that if you're going to do this, that you either just save out the web version and don't save your over your original.

Or if you're going to do this and you want to keep your original Photoshop file, make sure you do a save as and call this, let's say web or something and save this as a Photoshop file so that your resolution of your new file where you threw out those extra pixels, you don't want to permanently lose those, right? You can always go back to your original file that you are in if you need to recover all of those pixels. If maybe you want to make a bigger version of this. So be careful about accidentally saving over your original files.

Now, once you're all done here, then this would need to be saved as a JPEG for putting online. We can do that through the export. We can do it through the older save for web, or we can also do it through the newer export as generally we would want to go with the new export as.

And here you can choose your JPEG. Now, if you want the highest quality, which will take a bit longer to download, you can go with that. But if you are responsible for optimizing this to file size, you can go with a lower quality and still have it look OK.

As I zoom in here, be careful about going too low where you start to see a banding of colors where it starts to look like stripes. Watch for artifacts, which are these kind of distortions here that typically happen or pixelizations that happen at edges. It kind of stumbles at an edge when it hits it and creates these kind of pixelated, chunky areas.

You also, when you go too low, can lose a lot of detail. So when we go with higher quality, you notice there's a lot of detail that's kept and the lower qualities lose that. It kind of blurs it away.

If you are trying to optimize to a small file size so your image downloads quickly, then you want to go as low as you can get away with without it looking bad. So here I'm starting to lose detail. So that's a little bit too much.

But if I pop up one, that looks pretty good, especially at the normal 100% size. I can't really notice that loss of quality, even though there is some loss of quality. I don't need to go all the way to the highest quality.

And pay attention to your file size. This is 136,000. At the highest quality, it's almost 800,000.

So even just popping one down,  just one. Look at that. That's seven, 800,000.

Come down, under 300,000. Come down again. It's like going in huge.

This is an exponential growth as you get to the high end. So each time you can pop down, it's going to dramatically cut your file size in half, pretty much. Especially at the high end, it cuts it down dramatically.

So go as low as you can get away with if you're trying to get the smallest file size to download as quickly as possible. But don't go so low that it looks bad. And then we can save out our JPEG.

Now, notice that convert to sRGB is turned on. SRGB is safe or standard RGB. And if you're going onto the internet, if you're going on screen,  generally sRGB is what you want.

And so it's turned on that even if you were having a file that was maybe captured on a camera that was capturing as, let's say, Adobe RGB or something,  this will convert it into sRGB, which is what we want, because that's the destination of where we're going. And so if you don't have that turned on, then it's possible that your colors could shift or could get duller. So it's turned on by default.

Just leave it turned on. Don't bother embedding your color profile. That just adds extra file size that you don't need.

Most browsers don't use color profiles anyway. Just leave convert to sRGB on. That's a good thing.

And just want to point out to leave that on. So I'm going to hit export. And I can put this into my folder here.

That's for the web. I can save that out. There is one other file format that's worth mentioning.

JPEGs do not support transparency. If you're going for something that's going to be either online with a transparent background, or let's say you're going to, let's say, PowerPoint or some other third party program that needs a transparent image, that would be a PNG file. We can go and notice that this file here, which you'll learn how to create this in another exercise.

Notice there's some transparency here as indicated by this checkerboard. We want to make sure that we maintain that transparency. So PNGs go well into PowerPoint and into many third party apps that require transparency.

We can export here and we can choose our PNG. Now PNGs don't have to be transparent. If you turn off transparency, you can have them be solid and we'd get a white background instead.

But if we choose the transparency,  then we will maintain that transparency. Just be careful of this smaller files. If you turn that on, the transparency is either there or it's not.

There's no partial transparency. So while that can work, if you want to reduce from millions of colors down to 256 to save some file size,  it doesn't work with transparency well. So that's what converting to a smaller file size does.

It gets you smaller because it's converting from 24 bit, millions of colors, converting down to eight bit, which is 256 colors, but it does not support partial transparency. So the reason we're saving this as a PNG is for the transparency. So make sure you don't check on smaller file size and we hit export.

And then we get that and we now have an image that has transparency built in. So that's another file format you might use depending on the program you're going to. So try out exercises 2E and 2F in the book.