Images for the Web: Guidelines for MIT Libraries: Embed images

Image titles

• Wordpress: Give every image a title. In some browsers, when users hover over the image, they'll see the image title, so make it readable and descriptive. Adding a title will also make images easier for us to find later.
• LibGuides: doesn't allow you to add an image title.

Alternative tags

Always fill in the field for "alt tags" - called "Alternate Text" in WordPress and "Alt tag" in LibGuides. 

Alt tags are really just descriptive text alternatives to visual images. If you don’t use an alt tag for an image, screen readers will read the image's file name to the user (ex., "logo.gif"). That's awful for accessibility! 

If your image is decorative and doesn't add any value to the content of the page, in the alt tag field, enter a blank space. This will allow screen readers to skip reading the image.  In this case adding an alt tag would be redundant. This applies to 95% of the images on our web site and news blog.

If the content in the image isn't covered anywhere else on the page, you need an alt tag! You would add a descriptive alt tag if you're adding a screenshot of a table, image of a graph, or if the image is discussed in the text. Since this information wouldn't appear anywhere else on the page, you need alt text to serve as a description to screen reader users. Alt tags should be concise and shouldn’t say more than what the photo actually conveys. (That’s what captions are for.)

Example of Title and Alternate Text fields in WordPress:

Example of Alt Tag field in LibGuides:

Also see Alt text vs. title: What's the difference?

Captions: It's OK to leave the "caption" field blank in the blog or on WordPress pages, unless you need to give attribution in the image. Captions give you the ability to show text about that image. For example, this image from the news blog has a caption under it.

Image links

WordPress & LibGuides give you the option to link images to a URL, or to a bigger version of the photo. Usually, you should choose to link the photo to nothing. Ask yourself, "Will linking the image add to the user's experience?" If the answer is yes, then link away!  

Examples of proper use of linked images: 

1. linking a small thumbnail photo on the news blog to a larger version of an exhibit photo
2. linking a small thumbnail photo on a web page to a larger version of the photo, so users can see image detail
3. linking a vendor's logo to their website

Examples of improper use of linked images:

1. linking a small image to itself (so the user clicks on the image, only to be led to a page with the same size image)
2. linking a small image to a larger version, when the larger version doesn't add anything to the context of the story

Give it some room!

When you embed an image in WordPress or LibGuides, sometimes the text bumps up against the image. If you add some space, the image will look better, and the text will be more readable. To do this, go into the image settings in WordPress or LibGuides and add horizontal space and/or vertical space ("hspace" or "vspace" on the blog) attributes to get around this. These let you put a buffer (in pixels) around your image.

In html pages, insert the hspace or vspace code like this:

<img align="left" src="http://mit-libraries.net/blog/wp-images/cupcakes10.JPG" width="150" height="126" alt="cake" hspace="10" />

If the hspace and vspace doesn't work, try using a table. Put the image in one cell of a table and the text in another. However, if the text is longer than the image is tall, the text won't wrap around the image which can look odd.

Contact: UX/Web Services