How to Prepare Images for Your BlueTree Website

What’s On This Page

This page is about how to get your images the correct size to load onto your BlueTree website.
We need to manage and optimise images on ezeSite for a couple of reasons:

1. To ensure fast download times, because your users don’t like delay – and search engines reward fast-loading web pages with higher search ranking;
2. To conserve web server disc space, which costs money, so we can keep hosting costs low.

So, on this page we show how to make your photographs suitable for uploading to your website.

Before You Start

You need to have identified and image on your computer, or on the Internet, that you want to use.

NB: Be sure you have permission to use the image. This means one of,

a) You took it yourself and any identifiable person in it has given you permission;

b) If you bought it, you’ve paid the appropriate licence fee to the copyright holder – the licence must permit you to use it for commercial purposes on the Internet;

c) If you downloaded it, you asked for, and were given, permission to use it by the copyright holder.

You also need to know the finished size of the image that you want to use on your web page. That is, the width and the height in pixels.

Be sure to store the image on your computer, as you may lose access to the original source and you’ll need a back-up in case anything goes wrong.

Our Image Editing Example

We started with a tall image of a bonfire and wanted to crop it to fit across the page, to add heat to the argument on our web page. It's there, at the top of the right-hand column.

Because we held the camera vertically to take the shot, the image is lying on its side. It is very large, 4.68 MB, and it’s 4,320 pixels wide, 2,432 pixels high.

To fit our web page we need to rotate it clockwise through 90° and crop a slice, 796w x 300h (pixels) from it, about one third of the way up from the bottom.

How to Edit the Image Using Online Image Editor

You can use any software you like to prepare the image. We’re going to use an on-line editor. One of the best we’ve found is called “Online Image Editor”.

1. Upload the Image

1. Open the Online Image Editor web page.
2. Find this box on the left, a little way down the page. Find the input file, on your computer. Use the browse button, and upload.
3. If you know you can work with a smaller size, check the “Resize during upload” box and enter a value. It defaults to 50% but we needed smaller, so we changed it to 30%.
     TIP: If in doubt, leave it out. Don’t tick this box.
4. It’s suggesting you convert the file to Portable Network Graphics (PNG) format. This is the best format for editing an image, as the definition is preserved during changes. However, JPEG is best for photographs and PNG best for diagrams. My image is a photograph, so I didn’t request conversion.

2. Online Image Editor Tool-bar

It’s all very clear and easy to use.

We’re just going to use three of the functions: rotate, crop and resize, the fourth, second and first from the left, respectively.

3. Rotate the Image

1. Click Rotate and all the Flip and Rotate functions appear in a box to the left of the image.
2. We need to rotate our photo 90° in a clockwise direction.
3. After rotation, we can only see the top part of the (very large) photo. We must scroll down to find our slice of the fire.

4. Crop and Resize the Image

1. Locate and click the Crop button, to the left of the Rotate button. Notice that you can specify the shape of the crop area as a number representing width and height. Although it doesn’t say so, the units here are pixels.
2. Specify the actual finished size of the image you need. In our case it’s 796 wide and 300 high.
3. Click Apply.

In our example, you can see part of the (still large) image and part of the red-lined crop area too. You move the crop area by holding down the left mouse button somewhere within it and moving to the required position. Because my image is rather large, I had to scroll quite a long way down it to find that part of the fire I wanted to use on my web page. That meant I lost the crop tool controls and had to scroll back up again to confirm the crop. It worked fine, but it felt a bit like flying blind. There’s no need to worry about the Offset controls, as positioning the crop area sets those controls automatically.

5. Save the Image

Saving the image is pretty intuitive. Probably best to save to “Save image local” to a directory on your computer, rather than to Facebook or Picasa, as you’ll want to be sure you can always reach a back-up.

Then you’re done! You’re ready to upload you new image to your web page.

In our case, the resultant image occupies only 148 Kb. That will make it fast to load, so our new web page won’t seem to slow. Read here more about how important load speed is.