Full width images

About full width images 

Full width images are commonly used near the top of a page. These might be referred to as a:

• hero
• banner
• landing 
• splash 
• graphic

Full width images are sometimes placed on other parts of a page.

They can add visual interest to:

• marketing campaigns
• long documents, like reports or articles

Risks with using full width images

Full width images:

• might distract users from their task
• may not display well on all screen sizes
• can make your page harder to navigate

Our image guidance highlights other issues with using images.

Selective attention 

Nielsen Norman's eye tracking research shows many users ignore images that look like adverts.

User confusion 

Full width images may make your website ‘stand out’ visually compared to other websites.

But a user could feel disorientated by this design approach, especially if they are arriving from a text-based page.

Google research found users prefer simple, familiar designs to complex, new ones.

Changing screen size

The Design System uses responsive layouts. This helps components and patterns adapt at different viewport widths.

92% of users access the internet on a mobile according to the 2023 Scottish Household Survey.

Parts of a full width image that you see on a laptop might not be visible on a mobile.

If not set up correctly, images can look stretched or blurry on larger screens like computers.

Screen magnification

Someone using a screen-magnifier cannot take in an entire image. 

They must scroll to view the image and find any overlaid elements like text or buttons.

Alternatives to full width images

If there’s a strong user need for images you can:

• use a feature header, like the ScotAccount homepage
• add an image to the body, like the Digital Connectivity campaign
• use image card navigation, like the foster care campaign

Using full width images

If you use full width images, make sure important details are not cropped or hidden on different screen sizes.

With full width images you may need to:

• create different versions of an image to serve when the viewport reaches set widths (breakpoints)
• not serve an image to smaller viewports

Nielsen Norman has advice on using images across multiple screen sizes.

Google’s PageSpeed Insights tool can diagnose where image delivery causes performance issues.

If you’re using images, see our image guidance to find out more about: 

• choosing and finding images
• creating illustrations
• accessibility 
• aspect ratios
• performance

Website analytics

To understand user behaviour with components overlaid on an image, you can track button interactions. 

The data attributes for buttons are added automatically by the Design System’s ‘tracking’ script. 

If you're adding other non-button links over the image, we advise adding custom data-navigation data attributes similar to the notification banner.

Accessibility

Buttons and text

You must meet colour contrast standards between any components like buttons or text overlaid on an image. 

To make overlaid text elements readable you may need to:

• box in text
• add blocks of colour behind text 
• apply a transparency effect between the text and image

Decorative images

W3C says a decorative image does not add any information to a page.

If the image is decorative, use an empty alt text. This tells screen readers to ignore it.