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 1×1 transparent GIF. I feel so stupid to have overlooked this possibility 😀

Answer 1

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