Responsive Images

 

Situation

  1. Managing a website with small to large amount of images
  2. Need to ensure that images are always displayed in the highest quality available – irrespective of the device

Solution

Using responsive images basically means that different images are served depending on e.g. the device resolution and/or display density.
For example, a different image size is loaded if the website is opened with a smartphone compared to visiting the website with a desktop computer. This avoids multiple resource loads and performance problems in constrained bandwidth environments. When a user visits a website, all images on the current page are loaded in the most appropriate size for the device used.

  • Manage all images on FSI Server

    FSI Server lets you handle your images conveniently. You only need to upload your images, choose the FSI TouchZoom or HTML Image publishing option and paste the generated code into your website document. FSI Server offers a web interface which is easy to use and gives you full control of your images.
    Using FSI Server with the Dynamic Single Source Imaging technology (SSI), only one high resolution source image needs to be provided. FSI Server dynamically generates images in different formats, dimensions and qualities.

  • Use srcsets with FSI Server

    The srcset attribute, which is an additional attribute for the <img> HTML tag, allows you to specify different images for varying viewports.
    When combining images delivered with FSI Server with srcsets, only the attribute needs to be changed, since the server delivers the different sizes dynamically. This makes the time-consuming manual creation of the different image sizes obsolete. The FSI Server web interface offers a very convenient option to receive tags including the matching srcsets.

    Read more about srcsets here.

  • Add responsive image zoom

    Using FSI TouchZoom, images are loaded dynamically and will be displayed in the resolution matching the current magnification and display density on mobile and touch-enabled devices.
    If a user uses pinch-zoom on a certain image on a website, only the images currently visible are updated to a crisp and clear version according to the devices resolution and magnification. This enhances the user experience on mobile devices drastically while ensuring fast page load at the same time.

    See a demonstration of FSI TouchZoom here.