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
We recommend you save images with the following settings:
- 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 manual 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 10 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 10 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 presented 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.
Open an image in a lightbox pop-up
When you add an image to your SiteBuilder page, you can select the Image opens in a lightbox setting to have it open in a popup when visitors click it - select the reservoir photo to the right to view a larger version in a pop-up.
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
- Upload both files to the Files tab.
- Go to Edit > Edit centre content, and either add a new image or edit an existing one.
- Select the web-optimised image file to display on the page.
- Make the image a link to the high-resolution file.
- Select Publish.