Inspirations and Updates

23

How to Optimise Images for eCommerce Using Paint.net

posted on
How to Optimise Images for eCommerce Using Paint.net

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'.  

 

Download and install 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. 

Great images sell more products!

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:

  • Keep them uniform. Try to keep the size and background colour al the same where possible. Most websites opt for a white or light coloured background to make the product stand out clearly.  Consider setting up one location just for product photography if you have the room for it. Try to use the same lighting, background and distances every time you take pictures. 
  • Keep plenty of blank background space around the image. This will ensure that you can crop it to the right size without cutting into the image itself.
  • Consider using a tripod. In order to keep the camera still enough to capture all the details of your products without blur, it's a good idea to use a tripod for stabilisation. If you have a timer on your camera, that will help too.
  • Get great lighting. Photographic lighting is an artform unto itself, but there are many articles out there to help you make the most of what you have without having to pay for special lights or diffusers. For some great ideas, you may want to read this fascinating article about Cheap Lighting Hacks

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.

Open the image

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. 

Resize the image

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:

  1. Get the correct proportions
  2. Adjust the actual image size

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. 

Resize the image

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.

Save the image 

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. 

Categories: Tips and Tricks, Instructions | Tags: How to resize Images , Image Optimisation , Paint.net | View Count: (244) | Return

Post a Comment

Article Search
Publishing Calendar
Blog Categories
Live Tweets
Subscribe To Our Blog
Name