Optimize Filename, “Alt” and Other Image Attributes

Image-related information can be provided for by using the “alt” attribute

Screenshot of a missing image in a Web page

Alt text is shown when the image isn't

Images may seem like a straightforward component of your site, but you can optimize your use of them. All images can have a distinct file name and “alt” attribute, both of which you should take advantage of. The “alt” attribute allows you to specify alternative text for the image if it cannot be displayed for some reason.

Why use this attribute? If a user is viewing your site on a browser that doesn’t support images, or is using alternative technologies, such as a [tippy title=”screen reader” reference=”” header=”on”]Software for speaking on-screen information or outputting to a Braille display.[/tippy], the contents of the alt attribute provide information about the picture.

Why use this attribute? If a user is viewing your site on a browser that doesn’t support images, or is using alternative technologies, such as a screen reader, the contents of the alt attribute provide information about the picture.

Another reason is that if you’re using an image as a link, the alt text for that image will be treated similarly to the anchor text of a text link. However, we don’t recommend using too many images for links in your site’s navigation when text links could serve the same purpose. Lastly, optimizing your image file names and alt text makes it easier for image search projects like Google Image Search to better understand your images.

Store files in specialized directories and manage them using common file formats

Diagram showing images and other folders

Images folder

Instead of having image files spread out in numerous directories and sub-directories across your domain, consider consolidating your images into a single directory (e.g. brandonsbaseballcards.com/images/). This simplifies the path to your images.

Use commonly supported file types – Most browsers support JPEG, GIF, PNG, and BMP image formats. It’s also a good idea to have the extension of your file name match with the file type.

Best Practices

Use brief and descriptive file names and alt text
Supply alt text when using images as links
Supply an Image Sitemap file

Further Study

Ready to make an impact online? Let us show you how we can help you succeed. Contact us for a free consultation!