Image Replacement Techniques in the Modern Age

If you are not familiar with the concept of image replacement in CSS, consider the following scenario. Let's say you want to display a fancy logo in your website header. Now, you might be tempted to use the typical <img> tag. That would work — however using images in such a manner will deprive your website of SEO benefits and will also compromise the accessibility of the website.

[caption id="attachment_133603" align="aligncenter" width="1024"] Artwork by SitePoint/Natalia Balska[/caption]

Image replacement techniques allow you to replace a text element with an image while avoiding some of the above downsides. There are multiple ways to replace text with images, we will cover a range of these in this article.

Using Negative Text-indent — The Phark Method

This is the most common technique that most web developers have used at one point or another. The idea here is to move the text far outside the browser window by setting a large negative text-indent:

.replace-indent {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: -9999px;
}

Here is a CodePen demo showing how two headings look with and without text-indent. The first contains text which is not hidden and the second has the text hidden using text-indent:

See the Pen Image replacement indenting by SitePoint (@SitePoint) on CodePen.

The text is still accessible by screen readers using this method and there is no SEO penalty. However, this solution won't work when the text is right aligned. Also, the browser needs to render a very large box for our header due to the text-indent value which can be problematic on very old devices.

The Scott Kellum Method

Instead of setting a large negative text-indent, you can set it to 100%. This way the browser won't need to create a large box and the performance will improve. You don't need any extra markup to use this method. Here is the CSS that you need:

.replace-scott {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Setting overflow to hidden hides the text and whitespace: nowrap keeps it from moving onto the next line. The text will still be read by screen readers in this method. Here is a demo of this technique:

See the Pen Image Replacement - Scott Kellum Technique by SitePoint (@SitePoint) on CodePen.

Using Margin — Radu Darvas Technique

This technique also forces the text outside of the browser window but uses margins to do so. The idea here is to apply very large negative left margin and give your header a correspondingly large width.

.replace-margin {
  width: 2264px;
  height: 106px;
  background: url("assets/logo.png") top right no-repeat;
  margin: 0 0 0 -2000px;
}

Just like the previous case, our logo is used as a background image for the heading. Here is a demo to show how this technique works, first without the margin and then with the margin applied:

See the Pen Image Replacement - Margin Technique by SitePoint (@SitePoint) on CodePen.

If you keep scrolling to the right you will eventually see the background for first heading. In reality, you won't have to worry about the scrollbar because the large negative margin compensates for the width (as you can see with the second heading). Keep in mind that this method is not as efficient for the browser to perform because the browser has to draw a really large box.

Using Padding — The Langridge Method

This time we push the text outside of our header using the padding-top property. The property is to be set to a value that is equal to the height of our logo. However, this alone is not enough and we also have to use overflow: hidden to hide the text.

.replace-padding {
  width: 264px;
  height: 0;
  background: url("assets/logo.png");
  padding: 106px 0 0 0;
  overflow: hidden;
} 

Compared to the previous two methods, this property does a much better job performance wise. It also offers the same level of accessibility as the previous two methods. Below is a demo of this technique, the first heading does not have the padding background, while the second one does:

See the Pen Image Replacement - Padding Technique by SitePoint (@SitePoint) on CodePen.

Using Small font-size — The Lindsay Method

Another way to hide text is make it very small and set its color to the background of your logo. This works without affecting accessibility but you might face SEO penalties because of the tiny font size and camouflaged color.

.replace-font {
  width: 264px;
  height: 106px;
  background: url("assets/logo.png");
  font-size: 1px;
  color: white;
}

Here is a demo for this method, the first image without the font-size fix and the second one with it in action:

See the Pen Image Replacement - font-size Technique by SitePoint (@SitePoint) on CodePen.

You will still face problems if your logo does not have a flat background color to allow perfect blending. In that case, you can set the color to transparent.

Continue reading %Image Replacement Techniques in the Modern Age%

by Baljeet Rathi via SitePoint