发表新帖
发表新帖

Is using the logo tag in sprites good or bad?

后端 未结
关注
14 619
攒了一身酷
攒了一身酷 2021-02-05 05:31

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

相关标签:
14条回答
  • 忘掉有多难
    2021-02-05 05:38

    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 :hover style 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

    <body>
    <div id="head">
        <a id="header-logo" href="http://www.example.com/" title="Example Inc. - Your slogan">
            <img src="/img/assets/header-logo.png" alt="Example Inc. - Your slogan"/>
        </a>
        <h1>Welcome to Example Inc.</h1>
    </div>
</body>

    CSS

    body > #head a#header-logo {
    background-image: url(/img/assets/logo-header-sprite.png);
    background-position: left top;
}
body > #head a#header-logo:hover {
    background-position: left -50%;
}
body > #head a#header-logo img {
    visibility: hidden;
}
    0 讨论(0)
  • 谎友^
    2021-02-05 05:38

    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.

    My main question is if you have 3 or more logos like LOGO in footer, subpage etc. So, what is a better way?

    In that case, yes, add the main logo with an IMG tag and use sprites for the rest.

    0 讨论(0)
  • 野的像风
    2021-02-05 05:39

    A logo is content and should therefore be represented by an <img> element (despite the trend to optimise performance at the cost of semantics).

    0 讨论(0)
  • 北海茫月
    2021-02-05 05:40

    I think you should stick with the <img> tag until Google invents "Background Image Search" -- a service that searches background images, breaks sprites into individual images and intelligently distinguishes between decorative and meaningful images by analyzing CSS.

    Edit: Ask yourself this question: is your logo something you want to emphasize upon; or is it just another decoration. Answer and implement accordingly.

    0 讨论(0)
  • 再見小時候
    2021-02-05 05:40

    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

    0 讨论(0)
  • 感情败类
    2021-02-05 05:42

    you can use a sprite in an img element via the css clip: property. using sprites correctly is always a good thing for optimization. sometimes it's not practical. that is a judgement call you have to make for each different circumstance (site) that you come across.

    0 讨论(0)
 看不清?
提交回复
热议问题