ALT text for images in HTML

Question

Hi,

We are working on a website that has tons of images and one of the requirement is to have ALT text for each image (JPG, JPEG, PNG, GIF etc). So whenever the HTML shows and image the ALT text for that image is also written to HTML along with IMG SRC.

After our discussion with developers the solutions that turned up are

1) Create a new table to hold all these image names. Then each time the image is used a db lookup is done and appropriate ALT text is added.

2) Another solution is to write some EXIF info into each file and each time they are used the EXIF info of the file is read and added to HTML as required.

Any suggestions on how to proceed. There are a lot of images so we are looking for the best solution with least load on server and loading time.

Additional info - We run PHP on our server to select images etc.

Thanks

Answer 1

I would recommend storing it in the database because I am sure you have to maintain records of these images, adding another column to a table is little work. Also, if its inside the database you can perform searches on the alt text in case you want to have such a feature.

Answer 2

I'ld rule out EXIF as it does not support PNG and GIF.

The db lookup sounds okay (to me) and would scale okay (as long as you did it cleverly). For example you should try to reduce lookups as much as possible.

You might even already have some of this data, and it would be useful to have data about the images anyways

Answer 3

I would suggest the database option, because the EXIF option will become a problem if somehow an image has to be switched with another image (transferring EXIF data is not trivial), plus parsing a lot of image files on each request would be very resource consuming.

But be it with the database or the EXIF option, I would strongly suggest that you generate a php file acting as a cache, with an associative array of image_name => alt_text, because you don't want 30 sql queries on each page load. The php file would be included as a bootstrap, so every script would have acces to the associative array, via a global variable for example.

And you would have a script that generates this file, so whenever an alt text is changed, you can easily regenerate the cache file containing the associative array.

Answer 4

I would avoid option 2 because if you wanted to update the alt text you would need to write to the image file each time, also, if you wanted to process the images eg. generate thumbnails, the meta-data might be lost.

Option 1 seems the most logical, and if you're querying for filenames from a DB, then just get the alt text at the same time.

Answer 5

Maybe third option:

• store ALT text in filename :)

Answer 6

While both solutions seem fine to me the question about required load is a bit tricky: if you get the images from a database anyway I'd store the alt tag values in the database as well. If the files are served from a directory it depends on if you are using a database at all. If you don't use a database going the EXIF route sounds like a reasonable alternative, but might create more load than using an additional database as you need to open each file to retrieve the EXIF data.

In short, go the database route if you already use a database.

Answer 7

Honest question: do you really even need to create a new table? If you're using a PHP upload mechanism anyway, couldn't you simply add a new field to the database and add the alt text, then link it as a variable as needed? The PHP would be very simple from there. Just a thought!

Answer 8

If you already have a database (which I presume you do), then don't add a whole new table, just add a column to the existing table where your images are. Then you can just get all the information with the same query you populate your page with. I believe this is the best option.

Answer 9

If you wan't to give the images an alt text, it should be something that works correctly if the image is not there.

I shouldn't be "image's alt text", or "image.jpg". Rather it should be something like "Stackoverflow.com has a lot of questions and answers." when showing a SO screenshot. But if your image can't have a meaningful alt text, then just make alt="", and move on, sometimes it's simply better to give no alt text than giving a bad alt text.

Because of this, you should store the alt text for every image that means something, and not put meaningless alt text (ruling out EXIF information).

Answer 10

If you can live with the alt tags matching the name of the file, you can use some javascript to get all the images and add an alt tag based on the name of the file.

Something like this:

    //get all the img tags
    var images = document.getElementsByTagName('img');    
    for (i=0;i<images.length;i++)
    {
      //get the filename from the src
      filename = images[i].src.substring(images[i].src.lastIndexOf('/')+1,images[i].src.lastIndexOf('.'));
      //do any formatting here
      filename = filename.replace('_',' ');
      //set alt/title tags
      images[i].setAttribute('alt', filename);
      images[i].setAttribute('title', filename);
    }

Answer 11

When you say "a lot of images", how many are we talking about? Hundreds, or thousands?

If you're in the hundreds, I would just create a PHP file with an array of the imagePath/altText pair. Then include this PHP file wherever you are referencing the image. To abstract the implementation, have a method in the PHP file to return the altText given the complete image path.

$texthash = array(
  "/some/path/imageName.png" => "some alt text"
, "/some/path/imageName2.png" => "some other alt text"
);

function get_alt_text($imgpath) {
  return $texthash($imgpath);
}

This strategy is fast and will not slow down your pages as long as the number of images is still relatively small. The only tricky part is making sure you keep the array sorted by image path as new images are added.

Once the number of images gets large enough that this method is slowing down performance, move the information to the database, and change the method in the PHP file to query the database. Since you've abstracted the implementation, you won't need to change any of the referencing PHP files.

Also make sure you are HTML-escaping the alt text before using it in the HTML.