Resizing Images for Use Online

Using Photoshop

By the way, we are so proud of you for learning something new!! Keep it up.

This tutorial is helpful for resizing images or graphics and works for .jpg and .png files.

Here are a few reasons for resizing images:

  • Creating a featured image for a blog
  • Uploading slider, header, home-page images on your website
  • Changing out team members headshots
  • Adding a new graphic to a page
  • Loading images to social media (covers, profile pics, etc…)

Each of those examples has various image size needs. Typically, you’ll know the pixel width and height your image needs to be based on what your designer has shared or what the application asks for. Sometimes you won’t have guidance and you might need to try a few sizes by trial and error to get it just right.

Why do I have to resize images?

If you load an image too large for your application it might be cropped which would cut off the top, bottom, and/or sides of the image. If it is too small there could be an unsightly border or your image may be stretched and pixilated in order to fit. Both of these options will leave your end image looking less than stellar. Let’s avoid that.

You have a few options to resize your images, Adobe PhotoshopAdobe Illustrator, Canva, or PicMonkey to name a few. Canva and Picmonkey have free options where Adobe is a paid subscription. For the sake of this tutorial, I will share how to resize in Photoshop, you can check out my other post, on how to resize in Canva: as both of these options are the most used and offer the bonus step of optimization. (super important)

Resizing Images with Photoshop

STEP-BY-STEP INSTRUCTIONS

Open Photoshop

Click “Create New” to open the document set up box.

Chose “web” and then adjust the size of your art board to be the correct size for your application.

For the sake of this tutorial, I am using an art board size of 1000 X 1500 px, set at 72 pixels/inch.

Unless you need transparency, use a white background.

Be sure to check the sRGB box for the best color file for the internet.

Click “Create” to open the workspace.

Screenshot of Photoshop New Document Settings

This will open Photoshop with an art board the exact size you need for your image.

Image of blank artboard in Photoshop

Click on “File > Place Embedded” and choose the image you are resizing in your browser and click “Place”. Your image will now appear on your artboard.

Image of selecting the Place Embeded option in Photoshop

Image of placed image in Photoshop

Image Placed

Next, you’ll click on the squares on the corners of the image to click and drag your image to fit the artboard. You’ll likely be cropping the image to fit, so be careful the image is aligned to your liking. Once it is stretched to fit properly, click the “√” in your top toolbar to set it.

Stretching the image to fit the artboard in Photoshop

Stretch to Fit

Accepting the resized image prior to export in Photoshop

Click the √ to set it.

Next, you’ll click on the squares on the corners of the image to click and drag your image to fit the artboard. You’ll likely be cropping the image to fit, so be careful the image is aligned to your liking. Once it is stretched to fit properly, click the “√” in your top toolbar to set it.

Save the image to then upload it to your application! YAY you did it.

BUT WAIT!!
Are you loading this newly resized image to your website or to an application that requires it to be a certain KB or MB size? There is one more step to make sure it is optimized. Optimizing an image is making it as lightweight as possible so it loads quickly and beautifully. This keeps your website fast and happy. Learn how to optimize your image now.

The #1 thing people forget is Optimization.

Basically, optimizing an image for website usage is simply saving it at a lower image quality so that it is lightweight and therefore will load quickly. I feel that optimizing images by hand on Photoshop gives you the most control of the image so even when small the image is pretty to look at. If you are a Canva Pro user you get a bit more control with setting the image file size allowing even more optimization than their presets.

There are also online tools available for optimizing. These ones work well:

Image Resizer

Gimp.org

JPEGmini

I go over the optimization on both Photoshop and Canva in my videos right at the end. (wink)

The gist is to save the image at the right artboard size and byte weight. Check to see that your image is as close to 100KB or less for best site weight. If it isn’t that low adjust your image quality until it is!

How to Optimize in Photoshop – a Quick Tutorial

STEP-BY-STEP INSTRUCTIONS

Open the Image in Photoshop

Click “File > Export As”

Adjust the settings until you are as close to 100KB as possible. Here are the settings I use:

How to Export As in Photoshop

Export the file as a JPG as this is a great lightweight option. Only use PNG if you need transparency and choose the small 8-bit option to keep it small.

Next adjust the image size to match the size you need. Sometimes when you save a resized image in Illustrator it saves it larger than the intended size.

Then check the image size. If it is still bigger then 150 KB, adjust the Image Quality % in 10% increments until you get as close to 100KB as possible. It doesn’t have to be exact.

Click the box for sRGB, to save it perfectly for online use.

Finally, export the image to save it on your computer to use where you need it!

ONE QUICK SIDE NOTE

How do I know how heavy my image is? Great question… Let me show you on a Mac. I am sure you can get image info on a PC as well. I just don’t have a way to show you that. (Apple for Life!)

Open Finder

Click on the image you’ll be using.

Look at image information:
Below I show you a screenshot I took of the image for this tutorial. Notice how large the image is! It is at 1.3 MB. WAY TO BIG for my website. It would get destroyed…well it would just slow WAY down.

It is also the wrong dimensions. I usually load images at 950px wide… this one is at 2192.

I can also see the resolution is 144×144. That is about medium quality, but I want it smaller at 72×72!

At least it is in the right color family as RGB. Perfect for viewing online.

Using Finder to see your image info.