A client recently asked whether adding an accessibility overlay to their site would slow its loading time. I had previously written an article about the use of overlays in general, so I offered to write a follow-up about this specific issue.
An overlay is a semi-transparent .png file that is layered over another image and acts as a mask. In the case of overlay graphics, it is normally used to show alternate text when an image cannot be loaded because the site’s design uses JavaScript or CSS tricks to load images in a non-traditional manner (for example: placing an invisible <img> in the page that has its src set to “0”). If this is the case, then you will have to be much more careful about how you approach this. Google uses a similar technique for its maps platform, which does not allow for any custom image uploads.
An overlay graphic is generally used as a mask over another image.
If your site loads images in a traditional way (meaning no hidden elements), overlays are much easier to implement. When an image is obscured by an overlay, you can make it reappear by simply changing the opacity value of the layer back to 100%. The resizing of any graphic in this situation is done automatically by setting a percentage width or height for the element in question.
What happens if I override the default styles?
If you override the default styles of your elements, it will throw off the positioning of any overlays that you set up. A good example of this is if you set the position property to “absolute” or “fixed.” You can still use an overlay on top of absolute/fixed elements, but you will need to specify all of its placement properties (left, right, top, bottom) in order to make it work.
What happens if I resize the element?
When you rescale an element, it will cover up your overlay graphic and render any custom styling that you may have used uselessly. A good rule of thumb is to use CSS3 (or a gradient) in order to get a “glass pane” effect with the overlay so that the graphic itself does not get cut off if you resize your elements.
What happens if I add other elements on top of the element?
Every time that you add an element to an HTML page, it adds to its rendering time (even if that element is invisible). If you find that your overlay graphic does not work correctly and you have added a bunch of other elements on top of it, it is a good idea to try and simplify the HTML that you are using. Try removing unnecessary empty divs or any other elements that you have added into your markup, perhaps for pure CSS styling purposes only.
Our final verdict: In most cases, adding overlays to your website will not slow down its loading time because most sites do not use a JavaScript/CSS trick to load images and, as such, the browser does not need to create any hidden elements. It is also possible that you can use CSS3 to get a “glass pane” effect with your overlay graphic in order to cut down on rendering time.
