Adding Embedded Images to a Web Page

Posted August 27th, 2007 by Mike Cherim

Embedding content images on a web page is a dirt-simple, basic, and straightforward task, right? Well, yes, it is, but there are some interesting tricks I’ve learned since I’ve been doing this that I think are really helpful to know — and worth sharing. Most of which I have stumbled upon quite by chance, while others came to the front of my brain by way of my interest in making web sites more accessible and usable.

Adding an Image

The beginning seems like a good place to start so we enter the picture just as the image editing software is being closed. A medium quality 200×100 pixel image called foo.jpg was just exported to a local folder and the image will be uploaded to the images directory on the server in a just a minute.

Meanwhile, let’s grab a text editor (or whatever you happen to use) to edit the web page. We need to add a little bit of mark-up. Below is the mark-up, and the basic attributes you should have. The width and height because if the browser knows the dimensions it can allocate screen areas and element positioning more quickly resulting is a slightly faster page load. The alt attribute is required. For now I have filled in the source path and image dimensions — width and height in pixels by default. I’ll get into the alt attribute and also a class attribute soon. There are others such as id, style, and title, but I won’t be discussing them.

<!--This example is bare bones-->
<img src="images/foo.jpg" width="200" height="100" alt="" />

<!--Note: The self-closing ending slash is not required on all sites-->

What we get is something that looks like the image shown at the beginning of this paragraph. It is a 200×100 pixel block that is by default displayed inline with the text it accompanies (this text, of course). I think it would look better if the text wrapped around it. Don’t you? To do that we need to float the image — which happens to be my preferred method.

Floating Images

Floating content images is easy and it works reliably on a web page. Even though floated elements normally reside outside of the content flow — just like absolute positioning — the other elements within the same parent as the floated image will respect the image’s dimensions, borders, and margin, if any. To float an image, I use one of two classes: left or right. These classes would be defined in a style sheet something like this.

/*
 I have applied margin and I will explain margin, and padding, next
 I use a shorter bottom margin (3rd value) because of natural line height
*/
img.right {
  float : right;
  margin : 0 0 5px 10px;  /* Top, Right, Bottom, Left */
}

img.left {
  float : left;
  margin : 0 10px 5px 0;
}

To apply one of these classes, add class="" to the image mark-up shown previously. Then fill in the desired style: right or left. Like so (right class shown):

<!--A class attribute has been added, alt is still null-->
<img class="right" src="images/foo.jpg" width="200" height="100" alt="" />

Here’s the same image as before, now floated to the right (using the “right” class on my blog’s style sheet). Doesn’t that look better? I could have used the style attribute and added the style info above directly to the image mark-up, but using a Cascading Style Sheet (CSS) is a much better way to go for many reasons — the topic of another article at another time perhaps.

Margin and Padding

Margin and padding are handy tools to have when floating an image.

With margin, for example, you can create a nice amount of white space around your images, If you have room in your content area, you can even apply negative left margin, margin-left : -30px;, to a left-floated image pulling it outside of your content a bit adding a nice magazine-like touch.

Padding, on the other hand, has a couple of its own advantages — and a disadvantage. First of the good stuff. You can apply padding and a background color (yellow for example) to the focus state of a linked image. I’ll discuss this in more detail, but I’ll say now this is beneficial to keyboard users. Padding is also useful for ensure alt text is readable if the image abuts solid colors, text, or an image border. The padding, which must be applied to the top and left at least, creates a gap between the obstruction abutting the image’s edge and the alt text. (Alt text is something I will get into a bit more.) The disadvantage of padding is if you have linked images with borders, depending on the image, it can create an unsightly gap.

Before I get into alt text, though, here’s a little bit more on image placement. Namely another class I use that I haven’t yet discussed: Center.

Centering Images

As I have the right and left classes in my style sheet, I lied when I said I had only two. There is a third. I also have a “center” class. It’s done just like the other styles, except in the case of centered images, the image isn’t floated, but rather the right and left margins are set to “auto,” and the top and bottom margins are given a unit of measure value.

/* The first margin value is top-bottom, the second is right-left */
img.center {
  margin : 10px auto;
}

To use this class, put class="center" in the image mark-up shown previously. Now here’s an example of my foo image, centered.

Easy enough, huh? Okay, enough fun, time to get controversial.

The Alt Attribute

For awhile I’ve had a fairly strong opinion regarding the use of the alt attribute and alt text. My thinking, in a nutshell, is that it should be rarely used — in other words the attribute’s value would remain null: alt="". Briefly, I feel this way because the image should be described in the author’s writing to the extent needed to derive any non-aesthetic value the image may offer.

Another reason I usually keep it null is I simply must think about who will be using alt text. Primarily it will be a person with a text browser or screen reader. If those users are going to get text instead of an image, I must first assess the image for its content value, if any, then apply a little common sense. For example, the images you’ve encountered so far say “image foo” on them. Even though there is text on the image, it’s really decorative. Their value is derived from the placement and other image attributes, and all of those so far are purely visual enhancements. This visual value is conveyed in the article text so my bases are covered. So, unless I want to begin a bunch of the paragraphs in this article with “image foo” I really don’t see much point of supplying alt text. Do you?

To get more on this particular subject, I did write an article I titled The Alt and Accessibility. I wrote it a while ago, but I think it still rings true today. Especially the image assessment part.

There is one instance I can think of, however, where alt text simply must be used…

Linked Images

As I alluded to, linked images must always have alt text so the link offers a known target to those who won’t get the image itself, assuming it says where the link leads. There are a couple of things to think about when choosing a link image’s alt text.

First of all, just like normal text links on a page, for proper accessibility shared link text must go to the same target. Think of “Read more” links that go to several different pages (you shouldn’t do that). That’s why the excerpt for this article says ‘Continue reading “Adding Embedded Images to a Web Page”’ as that text will not be used to point elsewhere. The same mandate applies to linked image alt text as well.

Another consideration is the size and color of this alt text. On a site I’m making now it will have linked 60×33 pixel icons on several pages. These all have unique linked text, but they’re small. I don’t want to wrap the images in something so I can hide overflow, nor do I want to have the text spilling out into the content, making both the alt text and content hard to read if someone has images disabled on a visual rendering of the site. A dial-up user for instance. Don’t shake your head, I know of two people who do this. To address this possible issue, I think it’s a good idea to size alt text in your style sheet by applying font-size to img, like so.

/*
  You can add the CSS color property if you need to,
  but do make sure the text is visible and readable
*/
img {
  font-size : 80%;
}

I mentioned before I would discuss padding and its role in making linked images more accessible a little bit more. The idea is to provide a background color on the linked image’s focal state so when a user is tabbing their way through the site they will have a clear indicator of when they encounter the image because thanks to the padding used, some of that background color will be visible. This can also be facilitated by way of using a border property. In either case, though, it is very important that these properties exist, in part, during the image’s static state as well. They don’t have to be colored or visible, but the measurements must exist so when focus is triggered and the focal background color or border is applied, the image doesn’t shift position or grow larger (which to me is a serious no-no).

This is an example of the styling used to do this to a linked image. In this example, for teaching purposes, I will apply a background color and a 2 pixel border.

/*
  First the static state. The background and border colors match the
  existing background (#fafafa here)
*/
a img {
  padding : 5px;
  background-color : #fafafa;
  border : 2px solid #fafafa;
}

/*
  Now the focal state. The background and border colors will now contrast
  with the existing background. The active state is when you click the link
  or when you focus on it in Internet Explorer
*/
a:focus img, a:active img {
  padding : 5px;
  background-color : yellow;
  border : 2px solid black;
}

Here’s a real example of a linked image, using the border rules I actually use on this blog. In this case it is a 2 pixel green border, and the changed state — turning the border gray — applies to the hover, focus, and active link states of specially classed linked images.

I use no padding normally (though I added 4 pixels of it in this example, but not colored). I applied the border in my style sheet by adding a “border” class to the linked images properties offering me better control of when it’s applied. So the class attribute of the image above reads like this: class="center border". (Note: Some people don’t think it’s a good idea to combine classes, but I really don’t see what the big deal is.)

If you turn off images you will see the alt text on the linked image example above reads: “Example of a linked image, but the link goes nowhere.” Something else you will note is that the alt text is centered. I’m not saying this is something you should do, but I have a rule of thumb when it comes to alt text alignment as well (not just color and size as mentioned): I align the text the same as the image. Images floated left have left aligned text, images floated right have right aligned text, and the center is centered. I do this because it adds a nice touch to those users who don’t support images, but do support CSS styling.

In Summary

You probably haven’t considered some of what I’ve offered herein prior to now. The rules I’ve outlined are pretty simple and hopefully make sense. It’s not hard to apply these rules, and some of them I feel really enhance the accessibility and usability of the site. It’s not hard to embed images on a web page. And applying these simple tricks does not make it hard. Yet, it does make it better in my opinion so if you’ve gotten anything new from this article, hopefully you’ll apply it on your next project. Happy embedding!

Filed under Access Counts, Coding & Markup, Do It CSS Style —

16 Responses to: “Adding Embedded Images to a Web Page”

David Zemens responds:
Posted: August 27th, 2007 at 7:17 am →

Nice tutorial with great reminders about issues we may have already known, but have just forgotten to use over time.

The suggestion to size the img text is something I had never thought of, but makes perfect sense as you describe it. I have already applied it to one of my projects and will try to remember to incorporate it in my other work, too.

I also like the suggestion to offset the floated images with a negative margin for the magazine look. Simple idea with great impact on the page display.

Thanks again, Mike.
Dan Schulz responds:
Posted: August 28th, 2007 at 12:20 am →

Hi Mike,

Not a bad article, but I must insist on suggesting against using “left” “right” and “center” for class and ID attribute values. Not only are they not semantic (since they don’t describe what the element is about as far as meta-data is concerned), but they’re also dependent on the presentational appearance of the element’s location in the current layout. What if I wanted the image to be floated to the right when it has a class of “left” on it and I’m not allowed to change the markup (as can happen, especially when working on someone else’s Web site, or a live site that you didn’t create but are now stuck with)?

What would you do in that situation?

Or worse, what if you inherited a Web site that had these class and ID attribute values on floated and centered content, but were told you cannot change the markup if you want to keep your job (regardless of whether it’s freelance or employment)? Just a few things to think about.

Hope you didn’t mind the mini-rant.
Stuart Laverick responds:
Posted: August 28th, 2007 at 8:58 am →

Nice article, nothing I didn’t know, but a few bits I have become lazy about.
I was interested in your discussion on alt tags. I have taken a similar view to yourself that unless the image actually conveys some semantic meaningful information, why give it an alt description? So many of the images are there to illustrate a concept rather than being integral in making the point itself, yet the standards claim that images should have an alt tag.

Provide a text equivalent for every non-text element (e.g., via “alt”, “longdesc”, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1]

This would surely result in a text based screen reader reading out repetitious material to it’s user as the concept would have also been covered in the text itself, and read out an alt for every list bullet and graphical button? Surely this is just too much information, after all we’re trying to provide an alternative means of accessing the information not trying to produce an audio photostat of the web page.
As a point of interest I have used both forms of non-descriptive alt text:

Do you have a preference? if so why?
Mike Cherim responds:
Posted: August 28th, 2007 at 9:36 am →

@Dan: I don’t mind the rant at all. I think it’s great that people enlighten the readership and infuse new ideas. Admittedly, I’ve learned a lot from comments so rant-on Regarding the use of more semantic names, I agree. I actually wrote an article on the subject called Class & ID Naming Conventions. In this case, the more semantic way to go would be to use classes like img-pos1, img-pos2, img-pos3, or something to that effect. That said, I do have a reason I went this way, though, not saying it’s right, it’s just my reasoning: The classes have been used this way on my site for a long time, and the theme I built this blog on is publicly available. These two bits of info actually lead to the two reasons. 1) First I do like the consistency. While it’s not the best practice, I can go to any of my sites and style common elements, classes and even some IDs the same way, with out looking at the style sheet. So while I could be setting myself up for some hard work (changing classes site wide), or having classes names that come across strangely — right means left and left means right — using this method really seems to work for me. 2) Since a lot of people use this theme, I figured it right be easier form them to get a handle on names like left, right, center.

@Stuart: The only reason I can think of to use more alt text would be if one was try to give the user spatial awareness of a site. But I can’t imagine (and I am confined to speculation/imagination), how this might benefit a blind user unless spatial presentation is integral to understanding the site — which it really shouldn’t be. Personally I try to handle/avoid spatial references in my text by sometimes referencing things in a way that doesn’t not make sense to someone: (”to get around, see the nav menu on my sidebar,” instead of “to get around, see my nav menu to the right”). I will often read my site using Opera, and while it’s not Jaws, the renderings are close enough to get a feel for what it’s going to sound like. Thus, with eyes closed, ears open, and some common sense I can work reasonably towards making a site that is more usable to the person in need, rather than blindly following rules that may end up actually hampering the experience. In fact, how this sound? “To make a better site for blind users, developers need to open their eyes.”

The net result: I got an email a few weeks ago from a blind user thanking me for taking the time to make sure my site was usable to them. Getting that email felt good, and it confirmed some of my logic in the best way possible — from the horse’s mouth so to speak.
Stevie D responds:
Posted: August 28th, 2007 at 12:28 pm →

I’m with you on the ‘alt text’ - keep it as minimal as possible.

If the image is purely decorative, or reinforces anything that already exists in plain text, it should have alt=”". Only if it is necessary to the content or function of the page should it have any text in there.
Imagine browsing your site with images turned off (and not being able to turn them on). Does it help you to know there is an image somewhere? If so, give it alt text - if not, leave it blank.

One thing you didn’t mention is the title=”…” attribute. This can be used to give additional information about an image - usually displayed as a tool-tip, in most browsers. If your image includes text, particularly if it is small and/or may be hard to read, you should replicate the text both as alt and title. If the title is not specified, IE naughtily displays the alt text as a tooltip, but Firefox and Opera follow the specs and do not.
Joe Clark responds:
Posted: August 30th, 2007 at 6:05 pm →

I’m not clear on why you’re trying to style the copy in an alt text when it will never be visually displayed if the image is.

Also, no, you can’t pick and choose which images get alt texts. alt=[null] is rather less applicable than you believe.
Kerry Webb responds:
Posted: August 30th, 2007 at 8:17 pm →

Re alt text - Amber Simmons, writing in A List Apart, made an eloquent case for taking almost as much time in selecting your alt text as you do in choosing your image.
Mike Cherim responds:
Posted: August 30th, 2007 at 8:47 pm →

@Joe: My rationale for styling the alt text, more simply put, is for those who surf the web without images (I know two people who do this) since the alt text may spill out of the image area and into the surrounding content, possibly making both difficult to read. It’s more of a usability issue, I suppose, then aesthetics secondarily. I really want my sites to not only perform okay and be accessible during the various stages and combinations of degradation, but I want them to look okay as well — at least be clear and usable if not pretty.

Regarding the second part of your comment…

alt=[null] is rather less applicable than you believe.

…please elaborate. I am curious as to what your side of it is, Joe. Surely you’re not suggesting all images get alt text.

@Kerry: I agree that taking care choosing alt text when it is called is rather important.
JackP responds:
Posted: August 31st, 2007 at 8:24 am →

@Stuart: I think you’re missing the point about the standards. The standards insist that you provide a text equivalent - not that it’s done via the image. If the text equivalent is provided in the text anyway, and the image adds no further information, then I would suggest you should feel free to use alt=”".

@Dan: I know you’re right over the nonsemantic-ness of “left” and “right” but I use ‘em too, just because it’s simple, easy and meaningful. You’re probably right not to recommend them where you don’t have that freedom of control over the site. But then again I use XHTML 1.0 as text/html, so I’ll upset people with that, too

@Mike: another nice article, well done mate!

Although I think the best explanation for alts is still the one supplied by Tommy in his 37 Steps to Perfect Markup - scroll down to the “Must I have an alt attribute for every image?” bit, as that not only describes when to use null and non-null alt tags (heh, heh) but also what shows what different sorts of alt text should be used in different circumstances.
Dave responds:
Posted: August 31st, 2007 at 1:00 pm →

When specifying width for the image in the XTHML and then margin and padding in the CSS, are there browser issues? I know browsers seem to differ on whether they include the padding in specified widths, which could potentially cause layout or image size/proportion problems.
Mike Cherim responds:
Posted: August 31st, 2007 at 1:09 pm →

Not that I’ve seen in floated images, Dave. The reason is the text’s width isn’t defined and tends to flow around the image consistently on different browsers. Therefore the padding and margin works as it should in relation to the content. That I’ve seen anyway.
Dan Schulz responds:
Posted: August 31st, 2007 at 9:52 pm →

But then again I use XHTML 1.0 as text/html, so I’ll upset people with that, too

Don’t feel bad. I do it too. I’m sure Tommy Olsson cringes every time he sees me post sample code that serves XHTML “as HTML” rather than as an application of XML on the SitePoint forums, but oh well. Sometimes you just have to bend the rules a bit.
Stevie D responds:
Posted: September 3rd, 2007 at 7:40 am →

Joe Clark:

Also, no, you can’t pick and choose which images get alt texts. alt=[null] is rather less applicable than you believe.

So you would give every image alt text? It may be that a small minority of people browsing without images want to know that there are images there that they are missing out on, but for the vast majority, it is an unwelcome and irritating distraction.

If the content of an image is necessary to understanding or using the page, then yes, it needs alt text. If the image is purely decorative, or simply repeats/reinforces anything that is included in the text, alt="" is the most appropriate.

The whole point about a good author is picking and choosing. Deciding what is important and what is not. How things should be presented in different situations. Insisting that every image has a non-empty alt attribute goes against this principle of giving all surfers the best experience you can.
Dan Schulz responds:
Posted: September 6th, 2007 at 3:55 am →

Stevie wrote:

If the content of an image is necessary to understanding or using the page, then yes, it needs alt text. If the image is purely decorative, or simply repeats/reinforces anything that is included in the text, alt=”" is the most appropriate.

Stevie, if that’s the case, then serving the image as a background via CSS would be more appropriate sinc e it serves no contextual value to the visitor whatsoever.
Mike Cherim responds:
Posted: September 6th, 2007 at 10:05 am →

@Dan: While what you’re saying…

[…] then serving the image as a background via CSS would be more appropriate since it serves no contextual value to the visitor whatsoever.

…isn’t in any way wrong, I can’t think of it as a good hard and fast rule to follow because in my eyes it isn’t practical. I have a decorative image on over half the posts on this blog. To do this with a background, each one would need an element styled (like a div), and an entry would have to be made in the style sheet (and this wouldn’t be available to feed readers, etc). Over time this practice would get of hand and the style sheet would become massive (and would be needlessly loaded onto each and every page). Single uses like this I feel are better served with an embedded image.

To show a couple instances of those hard-fast rules being broken right here: My masthead image contains information that if embedded would certainly require alt text. Yet I use a background image and an image replacement technique (one that works if images are off and styles are on). I think that this is best in this case so I can provide :hover/:focus without using script. On the opposite side, I have embedded decorative images on my site info page. They are decorative because the information they convey is in the headings and in the text already (alt text on those would be redundant). It’s purely supplemental — eye candy for the sighted user (they might focus on the image more than the headings to find stuff).

That’s my thought on it anyway. By the way Dan, nice use of the cite attribute on your blockquote. It is extremely rare that I see that from a commenter. Nice
September’s Most-Popular Links: Narrow neighborhoods, funny classifieds, how spammers work, how images work, how Google works : Joe Think » Online News Blog Archive responds:
Posted: October 8th, 2007 at 10:09 pm →

[…] Adding Embedded Images to a Web Page: A run-down on using the img tag. This is part of my “Online Basics” category on Furl, which has a handful of good articles for the internet noobs in your life / workplace. […]

Sorry. Comments are closed.

Beast-Blog.com Adding Embedded Images to a Web Page