{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 爱情/是我丢掉的垃圾 的问题《Is using the logo tag in sprites good or bad?》','https://www.manongdao.com/q-1318267.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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 <img> tag. The colleague reported it was to reduce the number of HTTP requests. He also showed me an image sprite and said that Google displays its logo with sprite images.
I don't agree with his approach and showed him that the main Google.com page loads their logo in an <img> tag.
Which is a better practice?
EDIT: Facebook also do the same thing on their homepage, loading the logo in an img tag while on their profile pages they display their logo using a CSS sprite.
From this my conclusion was that perhaps you should load your main logo in an img tag while for the other logos such as in a footer or subpage you might want to load them in the background using CSS sprites.
UPDATED: I am routinely loading logos with img tags and also know why we might use sprites. My main question is: if you have three or more logos on a page, what is the better way to load them?
When in rome, do what the romans do.
About logo in IMG tag, official words from Google.. http://www.youtube.com/watch?v=fBLvn_WkDJ4
Reason for keeping in tag: To have good search engine visibility, and when someone google's for ur company name, logo should come up in image results.
Reason for keeping in css-sprites [background image]: Faster load time
Big Brands: All big brands have a media section on their website, also a press section where they keep all their logos in downloadable format.
Sprites allow you to reduce the number of requests. This will only work however if it's all in one stylesheet.
Ex: the first tag that requires the sprite is called as a background image, and then is called again in a different tag in the same stylesheet. If they are in separate stylesheets, they will be requested more than once.
Little article: http://webmasterformat.com/blog/css-sprites
I would recommend using the IMG tag for the logo with an alt text and combining all other images as a spritesheet. I believe using spritesheets is only truly useful when you have more than 3 images. Read Rohan Patil's answer above for why thats the case.
In that case, yes, add the main logo with an IMG tag and use sprites for the rest.
A logo is content - that is correct. And you would probably happy when a search bot grabs it.
But some websites like to apply a
:hoverstyle on their logos. Now, you're trapped.But you can do the following, which is semantically correct. If you want to learn more about that you can read a great article about this issue by Harry Roberts.
HTML
CSS
A logo is content and should therefore be represented by an
<img>element (despite the trend to optimise performance at the cost of semantics).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.