Skip to main content

One image - unlimited views

FSI Server and FSI Viewer Documentation


Introduction

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.

JUMP TO QUICKSTART

Keep reading to know more about how FSI works, or click here to jump to our quickstart guides that get you started.


How FSI works

How FSI worksHow 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

GitHub Repository

You can find more and complete examples for Auto-generated Responsive Images in our GitHub repository.

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:

HTML Code
<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:

HTML Code
<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.

GitHub Repository

You can find more and complete examples for QuickZoom in our GitHub repository.

<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>

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.