Using a spacer.gif in 2020
A spacer GIF is a small, transparent GIF image that is used in web design and HTML coding. They were used to control the visual layout of HTML elements on a web page, at a time when the HTML standard alone did not allow this. They became mostly obsolete after the browser wars-fueled addition of layout attributes to HTML 2.0 table tags, and were mostly unused by the time Cascading Style Sheets became widely adopted.
Why would one need to use a spacer.gif today, with CSS powers a-plenty?
If one were to need a background image which needed to be exposed as a graphic with alternative text for screen readers. For example…
See the Pen didja know you can give an image a background image? by Scott (@scottohara) on CodePen.
OK, that image didn’t actually need to be exposed. But, it was an example.
What is this example/hack showing?
imgelements can have a transparent 1px by 1px source, but can also display an image via CSS
- Using an
imgelement rather than setting a background image on a
div, or some other containing element, allows for the image itself to be exposed to the accessibility tree by giving it an accessible name via its
- No worries of older browsers discarding the CSS background image in Windows High Contrast Mode. Cause we likely don’t want that.
background-sizework consistently in IE11+. Neat.
- Couldn’t we use
object-fitto do something similar? Yes. But, not if you needed to support IE11 or pre-Chromium Edge. Less neat.
Should you be doing this?
MEH? Situationally at best.
Typically background images really should be relegated to decorative purposes. The only reason I even thought about doing this, today, was because someone was asking if they could add an
aria-label to a
div to provide alternative text for a background image on a website.
And the answer to that question is no.
generic element, such as a
div is prohibited and people need to cut that out.