Guidelines
Guidelines
Content
An Image should:
- Use an image-preview that is based on the actual image asset to ensure that it's an actual preview of the image.
- Use an image-preview with the same aspect ratio as the actual image to keep the dimensions of the preview and the high-resolution image aligned.
Performance
An Image should:
- Have a file size appropriate to its dimensions, reducing the actual load time and the transferred file size for the user.
- Use an image-preview which is a reasonably smaller version of the original image to provide fast loading times. 10% of the actual image's dimension (width, height) works best. See Media Preview.
Accessibility
An Image should:
- Set a contrasting appearance based on the environment it's used in. Use light appearance in dark environments and vice versa.
- Have a descriptive image-alt (alternate text) for providing the content in an alternative text-based format and making the image more accessible.
- Have an image-alt attribute, unless it’s for decorative purposes. Including “image of...” or “photo of...” in the alt attribute is not needed, as assistive technologies are taking care of declaring the media type.
- Have an overlay if a text or a Button other than the ‘cover-up’ Button is placed on it.