Data URLs for report images

You can use data URLs for report and chart images to reduce the number of round trips between client and server.

Modern web pages with images in them actually consistent of two components:

  • The HTML page, which includes overall page structure
  • Image tags that tells the browser where to put images

The image is not included in the page, so a second round trip is performed to download the image from the server.

Much of the content does not change between page renders, so the browser caches it locally to avoid the round trip. However, dynamically generated content (such as reports and home pages) must be freshly reloaded with every report or home page cell. Each of these reloads represents an extra round trip to the server. These extra round trips slow down the overall page render, especially to computers at the end of a slow network link. Likewise, most browsers will display a "placeholder" image while downloading content so users will end up seeing a potentially unsightly place-holder image during the download process.

The platform uses data URLs to include dynamic images within the HTML file itself, saving multiple round trips and speeding up rendering.

Note: Data URLs are not supported at all on Microsoft Internet Explorer 6 and 7, and are only partially supported on Internet Explorer 8. As such, the platform will not use data URLs for transactions initiated by those browsers. For IE users, reports will load using the old method.
<img src="data:image/png;base64,<some data in base64>" />

When data URLs are enabled, the page size for reports or home pages increases, but overall server traffic is essentially flat, because the same amount of information is exchanged.

Data URLs apply only to dynamic images generates as part of reports or graphs. More traditional content such as icons and navigation images is still downloaded either as a sprite or a traditional URL and then cached.

Most modern browsers fully support data URLs. Microsoft Internet Explorer 6 and 7, however, do not. Internet Explorer 8 provides limited support but imposes a size limit on how large the data block can be. The application server will use data URLs for supported browsers and continue to use traditional URLs for all versions of Internet Explorer.

To disable Data URLs, add the property glide.ui.inline.images and set it to false.

Note that some report images do not display correctly in Internet Explorer. To ensure reports display in Internet Explorer:

  1. In Internet Explorer, navigate to Tools > Internet Options
  2. Select the Security tab
  3. Select Custom Level
  4. Enable Open files based on content, not file extension
  5. Access the instance