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.
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.
Pretty Much The Best Conference EVAR 
The brightest minds in WordPress will be LIVE at LoopConf in Florida this October. Get ready, it's gonna be sweet.
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 niftyinfographic, 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?
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?
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.
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.
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.
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.
Upsampling = more pixels, please!
I’ll be honest; I’ve avoided upsampling for a long time. I guess I never fully believed that the quality really would be up to snuff. There are circumstances where you have one, and only one image, and need it to be larger in size. I get that. Now, let’s be honest – when increasing the image, there will be consequences. It also depends on what you are starting out with; the quality of the original image.
In most cases it’s fine to upsample by double, and moderately triple (again depends on the original image), but any more than that? NOPE. Don’t do it. I tried tripling a few images in size, and while I was impressed with Photoshop’s ability here, there was a degree of quality lost. But still impressive! There were a few steps along the edges, and a little softness, but that’s to be expected really.
The best choices for upsampling are Automatic, Preserve Details (enlargement) , and Bicubic Sharper (enlargement). For this image I used Preserve Details (enlargement), which is my favorite go-to these days. I did add 10% Noise Reduction as well. The original image is 800px and I increased to 1480px – this increased the image size from 1.21M to 4.15M.
The results?
This brings us to Save for Web and few other small details.
The last step is saving the image for web, which further optimizes the file size and prepares for the web. Sadly, in the latest version of Photoshop, Save for Web is now under the Export menu, and is labeled as “legacy”. This means this feature, while still around, will no longer be supported in future versions of the program. No fear, this step doesn’t “have” to happen in Photoshop (gasp). That’s right folks; you can achieve this optimization by using a WordPress plugin.
A few to consider:
Here is the quick and dirty on Save for Web.
But Do You Know How to Resize an Image for Retina Displays?
Ah, yes! Retina Display basically squishes more pixels into the screen than that of a regular display. To ensure that images look great on both retina and non-retina displays, you’ll want to save your image at double the pixel dimensions. For example, in this post, the maximum pixel width for images on our site is 740px, so I’ve saved them at 1480px, and they appear nice and crisp on every display. You might be wondering about the resolution at this point – and it can stay at 72. DPI refers to “dots per inch” and is generally used to determine the size an image will print. Since we are only concerned with pixels, because the size of a web image is determined in pixels, anything more than 72 will make absolutely no difference in the quality of the image.
There you have it! Image quality does not have to be compromised when you know how to resize an image in Photoshop properly. The goal here was not to get down and dirty into the nitty gritty technical stuff (google is great for that), but to simplify and extract only the little nuggets of information needed to quickly, easily, and professionally prepare your images for the web. The process is pretty slick and quick once you have the know-how. Honestly, it’s taken you longer to read this post than it will take to prepare those gorgeous images.