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 */ {
  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.

Example of a linked image, but the link goes nowhere

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!

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

  1. 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.

  2. 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.

  3. 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?

  4. 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.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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. ;)

  10. 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.

  11. 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.

  12. 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.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.