Is using the logo tag in sprites good or bad?

Question

When building web pages, one of my colleagues displays any logo using the CSS background-image property, rather than embedding the image using an HTML t

Answer 1

When an image has semantical meaning, so it is considered to be content, use an IMG tag, without sprites, and a correctly set up ALT.

When an image is just decoration, like the background of a box, background of a button, background of a menu option, etc., it has no semantical meaning, so you can just use it as a background of a SPAN, DIV, etc. from CSS. You can use sprites in this case.

The reason Image Sprite is a best practice is because of how the HTTP protocol works, and because we want to minimize the time a webpage takes to load (there are many reasons why you should want to make your site load faster, one of them is because Google incorporated a while ago site speed in it’s ranking algorithm) HTTP is a non-connection based protocol, this means that for every request the browser does a new connection has to be done and the route to the server has to be recalculated. So, if every image was in the same file, the browser saves multiple requests.

Every request the browser does is divided in steps: DNS lookup, connecting, sending, waiting, receiving. We can use firebug to see all of the requests done during the loading of a webpage.

I took a WordPress theme and measured the time taken for every image resource at each step (ok, Firebug did that, not me) and calculated that 38.8% of the time corresponds to latency (in this case latency = DNS lookup + connecting + sending), while only 14.4% corresponds to downloading data (the 46.7% remaining corresponds to waiting for the server to respond). Latency time should be minimized, since it’s not time invested in actually downloading the resources the browser needs to show.

Steps DNS lookup, connecting and sending are redundant for every static image request on the same server. So, how can we cut them off? Guess what? Using image sprites! Every image request will be grouped in only one, resulting in only one set of latency time for all the image kilobytes the browser is going to download.

Answer 2

A logo is part of the content of your site, therefore it should be in an img tag, not as a background image. It will help to increase SEO (adding a title and alt attribute will too) and the reason companies like Google, Facebook, et al put their image in a sprite is for load times - not SEO enhancement.

Does your company have the same SE rank as Google or Facebook? No. Until then, keep putting the logo in an img tag where it belongs. When your site is consistently the most viewed site on the internet, then you can start thinking about performance more than SEO.

Also, as an aside, if the logo ever had a tweak (size, color, etc), the sprite would have to be recreated as well as the CSS. If it was just an img tag, this hassle is nonexistent.

Answer 3

I'd hazard a guess, though this is just a guess, that if your site's logo image is contained within a heading element, such as h1, then it seems likely that a semantic relationship would be made between that image and the site's identity. Also, typically, the logo would be considered meaningful content for the purposes of the brand, being the company's, or the brand's, visual identity.

Using a sprite for this purpose would seem to diminish the importance of that branding, since it would, in effect, be no more, or less, important than any other image included in that site (as, effectively all images are the same image).

If bandwidth is so important then I'd suggest putting all other images together into a sprite, but to maintain the independence/identity of the logo.

Answer 4

I generally prefer defining logos in an IMG tag. A simple, practical advantage is that if someone prints your page, the logo will show up, if the logo was set as a background sprite, it would not.

Viewing a site with CSS disabled is helpful when making decisions like this. It gives you a good idea about the lowest common denominator viewing experience of your site. If your site make sense under those circumstances, it's like having your house built on rock.

Answer 5

I want people to be able to download/link my logo. Therefor I will not include it in the sprite map.

Answer 6

Situation: your company decides to update/change logo, but wait your logo in sprite. So you have recreate sprite again. My suggestion, keep logo in img tag.