Each of the image components has implementation guidance which should be followed before adding that image to a page. It is important that appropriate file formats, image sizes, image ratios and helpful alternative text are used where necessary.
Ensure that where an image is intended to be informational in nature, a suitable alternative text is provided. This text should succinctly describe the visual information. This assists users of assistive technologies, specifically screen reader users, to understand the visual information or its intended purpose.
Image optimisation is a two-stage process involving compression and sizing. These steps are vital to preserve image quality and to reduce the overall impact on page load performance.
Different file formats are advised dependent on the type of image to be displayed. Where a specific component requires a specific file format this is included in the documentation for that component. As a general guide the following file formats are advised. Further information about each type is provided below.
JPEG is the most widely used image file format online, and the default file type for images from most smartphones and dedicated cameras.
It was designed specifically for photographs of real-world subjects, also known as ‘continuous-tone’ images, rather than graphics or illustrations, and it’s supported by all kinds of devices, displays, and web browsers.
JPEGs images should be compressed to level which is appropriate for efficient file size (not too large to cause high page load) and quality (too low reduces image quality). JPEG images should be saved at 85% image quality.
The PNG format is used for graphics and has superseded GIF format. PNG should be user over GIF. Both formats use lossless compresseion but PNG has a greater level of compression so file sizes are lower. PNG also supports a significantly wider range of colours (16 million as opposed to 256).
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. SVG images can be scaled in size without loss of quality.
Avoid converting from one image type to another wherever possible. If your image is in a non supported format (eg. .psd, .xcf) then export your image (jpg for photographs with compression 85%, png for graphics) as per the above guidance.
Ensure your image is in the correct format (and compression where applicable) before resizing the image. Often you will have to crop an image to ensure it has the correct dimensions required for a particular component. Optimum sizes for images are listed in the documentation for each component.