Page Content: Images

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

[toggle title=”Use brief and descriptive file names and alt text” variation=””]

Like other types of page optimization, file names and alt text (for [tippy title=”ASCII languages” reference=”” header=”on”]Abbreviation for American Standard Code for Information Exchange. A character encoding centered on the English alphabet.[/tippy] are most effective when they’re short and descriptive. Avoid using generic names like “image5.jpg”, “photo.jpg” or “004.gif”. If your site has thousands of images, consider using a program to automate the naming of images. Avoid lengthy, full sentence file names or stuffing keywords into the alt text. For users that cannot see images because of their settings or device used to access the page the alt text is important to provide an alternate way to convey information.

With a Komotion Web Pack (try free) you will find it easy to manage image tags such as title, alt, description, etc.

[/toggle]

[toggle title=”Supply alt text when using images as links” variation=””]

If you use an image as a link it is particularly important to fill in the alt text; it is like provide anchor text for a text link and it should help Google understand more about the page you are linking to. Note that this differs somewhat from the original reason for the alt text, which is to provide alternate info to users that cannot see the image. Avoid writing long, spammy text. Do not use only image links for your site’s navigation.

[/toggle]

[toggle title=”Supply an Image Sitemap file” variation=””]

An Image Sitemap file can provide the Googlebot with more info about images found on your site. Its structure is similar to the XML Sitemap file for your Web pages.

With a Komotion Web Pack (try free) you do not need to do anything; our system ensures your website is fully indexed.

[/toggle]

Further Study

Leave a Reply

Your email address will not be published. Required fields are marked *