Responsive imaging – documentation
This documentation explains how to add responsive images to your websites/apps.
For assistance, please contact support from your control panel.
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.
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.
|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):
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;">