Optimization vs Alt Text - Can I have both?

Question

Hi,

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

The "title" attribute will give you a tooltip (you can put it on anything, a div, an anchor tag), but I'm not sure if that will be ranked differently by search engines, or how that would affect screen readers.

Are these images really "pictures" in the semantic sense? Like, are they the main item of focus in a gallery? Or are you using them as web design elements such as buttons, borders etc.

If they are buttons, just put a title on the input or a tag you are using

If these really are pictures, then I'd recommend you don't use CSS sprites here - what if the users right clicks the image and chooses "save as"?

Answer 2

Your referring to CSS sprites. This technique uses background images instead of normal images, background images are for presentation and not for content, thus when used appropriately you should not have to specify the alt attribute.

I wonder if you could employee this same technique but in the style attribute of an img element, that way you could use CSS sprites but also use the alt attribute.

Answer 3

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 4

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

No, you can't. Image SEO is definitely out of the question this way. What you can do is give the surrounding elements (DIVs most likely, I assume) title attributes to show small tooltips. This has more implications than just SEO, though: For browsers with images turned off (for whatever reason, speed or user disability) there is no context any more with which to display alternative content (which is what the alt attribute really is there for.)

I say, wait with this until browsers can handle multipart documents.

Answer 5

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

Answer 6

Are the images more or less static? In that case you should find out why they are being reloaded at all. Don't forget that HTTP gives you control over caching.