What is Image Replacement? Why do I need this?

Image replacement is simply the process of replacing regular text on a web site with a more visually appealing image. It is not possible to achieve certain visual text effects using CSS alone, so images must be used instead.

The most obvious solution is to simply place an <img> tag in the HTML that references the image. With this solution however, the physical text displayed in the image would not be located in the HTML source code, causing a variety of complications, such as:

1. The text inside the image will not contribute to the overall keyword count, potentially harming search rankings.
2. The web browser's find function will not locate the content inside the image.
3. The text will not be read by a screen reader.
4. If the user has images turned off, the user experience is degraded much more than it needs to be, especially in Internet Explorer.
5. Implementing proper CSS roll-overs (adjusting the background position on mouse over) isn't feasible, as these require a background image, instead of an image tag.

There are a number of ways to achieve this, each introducing their own set of new complications. Skybound has devised a method that suffers essentially no adverse side effects. It is built into Stylizer.

How to use Image Replacement in Stylizer

To replace text with an image, simply use Stylizer's +image-replace shortcut property. Upon adding this property to your style sheet, Stylizer will check to see if the proper JavaScript snippet was added to your web site. If not, a dialog will appear that will walk you through the steps of adding the script to your page.

The property accepts one parameter, which is the URL of the image to use as the replacement. Enter the URL of the image to use as the replacement, and Stylizer will handle the rest.

Under the covers, Image Replacement uses a CSS background images. Therefore, regular background-position properties can be used to change the horizontal and vertical offset of the background image. This makes it possible to use CSS roll overs and/or image sprites in conjunction with image replacement.

How Skybound's Image Replacement Works

Skybound's Image Replacement method uses a clever JavaScript technique detects whether images are enabled in the browser. If images are enabled, the class name "images-on" is appended to the document element (the root tag). Then, given the following +image-replace shortcut property:

.logo
{
	+image-replace: url(logo.png);
}

The following CSS is generated in the underlying CSS file.

.logo
{
	/*+image-replace:url(logo.png);*/
	display: block;
}
@media screen
{
	.images-on .logo
	{
		background-image: url(logo.png);
		background-repeat: no-repeat !important;
		text-indent: -1000000px !important;
		overflow: hidden;
	}
}

The CSS above pushes the text of the left edge of the screen and applies the background image. It ensures that this will only happen on the screen, and only if images are enabled. In other instances, the regular text will be displayed. The technique will never cause the user to be presented with a blank space (no text and no image), as is the case with many other image replacement techniques.

Things you should know

• If when your web page is printed, the regular text will be printed instead of the images.
• If the user has JavaScript disabled, the regular text will be visible instead of the images.