Using images in content

Optimising images helps pages load faster, reduces data use, and ensures images remain clear and usable for everyone.

On this page

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

Why optimise images for our websites

Large or uncompressed images make web pages slow to load, even when the image appears small on screen.

Web browsers often download the full-size image, not just the size shown on the page. This uses more data and makes pages harder to use on mobile phones, older devices, or slow connections.

Some websites do not resize images automatically, so you must optimise images before uploading them.

Optimising images reduces file size without noticeable loss of quality, helping images load quickly and remain clear.

Factors that affect image file size

Three main factors affect image file size:

• Pixel dimensions – the width and height in pixels. For example, 700 pixels wide by 500 pixels high.
• File type – for example, JPG or PNG.
• Compression or quality – how much detail is kept when the file is saved.

Checking file size, type, and pixel dimensions (Microsoft devices)

You can quickly check file size, type, and pixel dimensions on Microsoft devices.

To check one 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.

To check multiple images in a folder:

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

This view shows file type, size, and pixel dimensions for each image (see image).

General rules for optimising images

File sizes

Follow these guidelines:

• Large images, such as banners, should be about 400 KB or smaller.
• Smaller images should be proportionally smaller.

File sizes may be shown as:

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

Even large web images should not exceed 400 KB once compressed.

Pixel dimensions

Width usually matters more than height because it determines how the image fits across a page.

Use these maximum widths for common images:

• 720 pixels for standard images
• 1200 pixels for large banners and hero images

Do not scale up smaller images. This increases file size and causes blurring.

For other website-specific sizes, contact the Communications and Marketing Team 

File type

Choose the correct file type for web display.

• Save photographs as JPG.
• Save images that need transparency or have sharp lines as PNG (for example, logos, diagrams, and banners)

If a JPG looks clear and is smaller than a PNG, it is acceptable to use.

Compression or quality

Reduce file size without losing visual clarity:

• Save JPGs at 50% quality for photographs.
• Save JPGs at up to 80% quality for images with text or fine details.

This can reduce file size significantly without visible loss in quality.

PNGs do not have adjustable quality settings

Make image information available to everyone

Before uploading, ensure images can be understood by all users.

• Include alternative text for informative images so screen readers can describe them.
• Mark decorative images so screen readers ignore them.

How to resize and save images

Use the Microsoft Photos app to resize images for web. Follow these steps:

1. Open the image in Microsoft Photos
2. Click the three dots  and select 'Resize image'.
3. Link width and height to avoid distortion
4. Resize width as needed (do not scale up small images)
5. Select 'JPG' or 'PNG'.
6. If JPG, set quality: 50% for photos, up to 80% for logos or text
7. Click 'Save'.

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