Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Sprite Optimization

11:16 am on Feb 26, 2016 (gmt 0)

Full Member

10+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
votes: 1

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.
8:38 pm on Feb 26, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
votes: 370

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.
1:25 am on Feb 27, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
votes: 1087

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