--- title: "Media - Images" canonical: https://sky-ui.cf.sky.com/guides/media --- # Media - Images ## 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 `` element: ```jsx ``` ### 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. ```jsx ``` **Note:** See [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) 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. ```jsx ``` You can also use `srcset` to serve images tailored to higher DPI screens: ```jsx ``` **Note:** See [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) 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: ```jsx const { src = 'image-fallback.webp' } = useResponsiveProps({ src: { xs: 'image-xs.webp', md: 'image-md.webp', }, }); //... ; ``` **Important:** 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. ```jsx ``` **Note:** See [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) for more information on `picture`. #### Further reading - [web.dev Responive Images and Art Direction](https://web.dev/patterns/web-vitals-patterns/images/responsive-images) - [MDN Responive Images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) --- ## 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 a dilapidated, post-apocalyptic city in The Last Of Us._ _A picture of a scene in The Last of Us._ **Warning:** 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. ```jsx ``` **Important:** 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 - [WebAIM Alternative Text guide](https://webaim.org/techniques/alttext/) - [W3C alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) ## 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 **Important:** `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.