Skip to main content Skip to navigation

Resize images for the web

Use image editing software to resize and save images in a suitable format for the web before you upload them to SiteBuilder. The aim is to reduce the file size as much as possible and retain sharp image quality. Optimised images have several benefits:

  • They load quickly for your visitors
  • For those using mobile devices, the images do not consume cellular data unnecessarily
  • They contribute to minimising your web page's overall download speed – a factor in search engine ranking

In this article:

Recommended format

  • Resolution: 96 ppi (pixels per inch)
  • Dimensions: resize the image to be as close as possible to the intended display size. For example, a hero image spanning the full width of a page is 1,170 pixels wide. Screenshots in the centre content of SiteBuilder help pages are typically between 500 and 750 pixels wide.
  • For images with continuous grades of colour, such as photos, save your image as a JPG.
  • For images with sharp lines and few colours, such as charts or maps, save your image as a PNG.

Image editing software

While Adobe Photoshop is the industry-standard professional image editor, it's expensive and has many features you may not need. If you only want to resize images for the web or do basic retouching, there are free or low-cost alternatives.

Adobe Photoshop

If you create or manage a lot of images for the web, print or press, this is the industry-standard tool to use. It's available at Warwick as part of Adobe Creative Cloud. There's also a more beginner- and budget-friendly version, Adobe Photoshop Elements, with similar features.

GIMP

A free and cross-platform alternative to Photoshop, GIMP is available at Warwick on the Managed Windows 7 Desktop, in most default installs of Linux distros, or you can download it from gimp.org.

Photopea

This free image editor runs in a browser. It has a similar interface and menu layout to Adobe Photoshop. Available from photopea.com.

Paint.NET

This free, Windows-only application is installed by default on Warwick's Managed Windows 7 Desktop. You can also download it from getpaint.net.

Pixlr

Pixlr is a free image editor that runs in a browser and comes in two versions: Editor and Express. The Express version is ideal for uploading an image, resizing it and saving a new version for the web.

Free services to optimise images

Here are some free services where you upload an image and download an optimised version:

SiteBuilder prompts to resize large images

When you upload a large image to SiteBuilder, you're prompted with three options:

  • Resize the image to 1,170 pixels wide – suitable if the image will be linked to or used in a slideshow
  • Resize the image to 500 pixels wide – suitable for images embedded in the centre content
  • Resize the image to 160 pixels wide – suitable for images embedded in the right-hand content

We recommend that you choose one of the above options.

Note: SiteBuilder can resize images you upload with dimensions up to a maximum of 8,000 x 5,000 pixels.

Talybont ReservoirWhen you insert an image in your SiteBuilder page as a thumbnail, this adds the ‘lightbox’ effect – select the reservoir photo to view a larger version in a pop-up.

Follow the steps below to insert a thumbnail using the visual editor.

Alternatively, if you prefer to use the raw HTML editor, wrap the image in an anchor and use rel="lightbox":

<a rel="lightbox" href="reservoir.jpg"><img alt="Talybont Reservoir" src="reservoir.jpg" /></a>

  1. Browse to the page you want to add an image to.
  2. Go to Edit > Edit centre content or Edit right content.
  3. In the visual editor, place your cursor where you want to insert the image.
  4. In the toolbar, select the Image button. Alternatively, right-click and select Image.
  5. In the Image window, select the tab labelled Your computer.
  6. At the bottom of the Image window, select Insert image as a thumbnail and specify a width in pixels.
  7. Select Browse/Choose file and upload the image from your computer.
  8. Select the Select button.
  9. When you have finished editing the page, select Publish.
  10. In your published page, select the thumbnail to view the full-size image in the lightbox.

Share high-resolution images

To share high-resolution images with your visitors – for example, a print-quality photo to accompany a press release – create two versions of the image:

  • a version optimised for the web to display in your web page
  • a high-resolution version for your visitor to download
  1. Upload both image versions to the Files tab.
  2. Go to Edit > Edit centre content or Edit right content.
  3. Select the Image button in the toolbar, and choose your web-optimised image.
  4. Add text below the image – for example, Full size.
  5. Highlight the text, right-click and select Link, then select your high-resolution image:

    Link to full size image

  6. Select Publish.

Related articles

 

Support

Email webteam at warwick dot ac dot uk
How to report a problem