Image sprite best practices

[SSteven]

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?

Thanks.

[dsonesuk]

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.

[SSteven]

What about Company logos? Is it advisable for image sprites to be used for Company logos?

[dsonesuk]

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 November 16, 2018 by dsonesuk