Resizing Images For Use Online
Believe it or not, this task is easy to do and you have a couple of options to choose from. I’ll walk you through it.
By the way, we are so proud of you for learning something new!! Keep it up.
When I say image, it could be a photo or a graphic. It should be a .png or .jpg type file if you are loading it on a website or social media.
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 Photoshop, Adobe Illustrator, Canva, or PicMonkey to name a few. Canva and Pic Monkey have free options where Adobe is a paid subscription. For the sake of this tutorial, I will share how to resize in Photoshop and in Canva as these two options are the most used and offer the bonus step of optimization. (super important)
Resizing Images with Photoshop
Watch the video or keep scrolling to read the tutorial with step by step instruction.
Step By Step Directions
Open Photoshop
Click “Create New” to open the document set up box. Here are my settings:
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.
This will open Photoshop with an art board the exact size you need for your image.
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.
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.
Resizing Images with Canva
Watch the video or keep scrolling to read the tutorial with step by step instruction.
Log into your Canva dashboard and start by clicking “Create Design”. Choose “Custom Size” on the lower left side of the drop-down menu.
This opens a width and height box. Enter your size. We are using 1000 x 1500 px for this tutorial.
Once you click “Create New Design” the artboard will open with a tool bar to your left. Choose Uploads and upload the image you wish to resize.
Your image will appear in the uploads once uploaded. Click on the image you wish to use and it will appear on the artboard.
Click on one of the circles in the corner of the image to drag the image to resize it to fit the artboard.
Drag it until you are satisfied with how the image appears on the artboard. Once happy, click outside the artboard to set the image.
Now click “Download” in the upper right hand side of the screen to save your image to your computer.
I suggest saving the resized image as a jpg for web usage. This will create a smaller image file that is more optimized for the internet than a PNG which is better for other applications. Please read “The Most Boring Article About Logos You’ll Ever Read” to gain a better understanding of file types and how to use them.
The #1 Thing People Forget When Resizing Images
You thought I forgot to tell you this, didn’t you? Nah… I just saved the best for last. 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:
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 (bonus content)
Step-By-Step Directions
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:
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.
