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 resized on the web page.

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?

"Beauty is in the eye of the beholder" and it can be useful to know the dimensions of another web image so you can edit your picture size to match.

The first step is to have open the live web page with the image that you wish to measure - don't try and measure a picture within the CMS.

PC Users

Right-click on the image with your mouse to reveal a context menu. Depending on your browser select 'Properties' (Internet Explorer) or 'View image info' (Firefox). This should show you the dimensions of the image in pixels (px). Please note - this method will not work with "background" images that are not manually part of a web page but are added using CSS stylesheets.

Mac Users

Control click the page in Safari, then click Inspect Element. Select Images on the left. Click through the images in the list. You'll see image properties on the right. Please note: you may need to enable the Develop menu in Safari. To do this go to Safari's properties, click 'Advanced' and tick the last option. You will now see the Develop menu on the menu bar, click 'Show Web Inspector' and refresh the website you want to get the image property from.

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.