Image replacement

HTML & CSS
1

I’m looking for an image replacement technique. There is a list of 9 on CSS Tricks, but the article was written in 2012, and a lot has changed since then.

I just want to replace one word in a header.

<h2>Welcome to my <span>Company</span></h2>
2

Hi there Gandalf,

you start with “Image replacement”
but end with “word replacement”. :eek:

Can your provide precise requirements? :rofl:

coothead

3

Granted it sounds a*** about face, but according to CSS Tricks

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image .

:tongue:

1 Like
4

Hi there Gandalf,

sorry for not getting back to you sooner, but I got
embroiled in your [GAME] Song titles A-Z. :rolleyes:

So what word do wish to replace and can we see
the image with which you want to replace it? :winky:

coothead

5

What are the conditions the replacement must meet?

Do you really want us to invent one more method? :crazy_face:

1 Like
6

What I’m looking for is to replace the word inside the <span> which seems to be different from the examples I’ve found which replace the entire H tag. I don’t have an image right now - it will be slightly bigger than the text it replaces, but not by too much.

7

Hi there Gandalf,

here is a basic example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em  sans-serif;
 }
h1 {
 	line-height: 1.5em;
 	text-align: center;
 }
h1 span {
	display: inline-block;
	position: relative;
 }
h1 span::before {
	content: '';
	position: absolute;
	top: 0;
    height: 100%;
    width: 100%;
	background-image:url( https://www.coothead.co.uk/images/bgd-img.jpg );
	background-position: center;
	background-size: 100% auto;
	background-repeat: no-repeat;
 }    
</style>

</head>
<body>

 <h1>Welcome to my <span>Company</span></h1>

</body>
</html>

coothead

3 Likes
8

If the image is content then it should be in the html.

<h2>Welcome to my <img src="company.jpg" alt="company"></h2>

Any other method could see you penalised from google.

2 Likes
9

I guess that makes image replacement pretty much redundant then.

1 Like
10

I’ve read through ‘hidden text guideline’ and I’m not convinced that it is aimed at penalizing image replacement techniques. It seems to be more of a warning against hiding text (excessive keywords) to manipulate Google’s search rankings. Shady SEO practices is what I see it aimed at.

All of the good image replacement methods passed the test with CSS and Images turned off. One or the other turned off, or both turned off together. There was nothing shady about the old image replacement methods, in fact they made sure everything was intact for all users and search engines. The text was left intact under the image for screen readers and search engines. The image was purely for decoration without any ill intentions.

Reading further and closely at the guideline you will see that they understand that not all hidden text is bad.

However, not all hidden text is considered deceptive. For example, if your site includes technologies that search engines have difficulty accessing, like JavaScript, images, or Flash files, using descriptive text for these items can improve the accessibility of your site. Remember that many human visitors using screen readers, mobile browsers, browsers without plug-ins, and slow connections will not be able to view that content either and will benefit from the descriptive text as well.

We used to be pretty well convinced that the <img> tag was reserved for images in the pages actual content. Whereas background images are used for decoration, as with the image replacement methods.

The good methods did not position the text off screen or use font-size:0
That would not pass the Images/Off test.

You can test your site’s accessibility by turning off JavaScript, Flash, and images in your browser, or by using a text-only browser such as Lynx.

Lower down in the page you will find the Irrelevant keywords link. I think it goes hand in hand with the hidden text guide.

5 Likes
11

… and that’s the problem :).

No one is sure if the technique will be penalised or not - even google. There is no way to say I’m not keyword stuffing and this is for accessibility. :slight_smile:

Very few image replacements pass the acid test anyway apart from hiding text under an image which doesn’t work for transparent images and is on the list that google tests for anyway.

Do you rely on the fact that google can guess this is a good edge case or a bad one? How will it know?

There’s a good article below but is a few years old.

https://laptrinhx.com/it-s-time-to-be-honest-about-image-replacement-techniques-559217232/

To me the easiest solution unless you wanted sprites is simply to use an image in the html. :slight_smile:

3 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.