1

I just learned about image replacement, the technique(s), or rather I am just learning since I saw a mixin for it in Bootstrap. I saw it come up a few times recently, so I decided to investigate. I found this article, but I confess I don't understand what all the fuss is about. Why not just put an IMG tag over the text you want to 'replace'?

Moss
  • 3,695
  • 6
  • 40
  • 60
  • One use is to have something for the crawlers and blind to have read to them and something that looks prettier in the designer's eyes – mplungjan Jun 23 '13 at 06:57
  • So what I am asking is why not have the normal heading tag or whatever for crawlers and text readers to read, and have your pretty image on top for regular viewers? – Moss Jun 23 '13 at 07:02
  • They do, and hide the heading – mplungjan Jun 23 '13 at 07:11
  • These techniques are fine to learn for the day you can't use a regular `img` element and its `alt` attribute. Otherwise don't use them and write HTML/CSS the way it was intended to be. You do have users that'll benefit from this code while you're yet to see an SEO effect from this... – FelipeAls Jun 23 '13 at 14:19
  • When would you not be able to use an `img`? Seems like Image Replacement is too popular to only be used in some rare circumstance. – Moss Jun 23 '13 at 16:48
  • @Moss, some designers create pretty images to delineate parts of a page, semantically, they should be headings. So you could use a technique to compemsate – Ryan B Jun 24 '13 at 12:35

1 Answers1

5

As the page the OP links to, Nine Techniques for CSS Image Replacement says, there are several aspects you should take into account when implementing image replacement. Some methods are more straightforward than others, most only really work on graphical browsers, some have more abstract problems, like unnecessary markup.

What you have is a variant of the down-to-earth

<h1 class="technique-ten">
  <img src="graphics/thetitle.png" alt="The Title" />
</h1>

that doesn't need any CSS, it's basic, it works in many situations (screen readers, text-only browsers etc), but it's not ideal for SEO purposes. So you add extra text

<h1 class="technique-ten">
  The Title
  <img src="graphics/thetitle.png" alt="The Title" />
</h1>

with this CSS

.technique-ten {width:350px; height:75px;}
.technique-ten img {display:block; margin-top:-1.2em}

to put the image on top of the text, but then you have extra markup (the text in the h1, and the img that says the same thing), and if images are disabled, you get double text.
And you can't use an image with transparent areas, as this jsfiddle shows. Making the text invisible is not an ideal option, because any method that makes text invisible also influences its SEO.

You can make the alt txt empty.

<h1 class="technique-ten">
  The Title
  <img src="graphics/thetitle.png" alt="" />
</h1>

but that only stops the "double text" problem, not the others. In addition, the img ceases to have any semantic meaning.

In other words, yes, your solutions has merit, but it's not necessarily better than the ones already mentioned on that page, as it has the same kinds of issues.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Well, I could quote from the article you linked to; "One concern over this technique is whether or not it is effective SEO", but from your comment above I see you mean a slight variation of the techniques used there; I'll have to come up with something more elaborate. Stand by. – Mr Lister Jun 23 '13 at 07:46
  • Having both text "The title" and alt attribute value "The title" read out by screen readers is a terrible experience for their users! And googlebot will obviously have a limit to the quantity of keywords you can double without it noticing – FelipeAls Jun 24 '13 at 17:22
  • That's why I suggested emptying out the alt text immediately after that. – Mr Lister Jun 24 '13 at 18:23
  • Thanks for the elaboration. This is probably the best answer I am going to get. Still as you say yourself it has all the same sort of problems as the other image replacement techniques and it isn't really a technique, it is just the straightforward obvious thing to do, so I still don't know why Image Replacement is a thing. You bring up a good point that it won't work well with partially transparent images. The could be a nuisance sometimes I suppose. I don't see any semantic issue doing things the way I'm suggesting. – Moss Jun 25 '13 at 03:37
  • Came late to this but downvote for "Web crawlers don't care much for alt texts in graphics." which is patently false, see Google's own recommendations on this: https://support.google.com/webmasters/answer/35769?hl=en – Mike Hudson Jan 10 '14 at 05:06
  • @MikeHudson Thanks for explaining your downvote. Much obliged! I've edited the remark out of my answer. – Mr Lister Jan 10 '14 at 07:52