Recommendations and best practices.

Images are part of a visual language used to communicate with users. Images may be used to tell a story, communicate a complicated idea, or supplement text with additional information.

• Use context-relevant imagery.
• Use images that convey real meaning.
• Avoid purely decorative images.
• Take user emotions into account.
• Always have a focal point.
• Provide high-resolution versions.
• Do not distort your images.
• Test color contrast.
• Provide captions for screen readers.
• Do not include important text in images.
• Graphics should never look like banner ads.
• Always have the proper right to use a photo.
• Consult brand guidelines when including any third-party brand in your application.

Images should display at the correct resolution for all types of screen resolutions. To address this, you will need to create at least one version of the image at twice the maximum size it will appear within the site, and then use CSS styling to adjust dimensions to half its native size. For instance, if you have an image that needs to be displayed at 100×50, then you should save the image at 200×100 and use height and width properties in the display.

It is recommended that you always use conventional aspect ratios for your images

• Square / Circle
• Portrait: 1:2, 2:3, 3:4, 9:16
• Landscape: 2:1, 3:2, 4:3, 16:9

HTML5 provides srcset, an attribute designed to deliver the optimal file for the viewport size of each specific device requesting an image. When specified, the browser determines the smallest (file size) image to download based on its resolution and element’s dimensions.

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah" />
      

For details on how to use srcset to deliver responsive images, see this article. Note that IE 11 does not support the srcset attribute, so you may wish to use the desktop size version of the image as the src attribute value where audience browser usage indicates.

It is critical to use proper tools and techniques to fully optimize image formats to reduce file size and then at as high a rate of lossy compression as is tolerable while still maintaining required image quality. While it is possible to accomplish a good file size optimization in your image editor, there are many freely available tools on the web that make this easy; again, even highly optimized images may trip a penalty from auditing tools. Online image processors for optimization include:

• Optimizilla Image Compressor makes fine-tuning images exceptionally easy.
• Google Page Speed offers downloadable files upon audit.

There are also ways to integrate image compression and optimization in version control systems so that it happens automatically on any new image that is introduced to the repo. Cloudflare also provides a solution for optimizing image delivery.

Loading images is a consuming process — they are substantially larger and take longer to load, compared to plain text. Until they are fully loaded, the experience lives in a transient, incomplete state.

If there is potential that image loading might compromise your application's experience, here are some suggestions to help improve it:

1. Defer loading images until they intersect with your viewport. Because the Intersection Observer API is not supported by IE 11, we abstain from officially recommending it. Instead, it is possible to rely on the EventListener API to register for scroll , resize and orientationChange events and trigger the desired loading behavior. There's an interesting article on the subject.
2. If images being loaded have a predetermined size, ensure they are present in the <img> tag. If the image fails to load, the application will not disrupt as hard.

• Always test images for high contrast.
• The meaning of an image should not be lost when 1 or all colors are removed.

Provide descriptive text for alt attribute to ensure that usage of this component complies with accessibility guidelines for:

We would like to get your feedback. Tell us how you use this component in your projects and how we can improve it.

HTML5 provides srcset, an attribute designed to deliver the optimal file for the viewport size of each specific device requesting an image. When specified, the browser determines the smallest (file size) image to download based on its resolution and element’s dimensions.

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah" />
      

For details on how to use srcset to deliver responsive images, see this article. Note that IE 11 does not support the srcset attribute, so you may wish to use the desktop size version of the image as the src attribute value where audience browser usage indicates.

When displaying images, it’s important to remember the largest version should be formatted for viewing across all viewport sizes. To ensure proper display, give the image a max-width property of 100%. However, in some instances, including the max-width may not be enough. While it is always important to test views in multiple browser sizes, images may require more specific adjustments to responsive layouts than any other page element. In many frameworks, the layout becomes liquid at specific viewport sizes (i.e. at 768px all sizing is based on a percentage rather than specific pixel sizes). With a broad variety of sizes for small touch devices, be sure to test images thoroughly.

Images should display at the correct resolution for all types of screen resolutions. Historically, images delivered to screens have required a resolution of no more than 72ppi. However, with the advent of Retina and other high-resolution screens, resolutions have increased to 144+ppi. Unfortunately, most web file formats can only be saved as 72ppi and do not display crisply on high-resolution screens in their native size.

To address this problem, you will need to create at least one version of the image at twice the maximum size it will appear within the site, and then use CSS styling to adjust dimensions to half its native size. For instance, if you have an image that needs to be displayed at 100×50, then you should save the image at 200×100 and use height and width properties in the display.

It is important to recognize that the largest display of an image size may not correspond to the largest media screen size. This means that an image may actually display larger in mobile or tablet view than in desktop, depending on the page layout at each responsive break. Again, responsive testing is vital in ensuring the image displays crisply and responsively in all formats.

Using srcset to deliver responsive images means you should determine the largest display size as outlined above, and then make smaller versions of this image as well. Use the devices your analytics indicate to determine your target sizes or use an online tool, such as the Responsive Image Breakpoints Generator, to create a subset of images.

Caveat — As with any guideline, use your discretion to determine when an image filesize is small enough for delivery to all devices. Your audience statistics and application context may mean that files of less than 10k or even 25k are perfectly acceptable for delivery across all devices. Consider the total weight of the page as well as the other technicalities.

Because of high-resolution proliferation, PNG formats will best serve as web collateral. Consider indexed or 8-bit PNG format for illustrative images, rather than the full 24-bit resolution. Much like indexed GIF images, this lower bits-per-pixel display will have a considerably smaller file size. Larger photographic images will be better saved as JPGs to reduce delivery size. As noted below, always use a tool to optimize these images for maximum compression, as client-side auditors will penalize even the most diligently saved file.

Save vector graphics as native SVG files. For instance, your application logo, which may use a custom font and be displayed in a variety of sizes and colors, could be implemented as an SVG image. If you believe an image may be suited for this type of display, also consider the cons, including rendering time and processing. The object implementation of SVG files with external CSS is the optimal implementation. For more information, see css-tricks.com.

As noted above, non-optimized, uncompressed images can be quite large in terms of file size and this can have an outsize effect in high network latency situations like cellular networks for mobile devices or even just browsers that are a long way from your data center. I.e. in China.

It is critical to use proper tools and techniques to fully optimize image formats to reduce file size and then at as high a rate of lossy compression as is tolerable while still maintaining required image quality. While it is possible to accomplish a good file size optimization in your image editor, there are many freely available tools on the web that make this easy; again, even highly optimized images may trip a penalty from auditing tools. Online image processors for optimization include:

• Optimizilla Image Compressor makes fine-tuning images exceptionally easy.
• Google Page Speed offers downloadable files upon audit.

There are also ways to integrate image compression and optimization in version control systems so that it happens automatically on any new image that is introduced to the repo. Cloudflare also provides a solution for optimizing image delivery.