I’m on a quest to reduce my very bloated home page application in development. I’ve optimized the CSS and JS requests using a server size combine/stitcher and minimizer.
I’m now at the point where I have an image carousel rotating 15 images as a magazine style layout. In addition there are non-carousel spots with a total of 8 objects. I’d like to group the small images into as few as three large images to reduce the object requests.
Assumptions:
These images are purely decorative with the article.
Although the above is true, they still should have alt text available in the case the images are not available since they do convey an idea (accessibility req).
Each image is about the same size 130Wx80H
Each image is a stock photograph of something
There are two domains available for parallel downloading
There are two more groups of small images with 4 images each.
Goals:
Initially, I thought I would just use background images and have the server-side create and cache a sprite image and CSS generator. However, I’m not sure about accessibility. Then, I considered that by default background images are not printed. That would result in a lot of white.
Question:
Can I group images while still remaining accessible and keeping a proper flow for screen readers. Is my only recourse to use the plain old img tag and try to split the objects’ URIs between the two domains? And yes, the very obvious thing is to redesign and remove the images altogether, but this is an ecommerce/magazine website.
I would suggest looking up how “sprites” work, that is what you are talking about with “groups”. Sprites will work well with all of your decorative images, and decrease load time. It shouldn’t effect accessibility as long as you stick to the rules of normal images & things, like alt tags.
Hope this helps.