Image Inlining

Small image files may be automatically inlined into the main HTML document. This reduces the number of HTTP requests, which in turn reduces latency for the client. Inlining works with regular images and for CSS background images.

Image inlining is implemented with data URIs as described in RFC 2397. Most browsers support data URIs.

For images to be included into the HTML content, they must be present in the FIT Server’s local cache and, for the HTTP cache, may not make use of Vary headers. Images that are scaled are available in the cache after they are requested for the first time. Images that are passed withouth modification (default) have to be cached explicitly to allow inlining.

Only small images are inlined. The (scaled) data length must be less than 2kb. FIT automatically inlines up to 50K of images per page. However, images that are inlined due to ai-inline="true" count towards the limit but are inlined even after the limit is exceeded. You may force or prevent inlining on a per element basis using the ai-inline attribute.

Configuration

Enable image inlining by enabling the setting in conf/config.xml:

<config>
  <acceleration>
    <image-inlining [ force-explicit="true" ] />
  </acceleration>
</config>

In your HTML code you can force inlining for images. This overrides the size thresholds and lets you inline bigger images. You may also prevent automatic inlining:

<html>
  <body>
    <img ai-inline="true" src="big-photo.jpg" width="2000" height="2000">
    <img ai-inline="false" src="tiny-icon.png" width="10" height="10">
  </body>
</html>

Considerations

Inlined content cannot be cached separately in the browser. If you have small image files like icons that are used in many or all of your pages, the data has to be loaded again for every page view. You should consider moving these files to a shared, cached, external CSS, to reduce HTTP requests without sacrificing resource sharing.

Even for files larger than 2kb inlining can speed up page load. If your site uses images that do only appear once on one page, you may force inlining for larger files. For example, images in a news article are usually not shared between pages and could be inlined. However, keep in mind that the download of the main HTML content is always in the critical path of the page load because it blocks the document complete events.

Bypassing HTTP 2 optimization

The optimization at this time is mostly an HTTP 1.1 transport optimization. Image inlining will automatically be deactivated when the Delivery Context Property request/http2 is set, because the measures taken can be counterproductive in HTTP 2. To force inlining of resources with ai-inline="true" set even if request/http2 is true, use the force-explicit="true" attribute for the respective inlining option. Please note that this is neither encouraged nor recommended!