Using Sprites with Img Tag

Using sprites with IMG tag?

About semantical correctness:

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.

sprite images using img

This is how this can be achieved with CSS transitions:

http://jsfiddle.net/NGWuZ/

markup:

<div class="container">
    <img src="my_image_url">
</div>

css:

.container{
    height: 175px;
    overflow: hidden;
    position: relative;  
}
.container img{
    position: absolute;
    top: 0;
    left: 0;
    transition: top 2s;
    -moz-transition: top 2s; /* Firefox 4 */
    -webkit-transition: top 2s; /* Safari and Chrome */
    -o-transition: top 2s; /* Opera */
}

.container img:hover{
   top: 175px;
}

Is using the logo tag in sprites good or bad?

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.

html img tag does not work with CSS sprite background

You can stretch it out to fill space as needed:

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII="

HTML:

<img align="absmiddle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAA1JREFUeNoBAgD9/wAAAAIAAVMrnDAAAAAASUVORK5CYII=" class="imgicons icons22">

In demo border is none

DEMO

1x1 PNG Pixel generator

CSS image sprites

Following your code and using sample images to illustrate, the following proves you will do only one HTTP request per image, no matter if it's repeated.

Consider the following:

<!DOCTYPE html>
  <html>
  <head>
  <style>
 #home {
width: 46px;
height: 44px;
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) 0 0;//first http request
}

#next {
width: 43px;
height: 44px;
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) -91px 0; //second http request
}
</style>
</head>
<body>

<img id="home" src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG"> 
<img id="next" src="http://www.online-image-editor.com//styles/2014/images/example_image.png">

</body>
</html>

This only returns 3 requests: 1 per image in the body and 1 for the CSS background image, used twice.

Network tab on Chrome

There is however the issue of misuse of markup and CSS in your code.
You should not set an image-background property to an img tag, which is an image by itself.

Choose a method and stick to it: either use images in your body (which will result in multiple images and therefore multiple requests) or use neutral elements like a div with specified background-image properties, using background-position to offset the sprite image.

CSS Sprites - not only for background images?

You can use a standard <img /> tag and put it in a container (like a <div />) with a limited height/width. Then use relative positioning or negative margins to control the position of the image.

html/css - using sprite with img tag - how to remove the outline in Chrome?

If you can absolutely position the image, you can use the sprite directly in the foreground using the CSS clip property.

Using Sprites with Img Tag