As you can see, the new layout still sports image based headings for much of the reoccurring content around the site. I took my usual approach of marking up and styling in that I began with bare XHTML 1.0 Strict and then added the CSS after that was totally complete. As I got to the first image-based heading, I took some time to think about a better image replacement technique.
The Problems with Image Replacement
As you may know, image replacement can be a touchy subject. Your aim should be to develop something that is equally usable by each and every person that finds their way to a site you designed and/or developed. Including extra markup that isn’t semantic didn’t seem like a path I wanted to travel, so many of the “accepted” image replacement techniques were put aside. The remaining choices left little to be desired if your reader happened to be viewing a site with images disabled and CSS enabled.
“Who does that?” you may ask. If I were to take a guess, it could be someone who is fairly Web-savvy and has the ability to use their browser in that particular fashion because they’re at a relatives house and stuck on a choking dial-up connection. That’s just one of the possibilities, and I’m sure if we all put a few minutes into thinking about it, we could think of another situation in which we wanted to simply disable images only and get straight to the content.
An Idea was Born
As I thought about it, I went in a direction that others have gone before, in that the actual text wasn’t removed from display all together, it was merely camouflaged with the background. I stuck with that technique because removing the words from display as step one doesn’t let you get much further with images disabled.
The trouble with camouflaging the text is that most of the time, disabling images simply leaves the ‘invisible’ text on screen. The text proves to be useless to a reader unless they disable CSS as well. There had to be a better way.
And That’s When it Came to Me
It was at that point I began testing with a structured block element by giving a heading a specific height and width. I gave that element a background-color that contrasted with the color in order to make the text visible again. Once that was complete, everything else seemed to fall into place.
Since I had a block element with a height and width, I was able to cut out my desired image for replacement, and simply include it as the headings background-image. A crucial step, however, is to leave yourself enough real estate to work with when cutting out the image. What I mean by that is cutting out an extra couple dozen pixels at the top of the image, because that is where your text will reside. The next step is to give the heading a color that matches the background color of the site (in order for the text to camouflage). The last step is simply shrinking the font-size of the heading so that our content resides in the real estate we set aside.
To provide a visual example, here’s what results:
You can recreate just that on any of the image based headings around the site. If you disable images, the black background appears and the text is now visible, albeit small. Go ahead and bump the font size up a couple notches, the technique survives it for a bit. I don’t think that many readers would feel the need to bump font size three or four levels, do you?
Obvious Limitations to the Technique
As with almost everything, there are certain limitations to using a technique such as this. First and foremost, it won’t really work with anything but a solid color background. Secondly, if a user were to increase their font size a few jumps, your text will begin to overlap the images you created and look like quite a big mess. Lastly, first time (and some repeat) readers will see that stark background color you gave your heading and it may take them by surprise. Once your CSS and images are cached the problem shouldn’t continue, but some people browse with their cache completely disabled. Something like this might prove to be annoying to readers such as those.
Another thing that could be considered a limitation is the extra space you have to leave at the top of every heading. Again, this was something that just fell into place with my design, I wanted the extra margin there as it was. This method of image replacement won’t be the end all for other techniques; it just seemed to fit my goal set quite nicely.
How do you Feel About the Technique?
So far, I’ve had some mixed reactions to the technique. Some people think it’s semantic and innovative while others don’t like the fact that the background color appears. I can definitely see both sides, but I feel the semantic benefit of not including empty <span>s outweighs it in a way.
Find this useful? Digg it.
Comments
Very clever, I must say Jon. I think it definitely has some potential pitfalls but it seems to be a great idea to bring to the table.
@P.J.: You’re sure right about that — the applicable situations are limited, I just wanted to see if it were possible to create something that was both valid and semantic to solve the problem. I didn’t want to resort to empty spans which seems like the technique of choice, it’s valid code, but the lack of semantics gets me.
I like it a lot. I’d used this technique a bit before, but never thought to have the image’s bitmapped background colour override the element’s CSS background colour, solving the CSS on/images off problem. As you say, it’s not the answer to everything, but for the right projects, it will prove very useful. Thanks!
Very creative, I definitely like the idea and will use it in designs that allow for it. (solid background colors, etc).
The best compromise of semantics and accessibility I have come across.
Kudos for thinking up a new technique Jon. While this wouldn’t work for me (as I rarely use a solid background colour for anything), I can see the benefit.
I’m not overly keen on leaving all the extra pixels around the text on the images as I prefer to use CSS to position exactly how I want things. Not that this eliminates that all together, but you would have to take into account the white space (in your example) when you’re adjusting your margins.
@Matt: Yeah the limitation to having to use a solid background is substantial.
I should have taken more care with the example image, it was more of a ‘screenshot’ style image as opposed to the actual image I’m using for the background (mine are closer to what you describe) — I’m going to update that now because I’m sure you aren’t the only person who will see it that way. Thanks for stopping by!
I always use the negative text-indent technique. Never noticed any problems with it at all, does anyone know if there are any?
@Fredrik: A lot of people stick with that very same method — I would have adapted that technique, but nothing is visible should images be disabled and CSS be enabled. The image disappears, but the style is still applied which hides the text.
I may be wrong, but shouldn’t “alt” attribute of image be used instead?
When browser can’t show/handle images it shows alt text instead.
A nice idea you’ve got here, Jon. It’s been a while since someone has come up with a new approach to accessible image replacement with CSS, and it’s nice to know improvements are still possible.
@ahwayakchih: The images aren’t included in the HTML, they’re included using CSS, so an
altattribute wouldn’t be included.@Steve Tucker: Thanks a lot. When I first started thinking over possibilities I wasn’t too convinced I would come up with anything as there have been many others before me who put very intelligent thought into ways around this issue. While this solution isn’t globally applicable, it can work well given the required circumstances.
Coloring the text to the same as the background/-image? I tried this technique a few years ago – and gave it up after resizing the text, thus overlapping the image!
As much as it seems the current fad to cater for the sight-deficient, I too have returned to using negative margins.
On a sideways tangent, Jon, I have built a folio using
div#thumb li { float:left; }.
(See link in signature for result.)
Now I have a slight problem: It works perfectly in Mozilla – but IE7 doesn’t produce the same result. Can you know the coughhackscough I need to make this work? Your help is appreciated in advance.
Sorry, left out the forward slashes on website link. Lets see if this works…
6.00am in the morning – problem fixed. Tested and tried in both IE and MF.
[…] Image replacement is an ongoing discussion amongst many people in both Web design and development. A good way to check up on the way you’re using images is to see what a design looks like without images. From time to time, viewing your markup and style without images will let you know that some serious thought should be put into a new image replacement technique. […]
[…] During the second revision of this website, I had come up with a technique for image replacement that I hadn’t seen anywhere else. The details are included in the write-up, but essentially it was the best way I could find to not bloat the code with extra markup while retaining accessibility as best as possible. Instead of trying to hide any of the content in the first place, I attempted to camouflage it using the color of an image. Please read more about my latest take on image replacement. […]
[…] в една малко по-различна техника, разработена от Джонатан Кристофър (Jonathan Christopher). Неговата идея е съвсем проста – вместо да […]
[…] riprodotto utilizzando una tecnica di image replacement con css semplicissima. Il metodo è quello presentato da Jon Christopher: si tratta di rendere il testo dello stesso colore dello sfondo e impostare la larghezza del titolo […]
[…] prodotti come titolo principale) sono nate delle tecniche CSS come la Cover-up span, BIR o My Latest take che consentono ad esempio di utilizzare il logo del sito non solo graficamente ma anche come […]
[…] My Latest Take on Image Replacement […]