FSI Server and FSI Viewer offers the easiest way to integrate any number of formats from one image source into applications or websites in real-time. Lengthy and error-prone batch processes are no longer necessary.

Working with FSI Server does not require any separate integration with your application server. Integration into client applications or websites is done using HTML tags or by directly loading the target images.

How FSI works​

The JavaScript based viewers FSI Viewer, FSI TouchZoom, FSI QuickZoom, FSI Showcase, FSI Pages, FSI ThumbBar, FSI ImageGrid and FSI Layers bring outstanding zoom and spin images, responsive touch image zoom, flyout zoom, interactive galleries, image grids or e-catalogs to every device. All viewers are highly customizable and easily included by using a custom viewer tag.

FSI Server acts as the basis of all viewers as the image data is requested from it. By using FSI Server, only one high resolution source image is required for each image to be displayed.

In an application or on a website, you only need the reference to an image in order to use the viewer. Typically, a single image is addressed via a path, e.g. assets/shoes/prd-381272.tif

If you need to display the image in a certain size, this can be specified by a dimension parameter in the URL:
https://images.my-company.com/fsi/server?source=assets/shoes/prd-381272.tif&width=250

Since the source image is a TIFF format, which is not a typical web browser format, the FSI Server always delivers the most suitable format for the requesting browser, e.g. WEBP or JPEG.

The display of the image can be influenced via dynamic parameters in the URL or as default settings in the server settings.

What you'll need​

To run FSI Server on your own hardware, Linux is required as the base operating system.

The hardware recommendations are as follows:

Testing, Development and Staging:

• 4 Threads
• 8 GB RAM
• Doubled filesystem capacity of the source assets

Production:

• 16+ Threads
• 32 GB RAM
• SSD based storage - Doubled capacity of the source assets

The FSI Viewers themselves are JavaScript-based and work in all current browsers and also in many outdated ones. We place great emphasis on maximum compatibility.

Glossary​

• FSI Server - A Java-based application that runs as a container.
• FSI Viewer - A collection of JavaScript based applications that are transported to the web client and executed.
• Auto-generated responsive images - A new image derivative based on a source image which is not saved but discarded.
• Cache - To relieve and speed up recurring requests. In the area of SaaS, we speak of the term TrafficServer.
• Storage - An internal scaling cache in the FSI Server.
• Web-interface - A web interface for managing the images provided by the FSI Server.

Quickstart​

FSI Server​

We provide a repository containing a FSI Server Container setup.

The repository contains a docker-compose file for Docker or Podman. This makes it easier to start, adjust and renew the FSI server.

The setup also contains a benchmark, the configuration for the synchronisation to mirror servers with lsyncd and a Nginx configuration which is prepared for LetsEncrypt certificates.

Auto-generated Responsive Images​

When the server has been started as described above, a few sample pictures are available. In order to be able to use them on a website the path to the corresponding images must be addressed. This can be easily determined via the web interface.

Example:

Assuming you now want to insert the shoe in the path sample-images/Shoe/Spin050.jpg in a size of 480 pixels width on your website, it would look like this:

<img
  src="http://localhost/fsi/server?type=image&source=sample-images/Shoe/Spin050.jpg&width=480"
  width="480" />

If you also want to make the output format mandatory to JPEG and reduce the quality to 40%, this is entered via additional parameters:

<img
  src="http://localhost/fsi/server?type=image&source=sample-images/Shoe/Spin050.jpg&width=480&format=jpeg&quality=40" />

It is important to know that in this example that the output format JPEG has nothing to do with the source. The image itself is also available as a JPEG, but it could also be a TIFF or PNG. You can and should have the best possible quality of your images on the server, since a reduction in size and quality can be done by FSI Server easily.

FSI Viewer - QuickZoom​

In addition to the example above, we now add a viewer, in this case FSI QuickZoom.

<fsi-quickzoom
  style="display:none"
  inPlaceZoom="true"
  magnification="2.5"></fsi-quickzoom>

<img
  src="http://localhost/fsi/server?type=image&source=sample-images/Shoe/Spin050.jpg&width=480"
  width="480"
  alt="" />
<script
  defer
  src="http://localhost/fsi/viewer/applications/quickzoom/js/fsiquickzoom.js"></script>

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
  <meta http-equiv="content-type" content="text/html" charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta charset="UTF-8" />
  <title>Your FSI Code</title>
  <style type="text/css">
    html,body{
    font - family:Arial,sans-serif;
    width:100%;height:100%;
    margin:0;
    padding:0;
  }
  </style>
  <script src="http://localhost/fsi/viewer/applications/quickzoom/js/fsiquickzoom.js"></script>
</head>
<body>
<fsi-quickzoom style="display:none" inPlaceZoom="true" magnification="2.5">
</fsi-quickzoom>
<img
  src="http://localhost/fsi/server?type=image&source=sample-images/Shoe/Spin050.jpg&width=480"
  width="480"
  alt="" />
</body>
</html>

This adds a Hover Zoom to the image we already have embedded.

With the parameter inPlaceZoom you can decide if the image is zoomed in-place or in a window displayed next to the embedded image.

Read more about FSI QuickZoom here.