Comparison of responsive images with FSI TouchZoom
Responsive images
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.
The srcset attribute
The srcset attribute contains a comma-separated list of multiple image URLs. The browser decides which image size is best for the user at the time of the page visit. 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.
Example of an tag with an src set
Based on the w (width) descriptor, the browser decides which image to use.
The different image sizes need to be manually created.
The sizes attribute defines the actual size of the image in the current layout. Based on these two values the browser decides which image to display.
Using scrset with FSI Server
Srcsets can be easily used with FSI Server, since the different sizes are generated dynamically on the fly. The width is simply altered in the image url and therefore the different sizes do not need to be created manually.
When combining images delivered with FSI Server with srcsets, only the request url attribute width needs to be changed, since the server delivers the different sizes dynamically. This makes the time-consuming manual creation of the different variations obsolete.
The web interface of FSI Server offers a very convenient option to get tags including the matching srcset in the image publishing dialogue.
The advantages of FSI TouchZoom in comparison to srcset
Using FSI TouchZoom images are loaded dynamically and will be displayed in the resolution matching the current magnification and display density.
When a user visits a website, all images on the current page are loaded in the standard size. Only the images in the visible part of the page are dynamically loaded by FSI TouchZoom. If a user uses pinch-zooms on a certain image on the page, 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.
While the srcset attribute requires setting up various sets of image sizes for every image on the page, FSI TouchZoom chooses the matching resolution on the fly.
You only need to add the FSI TouchZoom script into the website and all images provided by FSI Server will automatically be displayed in the matching resolution on any zoom level.
Furthermore, FSI TouchZoom also works with browsers which do not support the srcset attribute. Nevertheless, it is also possible to combine the srcset attribute with FSI TouchZoom.
You can try out FSI TouchZoom here.
How FSI TouchZoom works: