Inspirations and Updates

How to Optimise Images for Your Website

How to Optimise Images for Your Website

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. 

Click 'Save' at the bottom of your screen and then 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. Follow the prompts to install it. You may want to make a shortcut link on your desktop or toolbar so you can easily find it again any time you like.

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 images for your website) 

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.

  • Basic Toolbar
  • Colour Toolbar
  • Edit History 
  • Layers

It's a good idea to have a close look around and familiarise yourself with these tools before continuing with the tutorial.

If a toolbar dissapears, you will find icons that re-open them up in the top, right corner of the program window. 

Great images get more attention!

Before you optimise your images, it's good practise to make sure you are starting out with the best possible pictures to begin with. If you'd like to learn how to take great photos, We suggest you read an article or two about it. Watch this space, we'll write articles for you and post them to this blog for you. Meanwhile, here are some tips to help ensure your photos of your products or services will look great on your website:

  • 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 subject of the image.
  • 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 images saved in a place where you can easily find them, you'll be ready to start optimising them for your website.

To optimise your images:

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

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’

 

Save your image in a logical location so you can find it again.

Give your image a short but sensible name.

Make sure the file extension is a .jpg. Because .jpg's load quickly and are compatible with almost every browser.

click ‘OK’ and you’re done!

Related

Tags

How to resize Images , Image Optimisation , Paint.net

Categories

Tips and Tricks, Instructions, Technical Support, Graphics, Image Optimisation

Share

Comments

  • Thanks for sharing such a helpful tutorial.
    9/28/2018 6:07:02 PM Reply
    • @Offshore clipping path: You're quite welcome. We're glad you found it useful.
      10/3/2019 11:32:22 AM Reply

Post a Comment

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