Skip to main content

Resize images for the web

To ensure images in your web pages display crisply and load quickly, resize and save the images in a suitable format before you upload them to SiteBuilder:

  • Resolution: 72ppi.
  • Dimensions: try to make the image width as close as possible to the intended display size. E.g. a hero image spanning the full width of a page is 1,170px wide; screenshots in the centre content of SiteBuilder help pages are typically between 500px and 750px wide.
  • Images with continuous grades of colour e.g. photos: save as JPEG.
  • Images with sharp lines and few colours e.g. charts and maps: save as PNG.

Optimising images for display on the web also helps to minimise the file size. This is particularly important for those on mobile devices; large, unoptimised images consume people's mobile data unnecessarily.

Image editing software

Most image editing applications have features to save an image for the web i.e. to export a version at 72ppi with the dimensions you specify. For example:

  • Adobe Photoshop – the industry-standard, professional image editor.
  • 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.
  • Paint.NET – a free application (Windows only) installed by default on Warwick's Managed Windows 7 Desktop. You can also download it from getpaint.net

Web-based tools

  • JPEGmini – upload a JPEG image and download a compressed version without loss of quality. JPEGmini is particularly useful when you need to resize an image quickly and you don't have access to image editing software.

SiteBuilder

When you upload a large image, SiteBuilder prompts you with three options:

  • Resize the image to 1,170px wide (suitable if the image will be linked to or used in a slideshow)
  • Resize the image to 500px wide (suitable for images embedded in the centre content)
  • Resize the image to 160px wide (suitable for images embedded in the right content)

We recommend that you choose one of the above options.

Thumbnails

If you prefer to share the original image at full size via your web page, insert a thumbnail in your page which links to the full-size image. This means the full-size image loads when the person selects the thumbnail – not when the page loads.

Note: This option is only available when inserting an image uploaded to SiteBuilder.

  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 content editor, place your cursor where you want to insert the image.
  4. Select Insert a… > Image in the toolbar.
  5. In the Image picker window, select the Your computer tab.
  6. Select the Thumbnail checkbox and choose a width in pixels for the thumbnail (the default is 200px):

    Insert thumbnail option in Image picker window

  7. Select the Browse/Choose file button and browse to the full-size image on your computer.
  8. Click the Select button.
  9. When you have finished editing, select Publish in the toolbar.
  10. In your published page, select the thumbnail to view the full-size image in a pop-up:

    Talybont Reservoir thumbnail and full-size image

Related FAQs

 

Support

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