Logo: should I use <img src=""> or should I declare the image in the stylesheet?

Hello,

I’ve got a logo (a .png file with the name of my website) that I want to display.

What’s the best approach to do so? <img> tag? Image replacement? If I should take the image replacement path, what’s the state of the art approach to do so?

Regards.

-jj. :slight_smile:

Generally an image should be in the html if it is content but in the background if it is decoration.

However for logos with taglines opinions differ greatly and I think that done properly either are acceptable. If using an image then make sure you have the alt attributes in the image tag then seo should still benefit.

The benefit of using a background image (with the above method) is that you can style the hidden text content nicely so that those with images turned off don’t see a missing image icon and un-styled alt text).

Generally I use an image replacement for logos for ease of use (called gilder/levin but I (and others) were doing it long before they put a name to it).

There is a relatively new method come to the fore using clip for hiding content and there’s a good article here by Thierry. (More info [URL=“http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content”]here and [URL=“http://designfestival.com/when-and-how-to-visually-hide-content/”]here.) However it doesn’t really cater for images so the gilder/levin is still the best to use.

As an aside if the logo has transparent parts that show the background underneath then you are probably better off just using an image in the html.

2 of 3 links there are busted. That said, WOW, what a broken technique since it gets rid of the text altogether – this is an improvement from text-indent:-999em how exactly? Looks like it’s the same thing – zero improvement.

Ditto Ditto.

You can get around that by using two sandbags, one with the original background on it.

Though really, I don’t advocate the use of transparencies (certainly not alpha transparency) in the first place – the files are too bloated, compatibility relies of fat scripting, all for garbage I’ve rarely considered necessary for delivering content.

There’s a reason 99% of my sites use this as the markup for the topmost page heading.


<h1>
  Site Title<br />
  <small>Tagline</small>
  <span><!-- image replacement --></span>
</h1>

Thanks links fixed now.

That said, WOW, what a broken technique since it gets rid of the text altogether – this is an improvement from text-indent:-999em how exactly? Looks like it’s the same thing – zero improvement.

The technique wasn’t really related to the OPs question really and I only mentioned it out of interest and perhaps I shouldn’t have mentioned it here as it’s not really relevant. It’s not an image replacement technique as such but a means of hiding content that is only in place for screen readers etc.

It’s about removing content from the document but allowing it to be accessible to screen readers without all the problems associated with other methods that fail in one way and another as mentioned in the article.

You can get around that by using two sandbags, one with the original background on it.

Yes, I have used that method and it’s fine for some cases but if say the background is on the body and the image is on a centred container and moves across it then it’s no use. I did have a very old fix for that but it’s more of a trick with limited use.