Using images in content

Optimise images for our websites, so they can be accessed by as many people as possible.

On this page

• Why optimise images for our websites
• Factors that impact image file size
• General rules for optimising images
• How to resize and export images

Why optimise images for our websites

Images can slow down how quickly a page loads, especially if they are too large or not compressed.

Even if an image looks small on the screen, a browser might still download a full-size version. This uses more data and makes the page harder to use for people on mobile phones, older devices or slow internet connections.

Our websites do not automatically resize images before downloading, so it’s important to optimise them before you upload them.

Optimising means making the image file size as small as possible without losing too much quality, so it loads quickly and still looks good on the page.

Factors that impact image file size

Three main factors determine an image’s file size:

• Pixel (px) dimensions (for example, 700px x 500px)
• File type (for example, JPG or PNG)
• Compression or quality level

Check image file size, type and pixel dimensions (Microsoft devices)

For a single image:

1. Right-click the image file.
2. Select 'Properties'.
3. Find the file type and size in the 'General' tab.
4. Click the 'Details' tab to find pixel dimensions.

For a group of images in a folder:

1. Open the folder containing the images.
2. Right-click within the folder.
3. Select 'View,' then 'Content'.

General rules for optimising images

File sizes

High quality or large images (like full page images or home page banners) should be under 400KB. Other smaller images should be a much smaller file size.

Depending on the application you are using, file sizes may be shown in the following units:

• 1 byte (B)
• 1 kilobyte (KB) = 1,000 bytes
• 1 megabyte (MB) = 1,000KB (or 1,000,000 bytes)

Even a full page image, like on the Nottinghamshire Weddings homepage, should not be bigger than a 400KB (0.4MB) file size when compressed. It will still be excellent quality visually at this size.

Pixel dimensions

Width is usually the most important factor when resizing an image. Height is less important, as long as the image is not distorted.

For most images on the public website:

• Use a maximum width of 720px for standard images (like info pages and dashboard tiles).
• Use a maximum width of 1200px for large banners (like hero images and footer banners).

Ask the Communications and Marketing Team for specific image sizes for our other websites.

Do not scale up smaller images, as this can make them appear blurry or pixelated (and increase the file size).

File types

Save photographs as JPGs.

Save images as PNGs if they require transparent backgrounds or sharp details and text. For example, screenshots, logos, banner graphics or diagrams with text.

If a JPG with text, logos or other details looks good on desktop and is a smaller file size than a PNG, it is okay to use.

Compression or quality

Save JPGs at 50% quality for photos (80% for images with text or fine detail). This can reduce file size by up to 96% with no visible loss in quality.

PNGs do not have adjustable quality settings.

Make image information available to everyone

Before uploading your image to our websites, also make sure image information is available to everyone. For example, by including appropriate alternative text for critical information in images. 

How to resize and export images

Using Microsoft's built-in Photos app

1. Open the image using the Photos app.
2. Click the three dots in the toolbar.
3. Select 'Resize image'.
4. Ensure dimensions are in pixels and the width and height are linked - this prevents the image from becoming distorted.
5. Resize the width as needed (do not scale up smaller images).
6. Select 'JPG' or 'PNG'.
7. If JPG, adjust quality – start with 50%, up to 80% for images with logos or text (Note: no preview is available)
8. Click 'Save'.

How to resize images for web (Microsoft Photos app) [YouTube, 1 minute]