Sprite Optimization

[ocon]

I have about 60 photograph thumbnails I'm trying to load into one sprite. Each image is 176px x 100px.

Am I better off in terms of file size and browser rendering optimization making it 10560px x 100px? 176px x 6000px? or something like 1232px x 900px?

I prefer 10560px x 100px but I'm wondering if browsers will have issues working with images so wide.

[robzilla]

They sure might, especially on low-end hardware, but that goes for all dimensions you mention (i.e. any particularly large image). CSS sprites were a good trick for small web graphics like icons, a logo, etc -- they're not often used for thumbnails. Partly because of the large download (JPEG in particular), partly because maintaining a sprite can be a nuisance. Besides, spriting, like sharding, is no longer recommended now that HTTP2 is here. What makes you want to do this? Are you expecting a performance benefit? If so, don't forget that individual thumbnails are more likely to provide early visual feedback to users that images are loading. If you're worried about page load time, see if you can dial down the quality of the images, or reduce the number of images per page/view.

[tangor]

I second the reduction in number of images per view, particularly for thumbnails. Users can be overwhelmed by too many choices all at once.