convert static images to sprites #198

Closed
joshuaselsky opened this Issue Feb 9, 2012 · 8 comments

Projects

None yet

2 participants

@joshuaselsky

From a performance point of view, this will result in less HTTP traffic.

@shlurbee

Note: GWT has a special way of doing this. See "ImageBundle"

@shlurbee shlurbee was assigned Feb 13, 2012
@ghost
ghost commented Feb 23, 2012

Do you guys know if this will actually yield significant performance improvements?

We already have so few images on the site (most which average around 1 - 2kb each) that the performance will pale in comparison to the server query times. Moreover, the browser should be caching all the tiny images/icons used, assuming we disable any no-cache policies in GWT.

@joshuaselsky

In general, the fewer HTTP requests, the better ...

@ghost
ghost commented Feb 23, 2012

Two observations:

  1. The browser already has a smart caching strategy to reduce the amount of repeat image requests from the server.
  2. The way images are loaded throughout the frontend vary, so . Sometimes images are loaded via CSS (3rd party or UiBinder), hardcoded in HTML image tags in the UiBinder, or initialized through GWT's Image class.

Given these two facts, I think the performance gain via sprites is negligible and won't be worth the trouble modifying every single image when there aren't that many in the first place.

@shlurbee

I spent the last couple of days working on this in a local branch but am not averse to abandoning it if you guys want. It's been a little bit of a pain which makes me wonder if it would be a pain to maintain.

The images are small, but the number of requests matters. I think some browsers limit the number of concurrent connections to a server, so while each little image is being loaded other things are being blocked. Sprites also give a smoother experience since all images on the page appear simultaneously instead of one at a time (which can make the page jump.) Should be cached after the first load, though, and then not matter.

ClientBundle/ImageBundle wasn't a great solution, btw, because there's no option to make a vertically stacked sprite with a single column. In order to show just one image from the sprite you need to display it in its own dom element set to the exact size of the image, which mixes markup with style and seems daft for things like bullets in bulleted lists. Instead, I used an online tool to generate vertically stacked sprites and saved the offsets of particular icons as gwt css constants. They're a bit more work to use that way than just using the image directly, though, so up to you guys if you think it's worth it.

@shlurbee

If there's going to be a lot of change in the look and feel of the app I would say definitely wait on the sprites since they slow development down...

@joshuaselsky

@shlurbee can you commit your work to a separate branch just so we don't lose track of it?

If we end up with a very image-heavy app in the future, we can revisit this.

@shlurbee

Sure, no problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment