Image Replacement is used throughout the world nowadays. This is implemented anytime when designers wish to fit the images where the text is normally present. Henceforth, the name is Image Replacement. The most common uses are logos as well as buttons. Moreover, this is a common tradition among developers that has transformed periodically for the purpose of enhancing the web and how we write the code. Henceforth, there are several options available to do image replacement. Patiently, go through this article to get a better understanding of Image Replacement Techniques which you can easily implement in the near future.
Several Techniques that you Must Adopt
As a beginner, it is not possible for you to know all the image replacement technique. This is why we have mentioned a few effective techniques of image replacement. Let’s have a look at several techniques that you must adhere to:
Use of Negative Text indent-Phark Method
This is the most frequently used technique that the majority of the web developers use at one point. The main intent is to the text outside the browser window by accommodating a large text-indent with zero precision. You can easily access the text using the screen readers by implementing this method. The browser requires a very large box because of text-indent value which earlier creates problems for the older device.
Scott Kellum Method
Instead of setting a large text-indent, you can make it cent percent. Through the use of Image Replacement Technique, you don’t have the provision to create a large box and in turn, the performance will enhance. You won’t require any surplus markup to implement this process. Rather, you need to set the overflow to hidden which helps in hiding the text. With the use of whitespace: nowrap you can move up to the next line. The text will be visible by the screen readers if you are using this Image Replacement Technique.
Margin-Radu Darvas Technique
This text also forces the text present outside the browser window but implements margins. The main motive is to implement very large negative left margin as well as providing the reader with a large bandwidth.
.replace-margin {
 width: 2264px;
 height: 106px;
 background: url(“assets/logo.png”) top right no-repeat;
 margin: 0 0 0 -2000px;
}
Similar to the previous case, our logo is portrayed as a background image for the heading. However, if you move to the right you will get the background for the first heading. However, you don’t have to think about the scrollbar. This is owing to the fact that large negative margin indemnifies for the width. You should also take into consideration that this process is not as effective for the browser since the browser has to draw a huge box.
Padding-The Langridge Method
This time we provide the text outside the header by providing padding-top property. Using this property, you can set a value equivalent to the height of the logo. However, using this alone will not suffice. Therefore, we also need to use overflow: hidden in order to hide the text.
.replace-padding {
 width: 264px;
 height: 0;
 background: url(“assets/logo.png”);
 padding: 106px 0 0 0;
 overflow: hidden;
}
When you compare with earlier methods, this property helps in doing better job performance wise. Moreover, it provides the same accessibility level just like the previous methods.
Using Small Font Size- Lindsay Method
Another effective way to hide text is to make it small. Then you need to establish color in the background of your logo. Although, it doesn’t hamper the accessibility. But you may feel the wrath of the SEO penalties because of concise font size as well as the concealed color.
replace-font {
 width: 264px;
 height: 106px;
 background: url(“assets/logo.png”);
 font-size: 1px;
 color: white;
}
You might face several issues if your logo is not equipped with a flat background color. This will bring perfect amalgamation. In this scenario, you have to set the color as transparent.
Using Display-Fahrner Image Replacement
This image replacement technique is not similar to the previous method. It helps you to incorporate some surplus markups. The main idea is to wrap your text in a span element and establish the display property to none. The markup should be
<h1 class=”replace-display”>
 <span>SitePoint</span>
</h1>
CSS will be
.replace-display {
 width: 264px;
 height: 106px;
 background: url(“assets/logo.png”);
}
.replace-display span{
 display: none;
}
This method can be implemented easily in which results are in poor accessibility. This is owing to the fact elements will exhibit set to none option which is ignored by screen readers many times. The same problem occurs with visibility when set to hidden. Therefore, you won’t be able to use that one either. This will basically restrict the element while keeping it accessible to other screen readers.
Overflow-The Leon Dwyer Method
Already we have implemented overflow property for th purpose of hiding text after incorporating some padding. You just only need to implement the overflow property to conceal the element properly. This technique helps you to cover your text in the <span> element similar to the earlier one. CSS code generally resembles the below structure
.replace-overflow {
 width: 264px;
 height: 106px;
 background: url(“assets/logo.png”);
}
.replace-overflow span {
 display: block;
 width: 0;
 height: 0;
 overflow: hidden;
}
We generally adjust the width as well as the height of the span and make it to zero. This compels the text present inside the element to go out of the box. The text is generally concealed using the overflow: hidden property. The most important thing is that you will not get any accessibility issues.
Using Absolute Positioning-Levin Technique
This Image Replacement Technique also needs extra space to work. However, the span element is not included around the text which is used for fitting the image. Let’s have a look at the markup for this method
<h1 class=”replace-position”>
 <span></span>SitePoint
</h1>
Here is the CSS
.replace-position {
 width: 264px;
 height: 106px;
 position: relative;
}
.replace-position span {
 background: url(“assets/logo.png”);
 width: 100%;
 height: 100%;
 position: absolute;
}
You need to consider the width as well as the height which are set to 100% in order to wrap the header element. The only issue with this technique is that the images you implement should be entirely opaque. If it is not so, users have the provision to view the text through the image.
Using a Bogus Image-Radu Darvas Shim
It mainly contains a bogus image along with usual span element to work accordingly. This image is basically 1*1 pixel transparent GIF. The main intent is to display users the alt text if the images are switched off. Let’s have a look at the markup.
<h1 class=”replace-image-span”>
 <img src=”assets/transparent.gif” alt=”SitePoint” />
 <span>SitePoint</span>
</h1>
CSS should be applied
.replace-image-span {
 width: 264px;
 height: 106px;
 background: url(“assets/logo.png”);
}
.replace-image-span span{
 display: none;
}
Although the main text is hidden, the screen readers can see the alt tag. Therefore, this process does not incur any accessibility issues. The main problem is that <img> tag is non-semantic as well as bogus. Also, you have the provision to see the text two times when CSS, as well as images, are turned off.
Actual Image-Phark Method with Inline Image
In this section, we will discuss the use of an actual image pertaining to image replacement. The image contains alt text which will be displayed if you turn off the images. Have a closer look at the markup and coding structure
<h1 class=”replace-image-link”>
 <img src=”assets/logo.png” alt=”SitePoint” />
</h1
The under-mentioned CSS can make the actual replacement
.replace-image-link {
 width: 264px;
 height: 106px;
 background: url(“assets/logo.png”);
 text-indent: -9999px;
}
The source of the image is not from the <img> tag but from the background property. Apart from the issue with the large negative text-indent that we have stated earlier, this technique is not fruitful from the SEO point of view. One of the major advantages is that using this technique you can able to view the image if the CSS is turned off.
Use of Clip-path
The clip-pith conceals property that lies outside the path suggested by you. We can implement clip our text and then conceal it. However, text can easily be accessed by the screen readers but will be hidden visually. Let’s walk you through with the markup
<h1 class=”replace-clip-path”>
 <span>SitePoint</span>
</h1>
You have to apply CSS
.replace-clip-path {
 width: 264px;
 height: 106px;
 background: url(“assets/logo.png”);
}
.replace-clip-path span{
 clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}
You have the provision to alter the values of clip-path to determine how the text is clipped. The underlying problem is that browser support is not sufficient. When the browser support gets ready, it will not be of much use since the image replacement technique becomes redundant.
Pseudo Element-Nash Image Replacement
This Image Replacement Technique basically implements a pseudo element to insert the text aside. Let’s have a look at the markup
<h1 class=”replace-pseudo”>
 SitePoint
</h1>
Following CSS requires the following technical work
.replace-pseudo {
 width: 264px;
 height: 106px;
 overflow: hidden;
}
.replace-pseudo:before{
 content: url(“assets/logo.png”);
The pseudo element inserts the text aside. The text will get overflowed and is concealed with the help of overflow: hidden property. The main problem with this technique is that it is compatible with Internet Explorer 8 and its higher versions.
Final Review
Finally, we must say the methods mentioned above has its own pros as well as cons. Generally, these are not beneficial for SEO in the near future and if you wish to shift the gear entirely- this is a perfect time. However, if you are willing to use optimum Image Replacement Technique, this post will serve you the best. You will get a plethora of techniques on how to do image replacement in no time. Moreover, take your time out to go through the user manual for any instant help.
