GWT create Image using ImageResource

Question

My question is really simple and shot. but hope I can have a clear answer. We can create GWT Image in many ways.

Image image = new Image ( (ImageResource)imageRes);

Image image = new Image ( (ImageResource)imageRes.getSafeUri() );

Image image = new Image ();
image.setUrl((ImageResource)imageRes.getSafeUri().asString() );

My question is: what are the difference among these 3 ways to create a new image using ImageResouce. Which one is best or faster for first-time loading?

Thanks

Answer 1

First, you should not use the last two.

An ImageResource technically represents a region within a "sprited" image: it has a URL to the sprite and the coordinates of the region on that image. In many browsers, and for most images, the URL will actually be a data: URL and the region will represent the whole image. This can be controlled on a per-image basis using @ImageOptions(preventInlining=true) or globally with a set-property on your gwt.xml. In other words, your code shouldn't rely on it, and should always treat an ImageResource as a region within a sprited image.
FYI, the cases where a sprited image is actually used by default are for IE6/7 which does not support data: URLs, and for images that are too large to fit within a data: URL (all browsers).

This is however exactly what you're doing in the last two cases: use only the URL of the ImageResource, as if it weren't (potentially) a sprited image.