How to Resize an Image Without Losing Quality

When you don’t know how to resize an image correctly, you’re much more likely to make a bad first impression on your website’s visitors. Images are the welcome mat to your website and can make or break your first impression. Sure, you might have great content, but blurry, poor quality images will chase away visitors before they ever read a paragraph.

good-bye-forever

Pinterest and Instagram have set the bar pretty high, and the online competition is getting stronger. It’s more important now than ever to level up your game and spend a little extra time learning how to resize an image properly. It’s easy to resize images without losing quality and honestly doesn’t take long.

Professional looking images engage the audience, set a mood, and create a better visual connection between your brand and your content. Fun little fact: According to this nifty infographic, 40% of people respond better to visual communication than plain text, and 90% of information that comes to the brain is visual. Needless to say, knowing how to resize an image is an important part of any online presence.

Images straight out of the camera are very high in resolution and need to be reduced to use on the web. The number one concern for most site owners is page speed. And let me tell you, nothing brings a site to a grinding halt faster than loading oodles of high-resolution images on the regular. One of the most important performance improvements you can make is correctly resizing and optimizing your images – and it doesn’t have to impact quality. I promise. Pinky swear!

Another factor to consider is social media. Whether you love it or hate it, social media has become a key player in marketing your business or blog. Most platforms have a maximum file size, and it’s a good practice to have your files prepped to their specifications. Why? Because otherwise, the platform’s uploader will say “This file is way too big, here let me fix that for you” – without allowing you to choose the crop or quality you want. Facebook is especially known for its aggressive compression – it’s getting slightly better, but it’s still a bit of a bull. When posting to the social media of your choice, find out the correct specifications and size accordingly – here’s a great little cheat sheet for all the major social media sites.

Ok, but how easy is it?

Cute tame and friendly chipmunk posing for camera with a quizzical expression as if to say who me?

Super easy. As a matter of fact, downright simple. In this post, I’m using Photoshop CC 2015 because it’s what I know and what I use every day. If you have an older version of Photoshop, no worries – the steps will be the same overall, but won’t have the newer options that I’m going to talk about later on in the post.

No Photoshop? Don’t fret! There are numerous free image editing programs available online. I can’t speak for them because I’ve never used them, but I’ve heard they are relatively decent, and it’s better than doing nothing.

First of all, let’s talk about what a bitmap image is. Let’s say we zoom in on a JPEG or PNG image. What would we see?

donut-bitmap

Well, we would see thousands of tiny itty bitty squares, or pixels if I’m proper, that have an assigned a color and position that makes up the image. It’s important to choose the appropriate method, resizing or resampling, because each method interacts with these pixels in different ways and affects the overall quality.

The term “resizing” is a pretty typical “blanket” term when referring to changing the size of an image. However, there are two ways to tackle the task of resizing an image in Photoshop – it can either be Resized or Resampled. Which one should you use? I’m glad you asked!

Resizing changes the size and resolution the image will print, but does not change the actual number of pixels, or data, the image contains. Resizing is used mainly for print and is also referred to as scaling. There is only two choice here to edit – the physical size, and the resolution. In Photoshop, when editing one of these values, the program automatically adjusts the opposite value to compensate.

Let’s say we increase the image size by half – the pixels will then spread out and become larger to fill the new space. Increasing the images physical size will automatically decrease the resolution by half to compensate, creating a noticeable deterioration in the quality of the image. Of course, if the physical size decreases, the pixels get cozy, squeeze together, and the resolution increases by half.

The options to change the width and height in Photoshop include percent, inches, centimeters, everything except…you guessed it. Pixels. Since the web is pixel based, this isn’t the ideal option for resizing images for the web.

Resampling, on the other hand, changes the number of pixels the image contains and best used for images intended for the web. Photoshop takes a complex process known as interpolation and makes it as easy as selecting a checkbox in the Image Size Dialog Box. To Resample or….not. In the simplest term, when checking the “Resample” box, you are asking Photoshop to analyze the image and decide where to add pixels when upsampling, or what pixels to throw to away when downsampling.

resampling-checkbox

With the boxed checked, the image is being “Resampled” and, without, the image is being “Resized”. Now with that out of the way, going forward, this post is going to be dealing with Resampling the image.

Let’s begin, and I’ll show you how to resize an image in Photoshop like a boss!

The first thing I always do is make a copy of the image, and work on the copy. It’s a real bummer when you’ve resized an image, save and close the file, only to upload to the site and realize that it’s not right – ahem, not that it’s happened to me before. Save yourself some time and frustration and just make a copy. It takes 2 seconds!

Downsample and throw those pixels to the curb!

Here we have the Image Dialog Box. We can change the Width and Height, edit Resolution (because we are sizing for web use we will keep it at 72), and the Resample menu – set in the screenshot to Automatic . While most of the Resample options are self-explanatory, some are not. It’s a good idea to play around and get a feel for each one and see how they affect the overall image. If it helps, you can find more information from Adobe here.

downsample-dialog-box

For this image I used Automatic – but another choice would be Bicubic Sharper (reduction). The image was reduced from 2000px wide to 1480px, and the image size went from 6.47M to 3.54M. That is quite a few pixels removed. I’ll explain a little more about the different options available in the drop-down menu a little further on.

Quick note: The Automatic option does not include the Reduce Noise settings because it’s an all-in-one setting. For the most part, it does a pretty bang up job, but for more control, and to reduce noise, you’ll want to select and use one of the other settings.

So let’s take a look at the results.

downsample-image

Not bad at all!

The lowdown:

Original image = 2000x (w) and 881 KB file size.
Downsampled = 1480px (w) and 545 KB file size.
The particular image wasn’t huge to begin with but shows impressive results all the same. Still it demonstrates that resizing an image makes a big difference in the file size, but maintains the quality. That was easy, right? A few simple steps, and done.