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 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 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.
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.
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.
Stretch to Fit
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:
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:
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.
