HOW TO CHANGE IMAGE RESOLUTION AND PIXEL DIMENSIONS IN PHOTOSHOP

Transcript

Hey guys. I’m Louise, Head of Design at Insynth, and I’m going to talk a little bit about changing the resolution of images in Photoshop, why sometimes it’s important and why other times, the amount of pixels within your image is more important than the resolution.

 

What is Resolution… Really?

So, resolution is usually measured in DPI or PPI. What’s the difference?

DPI – or Dots Per Inch, refers to the dots per inch created by laser printers. It’s a measure of the pixel density of printed images. A higher DPI image generally means it’s higher quality as the more tightly packed the pixels, the smaller they will be.

Lower resolution printed photos will have larger pixels and will show signs of pixilation – meaning we see those jaggedy edges along the different elements inside your image.

 

So, what is PPI?

No you haven’t been mis-sold anything!

PPI or Pixels Per Inch is a measure of pixel density within a digital image. Now, unlike with DPI, the size of pixels on a screen doesn’t change, neither does the density. PPI on a digital image only really matters if the image is printed.

A 10cm x 10cm image at 72ppi (the standard resolution for screens) will print at exactly the same physical size as a 10 x 10cm image at 300ppi.

The difference will be in the quality. The 300ppi one will be sharper, whereas the 72ppi one will display pixilation. On screen though it’s a different matter.

Though they are the same physical size in print terms (10 x 10cm), the 300ppi image will appear bigger. This is because – no matter what, the screen will display the image at 72ppi. So – it will just spread those extra pixels over a bigger area. What actually matters more when we’re preparing an image for screen is the number of pixels your image has.

We’ll come back to this in a moment.

Let’s look at preparing an image for print in Photoshop.

 

Preparing Images for print

Now – if you’re having something like a brochure or leaflet professionally printed, it’s essential that your image should be at least 300dpi to ensure the quality of print.

Let’s take this image in photoshop for example. If we go to Image, then image size – this dialogue box opens up. We can see here (mouse hover) that the resolution is set to 72pixels per inch. We want to change this to 300ppi.

Start by ensuring the Resample box is unticked. If the resample box is ticked, it will change the amount of pixels the image has and we don’t want to do that. Now we can alter the resolution to 300ppi.

When we do that, you can see the width and height in centimetres gets smaller. This is photoshop condensing the same amount of pixels into a smaller space to increase the PPI. However these pixel dimensions values, remain the same. We are not changing the amount of pixels, only condensing them into a smaller area. Once you’ve altered the resolution, you can click “OK” and save your document as required.

 

Preparing Images for digital use

Now – let’s consider an image for web or digital use. As I’ve said – when you’re viewing an image on screen, the PPI isn’t the most important thing.

Let’s use this image as an example. If we open up the image size dialogue box, we can see that the resolution is xx ppi.

With this image, we’re not going to change the ppi. This time I’m going to check the resample box and select pixels as my unit in these boxes here. If this image was to be the main image for my LinkedIn profile, the recommended size would be 1128px by 376px. So we can go right ahead and change this value here to 1128px and we can see that the height is still a little bit too much. Because the proportions are constrained, if we change the height to be the right size, the width will then be too small. So what we’re going to do is change the height to 1128px and click ok.

Next, we’ll open up the canvas size dialogue box. This is where we’ll change the height. Altering the pixel height dimensions here will crop the image. So decide which part of the image is the best part to get cropped. If you want to crop the image both top and bottom, leave the dot in the middle. If you would prefer to lose the bottom of the image, then click on the top middle quare to move the dot there. Once you’re happy click ok. Now you have an image in the pixel dimension you require for LinkedIn. Remember to save.

Of course, this same process will apply for any images you want to resize for web purposes. And once you’ve resized your images, you’ll want to optimise them for web, so that they are small in file size to help with speedy page load times. But that’s a whole other tutorial. If you’re interested, then check out my “How to Optimise Images for Web” tutorial.

Or register your interest below and if you want to receive a copy of our guide; Developing a Website That Architects Will Use.

Thanks for watching!