The proliferation of mobile devices has made responsive web design one of the hottest topics in web design. Modern web sites need to be usable on a large range of screen resolutions and sizes, from low resolution mobile devices to high resolution monitors. For page layout, various techniques based on fluid layouts, media-queries or combinations of these with HTML5 have been developed, which adapt layout to suit the available screen size.
Responsive Images
However, images themselves also need to adapt to the context, not just for maintaining layout, but also to reduce unnecessary bandwidth. The solve this, the concept of responsive images (or adaptive images) enables the browser to request an image at a size appropriate for the screen resolution. A number of possible solutions have been put forward via the W3C’s Responsive Images Community Group and elsewhere.
These solutions include modifying the <img> tag by adding something like @srcset, which would look like:
<img src="face-600-200@1.jpg" alt=""
srcset="face-600-200@1.jpg 600w 200h 1x,
face-600-200@2.jpg 600w 200h 2x,
face-icon.png 200w 200h">
Or creating a new adaptive image element such as <picture>:
<picture alt="Alt tag should describe the image represented by all sources"> <source src="mobile.jpg" /> <!-- Matches by default. --> <source src="high-res.jpg" media="min-width: 800px" /> <!-- For over 800px --> <img src="mobile.jpg" /> <!-- Fallback content. --> </picture>
Or using javascript libraries such as Foresight, HiSRC or “Responsive Images” which select the appropriate image for use from a list of pre-generated images.
This could also be done in CSS rather than within the element itself. A proposal for CSS4 is the image-set proposal, which has been implemented for background images in Safari 6 and Chrome 21, with the following syntax:
#selector {
background-image: url(no-image-set.png);
background-image: -webkit-image-set( url(image.jpg) 1x,
url(image-hires.jpg) 2x );
/* other prefixes for -moz, -o and -ms ... */
}
However, such solutions require the static generation in advance of various sized images suitable for different platforms. A more flexible way to do this would be to dynamically render the image via an imaging server at the exact resolution appropriate for the screen. And this is where the IIPImage image server capabilities come in.
Although various other imaging servers and online services exist, such as the PHP-based Adaptive-Images, none of them, of course, can match the performance, features, speed and efficiency of IIPImage 😉
Resizing
The IIPImage server is mostly used to stream tiles for viewing and zooming, but it is also a powerful imaging server capable of performing efficient on-demand export of images. The IIP protocol allows you to specify an image export size when using the CVT parameter, which tells the server to render an image in the requested format (only jpeg is supported at present). A typical request consists of 3 parameters specifying the image path (FIF), the requested width (WID) and the final CVT parameter (which must always be the last parameter in the URL). For example:
http://yoursite.com/fcgi-bin/iipsrv.fcgi?FIF=/your/image.tif&WID=525&CVT=jpeg
which will instantly resize your source image (which can even be of gigapixel size) and stream a rendered 525 pixel wide jpeg to the browser. In place of the width parameter (WID), you can also use the height (HEI). (If you set both WID and HEI, an image will be generated at a size that fits inside the width and height while maintaining aspect ratio.)
Thus, to have a fully responsive image, you could use javascript to calculate the appropriate size for the image and set the image WID or HEI parameter to get an image at the exact size you want. Or if using one of the solutions above, simply give this IIPImage URL with various WID values as the image sources.
To see this in action using the Cassini during Saturn Orbit Insertion image from our home page, try this demo which uses javascript to adjust the image to the size of the browser window. Resizing the browser will update the image accordingly.
Quality Levels
IIPImage also allows you to set the jpeg level of compression (or quality level) via the QLT parameter, which will vary the file size of the image downloaded. As can be seen in the graph, the file size of an image rendered by the IIPImage server (in this example, the 14400 x 9600 pixel Cassini image on our homepage dynamically exported at a width of 500px) can greatly vary depending on jpeg quality level.
Thus, you could for example, on a bandwidth-limited mobile device, provide an image with extra compression to reduce bandwidth. The QLT parameter must be a value between 1-100, where 1 is the lowest quality level (highest compression) and 100 the highest quality (lowest compression). For example:
/fcgi-bin/iipsrv.fcgi?FIF=/your/image.tif&WID=600&QLT=30&CVT=jpeg
will render an image 600px wide, but with a reduced quality level and, therefore, file size.
Cropping
In some cases, a better responsive solution may be to both resize and crop the image for different screen sizes. IIPImage is able to not only specify an export size for an image, but to also extract an arbitrary region from the image. This can be done via the RGN parameter, whereby you specify the left, top, width, height of the region. All values must be resolution independent values from 0-1. For example, for image.tif having a size of 10,000×15,000 pixels, the following parameters:
/fcgi-bin/iipsrv.fcgi?FIF=/your/image.tif&WID=1000&RGN=0.25,0,0.1,0.15&CVT=jpeg
will render your image with a width of 1000px (and therefore to maintain aspect ratio, a height of 1500px) and crop a region starting at position x: 0.25 * 1000 (=250px), y: 0 with width: 0.1 * 1000 (=100px) and height: 0.15 * 1500 (=225px).
Image Processing
IIPImage is also able to go beyond simple resizing and possesses several image processing features.
Contrast Adjustment
It’s also possible to dynamically modify the contrast of an image via the CNT parameter, which takes the value by which you wish to multiply your pixel values:
/fcgi-bin/iipsrv.fcgi?FIF=/your/image.tif&WID=100&CNT=1.1&CVT=jpeg
This will render an image 100px wide and multiply every pixel value by 1.1 and, thus, boost the contrast of the source image by 10%.
Rotation and Gamma Adjustment
Rotation and Gamma Adjustment will also be possible in version 1.0 of the server via the forthcoming ROT and GAM parameters. Stay tuned!
