Images are good!
Images can improve the usability of your web pages and research guides, but it can be tricky to find relevant images.
For the blog, try your best to have an image for every post to entice people to read it. The image should be fairly small, so that people can easily scan through blog posts without huge images to slow down their scrolling.
Be creative! Even if the image is not directly related to the content, just having one that's related in tone or content will spice things up.
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: null. 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:
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.
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:
Examples of improper use of linked images:
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.