There are several ways that you can change the size of a picture.


Using photo editing software

The best way to change the size is to use photo editing software to edit the original image and then add the new resized image to your asset library. This will allow you precisely set the size of the picture and will usually give the best quality results.

Some things to keep in mind:

  • Increasing the size of an image can reduce its quality so, for the best results, start with a large image and reduce it down to the size you need. 
  • Changing the size of an image can often make it slightly blurry. If your photo editing software has a filter to sharpen the image, it is usually worth applying this after you resize an image.
  • Don't make your images too big - they'll take longer to add to your assets library and longer to display on your page (effectively making your site seem slow). The assets library will automatically reduce any large images to 430 pixels wide. This is to prevent problems with the layout of pages and with images taking too long to display. However, it is possible to use the original sized image if you want to.
  • If you are adding different sized versions of a picture to your asset library, adding the size to the picture's name will make it easier to find the correct version later. For example, the name could describe the size: "My picture (Large)", "My picture (Medium)" etc. Or it could include the image's dimensions: "My picture 200x450", "My picture 400x600" etc.


Using the SurreyCommunity editor

You can also change the size of a picture in the editor. This won't give as good results as using photo editing software but may be sufficient if you just need to tweak the size slightly.

This method doesn't make images any quicker to download (it just tells browsers to download the large image and then display it smaller so it'll take just as long as long to display as the larger image). If you want to make images quick to download you should use photo editing software as described above.

There are two ways to resize a picture in the editor and which is the best for you will depend on the browser that you are using to edit your site.

Dragging the picture corners to resize

This works best in Firefox. It works partially in Internet Explorer (although we recommend the other method for IE users). It doesn't work in Safari nor Chrome.

  • Open the page for editing.
  • Click on the image to select it. Eight handles (small boxes) will appear around the image, one at each corner and one in the middle of each side.
    Handles for resizing an image 
  • Click and drag on one of the corner handles to resize the image.
    Dragging the handle to resize the image
    In Firefox, using the corner handles will keep the height and width of the image in the same ratio and prevent the image from distorting. In Internet Explorer, although the handles appear, the editor will not keep the height-width ratio for you, so it is easy to accidentally stretch or squash the image.

Typing a new size:

This works in all browsers.

  • Open the page for editing

  • Click on the image to select it.
  • Click on the insert/edit image button in the toolbar insert/edit image button. The insert/edit image box will appear.
  • Click on the appearance tab.
    The image appearance tab 
  • Make sure that the constrain proportions box is ticked. This will prevent the height-width ratio from being altered.
    Constrain proportions tickbox 
  • Type the width that you want the image to be into the left dimensions box.
    Image dimension boxes

    The width must be in pixels (as rough guide, 400 pixels is about half the width of most pages).
  • Press the tab key on your keyboard. The system will automatically fill in the appropriate value for the height into the second dimensions box.
  • Click the update button to apply the changes


See also