Back To Tutorials

Before uploading images to your website, it's important that they are first sized correctly and optimised.

In this tutorial we will look at using a website called Pixlr.com to create images at the sizes we need them to be.

Typical image sizes

The sizes listed below are typical sizes but these may vary depending on your website.

• News or Blog Post Image Size: 800px by 600px.
• Home Page Slides: 2000px by 800px
• Product Category Images: 500px by 500px
• Product Images: 1000px by 1000px

Creating images for use on your website.

1. Open up a browser and visit Pixlr.com
2. Once the page has loaded in scroll down.
3. Click Pixlr Editor / Launch Web App. Note: You will need to have Adobe Flash installed on your browser.

1. From the selection click Create A New Image.
2. Set the required size and click OK.
3. You will now see image editing window.
4. Next, we the image you want to use. Click Layer / Open Image as layer and select the image you wish to use from your computer.
5. Once it has been loaded in, select the image layer in the layers palette.
6. Then from the top menu select Edit / Free Transform.
7. Anchor points will be applied to the image. Click a corner anchor point and hold down the Shift key to resize the image within the aperture.
8. Position the image how you would like it to be. You can use the Navigator palette to help you zoom in and out.
9. Once you are happy with the position of the image within the aperture save the image by clicking File / Save.
10. IMPORTANT: When saving the file
    1. Ensure the image file name does NOT contain any spaces. Use dashes instead of spaces.
    2. The file type is JPEG.
    3. The quality is set to 80.
11. Save to your computer.

Image optimisation and compression

Now you have correctly sized images saved to your computer, the next step is to optimise and compress the image file size so it is small and loads quickly on your website.

See tutorial Optimising images using TinyPNG.com