So, you've got yourself a flashy, custom made online shop for your business and now it's time to start keeping your products updated.
You'll need to know how to optimise those images so that they load quickly on the web page and still make your website look amazing! This step-by-step tutorial will help to walk you through very basic image editing using the free tool called 'Paint.net'.
Click this link to download the free paint.net program from Softonic.
Be careful while in any of these software downloading websites, as they can easily confuse you into clicking the wrong button. You can be sure you have the correct download button if you see the correct name at the bottom of your screen when asked what you want to do with the file.
Please leave a comment below if the link does not work for any reason. Remember, when leaving comments, you must enter a complete website URL including the http prefix. eg: http://lizzyjohnson.com.
Save the program to a place where you can find it again if you ever need to re-install it.
When it is finished downloading, you will be given an option to open and install Paint.net to your computer. When you install it, you might want to make a shortcut link on your desktop or toolbar so you can easily open it any time you like.
If you are not given the choice to install the program right from the download process, or if you need to re-install it later for any reason, simply go to the place in your computer where you stored the file. Double click on the zipped program file and follow the prompts. As is the case with most downloadable programs, this is a zipped file, so you will need a program like 'WinZip' to decompress it.
It will take a few minutes to install, but that will only happen the first time. (The express setup should be fine for the purposes of optimising eCommerce images)
After it is installed open Paint.net and you're ready to begin. The program will look like this when you open it:
The four main tools that appear when you first open the program are the ones you will use most.
It's a good idea to have a close look around and get accustomed to the tools before we begin our tutorial
If a toolbar dissapears, don't worry, you will find icons that re-open them up in the top, right corner of the program window.
Before you optimise your images, it's good practise to make sure you are starting out with the best possible pictures of your product to begin with. We suggest you read an article or two about how to take great photos or even consider hiring a professional photographer to make your product look amazing through beautiful imagery.
Some tips to help ensure your photos will look great on your website:
Once you have some gorgeous product images saved in a place where you can easily find them, you'll be ready to start optimising them for your website.
Fire up your Paint.net program and get ready to edit your first image.
File> Open> Search for the picture, select it and click ‘Open’.
The picture will appear, all ready for editing.
In order to keep your online shop looking tidy, you'll need all of your images to be the same size and resolution.
Check with your developer to find out what your ideal image size is. For the sake of this demonstration, we will use 400px x 600px.
The resolution should be 72dpi.
We'll resize the image in two steps:
Use the square looking selection tool from the top left corner of the vertical toolbar:
When you click the Rectangle Selection Tool, you will get the option to change the type of selection area. Change it from 'Normal' to 'Fixed Ratio'.
Enter the ratio (you can use the desired size of the final image) in this case, we'll use 400 x 600 because we want all finished images to end up being 400px x 600px when we upload them.
Next, you will drag the selection tool around the part of the image you want to crop. It will automatically be the correct ratio.
It might take a couple of attempts to get just the right selection.
After the image is highlighted the way you like, you need to click on the ‘Image’ button at the top of your screen. Then select the first option that appears, ‘Crop to selection’
Now that your image is the correct ratio, we will just need to make it the right size.
While the image is still open, click the 'Image' button at the top of the screen, then select 'Resize'.
A Dialog box will appear.
Change the height and width to your ideal image size and set the resolution at 72.
To save your image, simply click on the ‘File’ button at the top of the screen and then click on ‘Save As’
Give your image a short but sensible name, so it will show up on the Google image searches and will bring more visitors to your website. 😊
Make sure the file extension is a .jpg. Because they load quickly and are compatible with almost every browser.
Save your image in a logical location so you can find it again.
Click ‘OK’ and you’re done!
By the way, the beautiful image you see on this blog post belongs to our amazing clients, Floralistic, who create amazing artificial flower arrangements for any occasion.