I recently found out about using “spritesheets” to reduce the number of image requests a website gets and it seems like it would be pretty useful. Other than the complications that come from having to add a new image to the sheet, are there any accessibility concerns I should be aware of?
Is there an upper limit to how big a spritesheet should be and are there any compatibility concerns?
IMO, it seems more like a hack of css features, since it also locks you out of using percentage based image size and stuff. That being said, since it seems to use only basic css rules, most browsers should support it?
Compared to <img> elements, with spritesheets it is harder (but not impossible) to add accessible alternate text to a graphic. (aria-label is the more widely applicable equivalent to alt.) Using spritesheets could also affect browser behaviour when right-clicking or when copying/pasting the image, but the websites I’ve seen using spritesheets seem to deem this an acceptable side-effect as they do nothing about it.
That’s good to know! I think most of the use cases I would want it for, neither of these would be an issue, but it’ll be good to keep in mind.