Hacker News Reader

Comment by Sephr | Hacker News Reader

> the images on the page change with every request based on the item specifics, therefore combining them into one sprite image is not possible.

It is very possible. Just include the sprite dimensional and positional info in an inline CSS stylesheet on the page and generate a sprite sheet as you would normally. Base64 data: URIs add tons of overhead which will definitely end up being much slower. Not to mention that they're using PNG when they should be using JPEG, which just worsens the issue even more.

View on HN

I think the issue is that the images are different sizes, so putting size/location into CSS would require generating both CSS and a Sprite Sheet for each request.

With Data URIs, they can convert to Base64 ahead of time, and then just concatenate them into a JSON request as needed. This potentially saves them an HTTP request per page load because it means the CSS can be static. The decoding overhead is on the client, which in most cases should offer better user perceived performance than an extra HTTP request for a dynamically generated stylesheet, so it's just a matter of whether it's outweighed by the increase in file size.

When you have a million JPEG images, you would need to generate a sprite on-the-fly every time a random subset of those images is requested. You have to decode the images and encode the sprite each time. That sounds really slow.

Better convert them to Base64 and just concatenate the ASCII strings. Store each Base64 string text file next to the image file.

I agree however that they should use JPEG for their Base64 sprites.

>> Just include the sprite dimensional and positional info in an inline CSS stylesheet on the page and generate a sprite sheet as you would normally.

Which set of images do you generate sprite for? Take ebay search results page , for every search it displays a different set of images.How can we construct a static sprite a ahead of time? However we can generate a dynamic sprite.

I have to agree w/Sephr. No need for javascript and, if copy of image packing info is sent to image packing server at the same time, final image should be ready to serve by the time client requests it.

Reply on news.ycombinator.com