Optimization vs Alt Text - Can I have both?

Question

I have a small problem developing/optimizing a web page.

I know it is good to have an ALT text for images. I had a set of 10 small images and alt-text for each. Note that there is a pressing need to make sure the first time visitor saw the website as quickly as possible.

But I thought, 10 HTTP requests? So, what I did was, combine all images into a single image and have 10 divs and set the background image and the background position so that it appeared the same to the user when in fact only 1 HTTP request is made. I think I am right in saying, 10 (unnecessary) HTTP requests is costly.

But I can't give ALT text anymore! Because it is not an image.

Can I have the best of both worlds?

Have one optimized image so only 1 request, BUT put some kind of text along with that image (for SEO and screen reader reasons) ?

P.S. The design of the page is so stupid, there is no actual text. I am just trying introduce text so that search engines will read something relevent. I was given the job of doing SEO. So I am just trying to follow some basic guidelines. Too bad they won't let me touch the design itself.

Edit

I set the background of the <img> tag itself instead of the <div>. Now that this is an image element, I set the ALT text. Then I set the src attribute to a 1x1 transparent GIF. I feel so stupid to have overlooked this possibility :D

Answer 1

If those images are your content, you should not combine them like this : yes, having 10 separate images can take some time to load, but, if that's your content :

• those images will most likely be big anyway
• your users will want the possiblity to right click on them, and select "save as", and things like that.
• those images are important ; which means they must have an alt text
• those images should not be set as background, and should use an img tag
• depending on how your website is organized, maybe you could put some kind of pre-fetching solution in place ?
  • For instance, if you are displaying a galery of photos (With "previous" and "next" buttons), when a user is watching image 2, there are high chances he'll then click on "next" to see image 3 -- which means you could pre-fetch that one while he's watching image 2, so image 3 seems to be displayed faster when he clicks "next"

If those images are not your content, and are just buttons icons and stuff like that :

• you don't have to care much about the alt text, I would say
• they are probably used as background for a link or such ? If so, the "right" solution, I suppose, would be to put your "alt" text as text for the links.

As a sidenote, you might gain a few bytes (depending on your images) with ideas such as :

• encoding them as 8 bits PNG instead of 24 bits PNG
  • that's often enough for screenshots, for instance, depending on the colors you are using in your images
  • it can divide the image size by more than 2 !
  • But if your original image has rich colors, it will break it ; which means you have to decide on a per-image basis
• There are tools that can re-encode PNG and/or strip not-useful data (see pngcrush or optipng, for instance)
  • You can probably find equivalents for jpg and/or gif, I suppose

Answer 2

You can still attach a title attribute to a DIV or other element. For an IMG you could set the source of the image to be a blank PNG or GIF, style it with a CSS sprite background image, then set the IMG's alt and title tags to whatever they need to be.

Here's the classic article on CSS sprites:

http://www.alistapart.com/articles/sprites