How to resize your pictures for the web

You’ve probably come across a website where all the pictures seemed just a bit off. They were either too big, too small, or cut up in a way that made the picture look bad. Maybe you had this issue with pictures you’ve uploaded to your website or somewhere like Facebook.

Fortunately, resizing pictures is fairly easy and taking a little time to make sure all your uploaded pictures are the right size will make them look a lot better once they’re online. The resizing process is different on Mac and PC, so I’ve broken the instructions out for each below.

Generally speaking, a good size for web pictures is 600-800 pixels wide. Any wider and you may run into issues on devices with smaller screens and will increase the file size resulting in a slower download. Depending on how the picture is used, going much smaller may result in a picture that looks blocky and stretched.

Instructions for Mac

Good news. You don’t need any additional software to resize pictures if you’re using a Mac. Apple’s built-in Preview application can handle the process for us and can be used to resize pictures one at a time or in a batch.

Steps

1. Find the pictures you want to resize. Make a copy of them and place them in a new folder. The reason we do this is because Preview doesn’t automatically create a backup of your original file, so we need to do this beforehand.
2. Select all the pictures you want to resize
3. Right click and open with Preview.
4. Once your pictures are open in Preview, we need to select all of them on the navigation on the left. If you don’t see the navigation on the left, you may need to change your view settings.
5. With all the pictures selected, go to Tools in your navigation bar and click Adjust Size. If your pictures are all different sizes, the Width and Height fields will say Multiple Values. We can add just a Width value, just a Height value, or both. I typically just add Width so I know my pictures stay in the correct proportions.
6. Once you’ve decided on how small you’d like to resize your pictures down to, simply click OK. The resized pictures will save automatically. Your pictures are now ready to be uploaded!

Instructions for PC

Resizing images differs a lot between different versions of Windows so since there is no consistent built-in process to resize pictures to cover all the versions, I’ve found a great piece of software that can do it for us. And best of all, it’s free!

The software is FastStone Photo Resizer. Download and install this program, and we’ll be ready to get started.

Steps

1. Open FastStone Photo Resizer
2. Navigate to where your pictures are stored. Once you’ve found the photos you want to resize, select them and click Add.
3. Now we need to check our settings. You can change the format of your picture (JPEG is the best for web pictures), rename your files automatically, and more.
4. First we need to set our Output folder. I created a new folder called Resized for this example.
5. Next, we will want to click on Advanced Options (You may need to check the Advanced Options box before that button is enabled).
6. Although this program does many other things, we’ll just focus on resizing our pictures. What I love about FastStone Photo Resizer is that it let’s us resize based on a predefined size. What this means is that if you have both horizontal and vertical pictures, you can make sure the vertical pictures are also sized down. For this example, we’re sizing down the Long Side of the picture to 500 pixels. Once you’re happy with your settings, click OK.
7. Click Convert to resize your pictures. The resized pictures will be saved to your Output folder. Your pictures are now ready to be uploaded!

Making sure your pictures are the right size for the web will go a long way towards making your website and social media posts look better. Appropriately sized pictures will be big enough to not get stretched out to fill the screen (this looks bad), and small enough that they load quickly and don’t slow down your site.