Responsive imaging – documentation

This documentation explains how to add responsive images to your websites/apps.

For assistance, please contact support from your control panel.

Responsive images

Sirv can automatically generate images on-the-fly to fit the viewers device be it iPhone, iPad, Android phones, tablets or desktop/laptops.

The same original image will be resized to the perfect size and served to the user. Incredibly easy to setup, designers and developers love this time-saving feature of Sirv.

Try it yourself – start with a small browser window, then progressively make it bigger – new images will be generated on-the-fly and served to your browser.

Example:

Sirv responsive imaging supports HiDPI (retina) images, serving beautifully sharp images on retina devices such as the newer iPads. Retina images have incredible clarity but are about 4 times larger in file size so you can turn off retina and Sirv will fall back to serving standard 72dpi images.

To reduce page download time and capture viewers attention as they scroll, responsive images can use lazy loading. When turned on, images download only when the image moves into view in the users browser. Lazy loading is off by default.

Parameter Default Options Description
retina true true / false Whether to load retina images on HiDPI screens
resize true true / false load optimised image on window resize)
resizeStep 50 numeric Width change threshold when resizing window (pixels, minimum 10px)
lazy false true / false Enable/disable lazy loading

To apply responsive imaging to an image on your page, simply follow these two steps:

1. Add class=”Sirv” to your image, for example:

<img class="Sirv" data-src="https://sirv-cdn.sirv.com/website/demos/tesla-model-x-1.jpg">

2. If you’ve not already done so, reference the sirv.js file (it’s the same file as when you embed a zoom or a spin):

<script src="https://scripts.sirv.com/sirv.js"></script>

That’s all.

You can configure the image with any options you would like via the ‘data-options’ tag. The example below turns on lazy-loading and changes the resizing step to 100px:

<img class="Sirv" data-src="https://sirv-cdn.sirv.com/website/demos/tesla-model-x-1.jpg" data-options="lazy: true; resizeStep: 100;">

Was this article helpful?

1 2 3 4 5