Search code examples
javaperformancegwtbase64clientbundle

Benefits of GWT ImageResource preventInlining


I recognized that in GWT, an ImageResource can be annotated with

@ImageResource.ImageOptions(preventInlining = true)

to prevent it from being added as url('data:image/gif;base64...'). Are there any downsides of inlining images that way? May it be a problem that the DOM get's bloated with a lot of Base64 code? Or asked differently: Why would someone use preventInlining = true?


Solution

  • To summarize the items of this answer:

    • Using inlining saves requests, but bloats the HTML and doesn't allow the browser to cache images, i.e. they (the encoded image) get loaded every time the page is loaded.
    • Base64 encoding bloats image size by 33%.
    • Doesn't work in IE6 and 7 and only works up to 32k (after encoding) in IE8.

    In the case of GWT, some of these items may be rendered moot as the later versions of GWT don't support IE 6 and 7 anyway. Not sure how GWT affects the first item, as everything (except for code-splitted code) is loaded on the initial page load anyway and after that (usually) no new page load occurs.