Skip to content

Editing images for your website

Think about size before uploading images

Any image that you want to add to your website needs to be the "right size" - that is, the desired width and height that you want it to appear on screen - before you add it to the File manager in your website CMS. Images cannot be edited within the CMS.

This is especially important when working with photos you have taken with a digital camera, which will produce high quality - and therefore very big - images. If you put a photo from your camera straight onto a web page, the chances are that it will swamp your text!

What size should an image be?

This is often "in the eye of the beholder" but a useful tip if you want to try and match the size of another image on a web page is to right-click on that image with your mouse. A context menu will appear; depending on what browser you are using select 'Properties' (Internet Explorer) or 'View image info' (Firefox). This should show you the dimensions of the image in pixels (px). Please note - this will not work with "background" images that are not manually part of a web page but are added using stylesheets.

For example, if you right click on the Webpartner logo at the top of the page you should find that it measures 315px wide and 100px tall.

Pixlr Express - free online image editor

If you don't own any software such as Adobe Photoshop or Paintshop Pro, you may like to try Pixlr Express to edit your photos etc. Click on Browse to open an image saved on your computer and edit it ready for use on your website. Your photo will appear in the centre of the Pixlr screen, and tool menus will appear below, for:

  • Adjustment
  • Effect
  • Overlay
  • Border
  • Text

We will focus on the most commonly required tools, for resizing and cropping, which are found on the Adjustment tool menu. Feel free to experiment with the other tools!

Resize an image

You can specify in pixels (px) just how wide or all you want an image to be, which is great for preparing a group of images that need to share the same width and/or height.

  • Type the desired width or height in pixels into the relevant box below your image.
  • The 'Keep proportions' option is selected by default. This means you need only enter a value for the width or the height and Pixlr will automatically adjust the other value so that your image is not stretched or distorted when resized. We recommend that you leave this option selected.
  • When you are ready to resize click on Apply.
  • After resizing if your image seems really small you can use the slider in the top-right corner of the Pixlr screen to zoom in. The default magnification is 100%.
  • If you resize an image and need to undo it, click on the left-arrow in the top-right corner of the Pixlr screen.

Crop an image

Useful if you need to remove a section of an image that you don't want to use. This tool is also great for changing the orientation of a picture from "portrait" to "landscape" (or vice versa). When you select this tool a grid will appear over your image.

  • Click and hold the left-mouse button on any of the 4 corners and move your mouse to change the overall size of the grid.
  • The highlighted area inside the grid lines indicates which part of the image will remain after cropping.
  • To reposition the grid over the image, click and hold the left-mouse button inside the grid lines while moving your mouse over the portion of the image you want to highlight.
  • Options below your photo allow you to pick from common width to height ratios, or you can specify your own width and height in pixels.
  • When you are ready to crop click on Apply.
  • If you crop an image and need to undo it, click on the left-arrow in the top-right corner of the Pixlr screen.

Save a copy of your new image

  • When you have finished editing your image, click on Save in the top-right corner of the Pixlr screen.
  • Give your edited image a different name to the original, to keep the original safe in case you need it again.
  • A slider allows you to adjust the quality of the saved image. The default is 85 and we recommend sticking with this. The higher the quality, the bigger the file size; the lower the quality, the more "blocky" the final image may appear.
  • Click on Save and a window will appear asking where on your PC you want to save your new image. Browse to an appropriate place - and be careful not to change/delete the file extension (such as '.jpg' or '.png') from the filename. Click Save again.
  • Your resized image is now ready to load into the Images folder within the File manager in your website CMS.