Return to Sky UI homepage

Media - Images - Overview

General guidance

Image format

Vector images (SVG) should be used where possible for icons and illustrations as they typically result in smaller files and can be scaled without loss of quality.

Where an SVG isn't suitable we should use .webp images. WebP images are typically at least 25% smaller than other common formats such as JPEG and PNG.

WebP is safely within our supported browser and OS list however if in doubt we can provide fallback images using the <Picture> element:

<Image alt="" as="picture">
  <source srcset="image.webp" />
  <img src="image.png" />
</Image>

Aspect Ratio

Where possible it's best to apply an $aspectRatio to images as this dramatically reduces the impact of Cumulative Layout Shift or CLS.

<Image
  //...
  $aspectRatio="16 / 9"
/>

See MDN web docs for more information on aspect-ratio.

Responsive images

There are two scenarios where we may want to use responsive images:

  • Optimised scaling of assets for performance.
  • Artistic direction, providing different images at different breakpoints.

Optimised scaling with srcset

srcset allows the browser to make decisions about which asset to load for the best performance.

The browser will request the most appropriate asset based on the width descriptor, and only make an additional request if a higher-resolution image is required than currently cached. This means srcset is not suitable for serving specific images on mobile or desktop for example as there is no guarantee which image will be shown.

The srcset is a string of comma-separated source URLs and width descriptors typically.

<Image
  alt=""
  src="image.webp"
  srcset="image-640.webp 640w, image-960.webp 960w"
  $aspectRatio="16 / 9"
/>

You can also use srcset to serve images tailored to higher DPI screens:

<Image
  //...
  srcset="image@2x.webp 2x"
/>

See MDN web docs for more information on srcset.

Art Direction

Sometimes we may need to serve specific images for mobile and desktop for artistic direction. There are two approaches we can do this with Sky UI:

useResponsiveProps

We can leverage the useResponsiveProps hook to update the image src depending on the breakpoint:

const { src = 'image-fallback.webp' } = useResponsiveProps({
  src: {
    xs: 'image-xs.webp',
    md: 'image-md.webp',
  },
});


//...


<Image alt="" src={src} />;

This approach is easier however can result in flicker when switching between src and removes decision-making away from the browser.

Picture element

The second approach is to use the Picture element, this offers more options and is a more native approach however does result in some extra complexity.

<Image alt="" as="picture" $width="640px">
  <source srcset="image-md.webp" media={`(min-width: ${breakpoint('md')})`} />
  <source srcset="image-xs.webp" />
  <img src="image-fallback.png" />
</Image>

See MDN web docs for more information on picture.

Further reading

Inclusive images

Images we use typically fall into one of two categories:

  • Informative - Images that convey some meaning to the user.
  • Decorative - Images that are used purely for decorative purposes.

Informative images

We must provide high-quality alternative text where appropriate to ensure users aren't missing out on valuable information and context.

Alt text isn't necessary when the image is described by adjacent text.

Alt text should be a short, succinct description of the image contents. Take the following image and alt text example alt text:

Joel and Ellie walk through an overgrown, post-apocalyptic city in The Last Of Us.

Joel and Ellie walk through a dilapidated, post-apocalyptic city in The Last Of Us.

A picture of a scene in The Last of Us.

It's vital that an alt attribute is present, otherwise the screenreader will automatically read the image's file name instead i.e. my-cool-picture-01-03-2019.jpg!

Decorative images

These assets don’t provide additional information to the user. They might be purely used as cosmetic flourishes on the page or they may already be described by adjacent text.

For inclusive decorative images, we should provide a empty alt attribute (i.e. alt="") to ensure that the browser interprets it correctly.

<Image alt="" src="path-to-decorative-image.webp" />

We can also use role="presentation" to inform the browser an image is decorative, however support is mixed so always prioritise alt.

Further reading and resources

Leveraging SEO with assets

All of the best practices listed above have an impact on SEO, however, some additional considerations should be taken.

File naming

Filenames have an impact on SEO, filenames should be:

  • short
  • descriptive
  • human-friendly
  • non-generic

the-last-of-us-joel-and-ellie.webp will perform better than MSTeams-image-15-version-4.jpeg.

Alternative text

When writing alt text for images there are some important factors to consider:

  • Succinct, information-rich text that describes the content of the asset, providing the user with context.
  • Google uses alt text in conjunction with vision algorithms and page contents to understand the subject matter of the image.
  • Alt text shouldn't be used for "keyword stuffing", this creates a bad user experience and is likely to negatively impact SEO.