Tutorial: How to Resize a Photo for Your Website

You will never guess what our support team says is the #1 question they get from our clients.

Wait, maybe you've already figured it out because you read the title of this post.

Yes, "How can I resize this photo for my website?" is our #1 head-scratcher of an issue, and it's high time we provided a tutorial to make resizing easier for everyone. First, here are some photo editing tools to help you do the job, if you need them.

But what does it mean when someone says "I need to resize this photo."

This can actually have a few different meanings.

1. My image is the wrong dimension for the space.

Example: This page needs an image that is 504 pixels wide by 309 pixels high.

In Preview (Mac):

Open the file, click Tools > Adjust Size.

This will give you the option to change the image to the right dimensions.

In Pixlr (Free Web App):

Browse and open your file. Select Adjustments > Resize.

Enter dimensions and constrain proportions. Save.

But wait, what if:

2. I can't just change the dimensions!

Ah, here's the rub. Sometimes, your image has to be cropped or adjusted before you can resize, so that your final dimensions are correct.

Example: This image is 770 x 514 and to resize it to an exact dimension like 504 x 309 I'm going to have to crop.

(770x514 px)

Oy! Stick with me. I'll show you how to get this:

(504x309 px)

In Preview (Mac):

Open your file, Select Tools > Adjust Size.

Set your width first. For this example, I set the width at 504 pixels, but you'll notice that makes the height 336 pixels.

Next, with the selection tool, select and crop the height to 309. It will look like this as you crop:

And that's how you crop and resize to a required dimension. Note: If you start with a smaller image, you'll need more than this simple tutorial. So, start with a bigger image, dimensionally, to crop and resize.

Pixlr, MS Paint, or Photoshop have very similar cropping tools.

"But wait, that's not what I mean!" you say. What you really mean is...

3. My file size is too big and will take a long time to load.

Example: My image is 900KB, how can I make it smaller so it loads more quickly?

PNG files or JPG files can get pretty hefty, but you can reduce the file size a couple of ways. If your file is super huge, like 10MB, you probably need to do step #1 and check on those dimensions. If your image is 3000 pixels wide, you should bump it down to a more manageable size.

Next, make sure you save the image correctly. The easiest way is to use the "Save for Web" option if you're in Photoshop or an editor that has that option.

Here's what I typically do on my Mac, using Preview.

In Preview:

Open your file. Select File > Export.

Choose JPEG as your file type, and set the quality manually to reduce the size even more. Save.

In the below example, I began with a PNG image that was 346KB. I reduced the file size by exporting it as a JPEG and manually dialing down the quality to 37KB (but it still looks good for web!)

Tada! Now you're ready to rock and roll and resize your images like a pro.

Are there other ways you might need to resize, crop, or make your images smaller/bigger for your website?