-
Contents
Image Naming
Search engines use the name of the image to identify clues about its subject matter. For example, playful-kitten.jpg is better than guqrfrwuyqpv0mmcd4xt.jpg.
The guidelines below can help to create more meaningful image filenames:
Image names should reflect the content of the image.
Use all lowercase letters to name images.
Separate words using an underscore (_) or hyphen (-) but be consistent.
Apply these guidelines to all future images uploaded to your website. If updating existing images ensure a 301 redirect is also put in place from the old image URL to the new one.
Alt Text
Alt text provides a text based alternative to non-text content within web pages. Most commonly, alt text is used when referencing images; however, the same principles can also be applied to media and other non-text content. Alt text serves several functions:
It is read by screen readers in place of images. This means the content and function of the image is accessible to those with visual or certain cognitive disabilities.
It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.
Alt text should describe the content of the image in as much detail as possible and be unique to each image. For example, "closeup of a playful ginger kitten with its tongue sticking out" is better than "playful kitten".
Responsive Images
It is important to ensure images are the right size for the page they appear on and use compression to reduce the file size. This, in turn, reduces the time required for the images to be loaded by a web browser.
There is no ‘optimal’ size that must be met. Instead, it is important to balance performance against quality – an image that has been compressed to the point where it is distorted beyond recognition is of limited value.
Where the same image needs to be used multiple times and in different sizes, it is acceptable to create multiple versions of the same image with different dimensions. The srcset HTML attribute can be used to indicate which version should be used for different screen sizes.
Image Format
WebP is a modern image format that provides superior compression for images on the web. While most modern browsers support the WebP format, Safari is a notable exception. Therefore, any solution must be able to detect browser compatibility before serving WebP images.