Resizing and Optimizing Images for Use Online
Using Canva
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 pixelated 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 Picmonkey have free options where Adobe is a paid subscription. For the sake of this tutorial, I will share how to resize in Canva, you can check out my other post, on how to resize in Photoshop: as both of these options are the most used and offer the bonus step of optimization. (super important)
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 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!
Check out how I do it in Photoshop, with step-by-step instructions here: Resizing Images in Photoshop