How to Crop & Create Images for Your Website

It’s a common fact that visuals catch a person’s eye and are much more effective than text alone. So ensuring your website has good quality images is vital. Sometimes though, this is easier said than done, particularly when you only have a finite or a fixed amount of space to work with.

To help make the process easier for you, we have put together this step-by-step guide on how to crop and create images for your website by using the easy-to-use online web software, Pixlr.

In this guide, we are focusing specifically on resizing and cropping images with Pixlr, but please note there are many other things you can do to your images using this tool. Why not play around with it for a while, familiarising yourself with all the features and generally, just having a little fun exploring what you can create?

Crop images with Pixlr

First things first, navigate to www.pixlr.com. You will be shown three choices for how to access this tool; Pixlr Editor, Pixlr Express and Pixlr O-Matic. For now, we want to use the Editor app (however please note that the other two can produce similar results).

Once you’re in, you’ll see a box with various ways to add a picture to the page. Choose the image you wish to use for your website by selecting ‘Open image from computer’, then locate your image from your computer, select it and click ‘Open’. This will upload the image into Pixlr.

The image will appear in a small box at the top left of the screen which you can expand by clicking on the bottom right of the box and dragging it to your desired size.

In the bottom left of that window you’ll see the original pixel sixe. To resize this, click ‘Image’ on the black bar at the top of the page and select ‘Image size’.

You’ll now see a small box showing the height and width of the image in pixels. For a home page banner or slider image, a good size to aim for is 698 pixels wide and 241 pixels high – which we will use as an example throughout this guide. However, as every website differs, it’s important that you first find out exactly what sizes are required for your specific website.

Click on the number in the ‘Width’ field and change this to ‘698’ and click ‘OK’ – be sure to keep everything else the same for now. This will resize the image to the correct width, allowing it to fit in the banner section of your website. However there are still a few more changes to make.

Note: If your image was originally very large, it will now appear smaller – don’t panic, this is all part of the process.

Now, click on ‘Image’ again on the black bar at the top of the page and select ‘Canvas size’. In this new box, you can now set the correct height for the banner. Click in the ‘Height’ field and change this to say ‘241’ but, just before you click ‘OK’, make sure that the highlighted box in the ‘Anchor’ section is in the centre square.

Again this will reduce the size of the image by cropping the top, bottom and sides. These changes are necessary in order for the image to adopt the required letterbox shape.

Also, if your image looks slightly pixelated or small, click on ‘View’ on the black navigation bar and select ‘Actual pixels’, which should resolve the issue.

Now you have your new image which is just the right size to add to your home page. To save this, click ‘File’ on the navigation bar, click ‘Save’, click ‘OK’ and then save the image to your desired location on your own computer.

This entire method should help you to create the perfect image for your website. But, in some rare cases, you may need to crop the image before resizing it.

Typical images sizes

As mentioned above, not all websites are the same and it’s important that you first find out what sizes your specific website requires. However, here are some general sizes that fit most website banner/slider requirements:

• Home page banner/slider images – 698px x 241px
• Banner/slider images (for deeper pages, such as ‘About Us’ and ‘Gallery’) – 698px x 346px
• Gallery – 698px x 346px