Jump to content

Image sprite best practices

Recommended Posts

The Image sprite examples in the w3schools tutorial were about icons.

1) Is it recommended to use Image sprites for general images (and not just icons)? For example, if a web-site displays an image gallery of scenery-images, should we use a sprite in this situation?

2) For such general images, which are large in dimension, should we first shrink the images, before combining them into a sprite? If so, to what size (width and height) is it advisable to shrink general images?


Share this post

Link to post
Share on other sites

You would never use for large images, it would just be to large, imagine trying to load an sprite image like that on a smaller mobile device, and generally they are used for background images, you would use the img tag in those situations. Remember you would have to set the width and height to accommodate each specific sprite background image to view, whereas using the img tag will give you that automatically.

Share this post

Link to post
Share on other sites

You would only do that if logo was smallish and you have normal state and hover state effect where something like the hue colour changes.

Anyway I think you will find the company logo will be an img tag as it will be used as a brand logo with alt/title text to advertise that for SEO purposes.


Edited by dsonesuk

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now