Responsive imaging

This documentation explains how to add responsive images to your websites/apps. For assistance, please contact support from your Sirv account. If you don’t have a Sirv account yet, create your free account now.

Perfectly sized images

Sirv automatically delivers images to fit your users device. Whether iPhone, iPad, Android phones, tablets or desktop/laptops, Sirv will detect the available dimensions and create an image to fit.

Sirv does this by resizing the image in your Sirv account, caching the new one and rapidly delivering it to the user. Simple to setup, this is a great time-saving tool for web designers and developers.

Example

Drag the slider to make the image progressively larger. New images will be requested by your browser and delivered by Sirv:

350px

233px

Responsive image demo

Setup

To use responsive imaging, follow these two steps:

1. Add class=”Sirv” to your image and use data-src instead of src, for example:

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

2. Reference the sirv.js file, if it’s not already in your page (it’s the same file used for embedding zooms/spins):

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

Lazy loading

To reduce page download time and capture users’ attention as they scroll, you can apply lazy loading. When turned on, images will only download when the image comes into view in the users browser.

Lazy loading is off by default. Turn it on by setting lazy to true:

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

You can also use lazy loading without responsive imaging (if you want a fixed width or height). Set resize to false:

<img class="Sirv" data-src="https://sirv.sirv.com/website/demos/tesla-model-x-1.jpg" data-options="lazy: true; resize: false;" width="300">

Retina images

Sirv responsive imaging supports HiDPI (retina) images, to serve beautifully sharp images to retina devices. Retina images have incredible clarity but are roughly 4 times larger in file size. For faster image downloading, you can turn off retina and Sirv will deliver 72dpi images instead.

To turn off retina images, set retina to false:

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

Resize step

For better user experience, when a user resizes their browser, new images are only served if the difference in image size is at least 50px. This helps keep your page feeling fast.

The resize step can be increased to a higher value or reduced as low as 10px. To change the value, use the resizeStep option:

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

Options

Table of options that can be applied via the ‘data-options’ tag:

ParameterDefaultOptionsDescription
retinatruetrue / falseLoad retina images on HiDPI screens
resizetruetrue / falseEnable responsiveness when page is resized
resizeStep50numericWidth change threshold when resizing window (pixels, minimum 10px)
lazyfalsetrue / falseEnable lazy loading of images when they come into view

Options can alternatively be applied to all images on the page by using the script tag:

<script>
var SirvOptions = {
image: {
retina: false
}
};
</script>

or like this:

<script>
var SirvOptions = {};
SirvOptions.image = {
retina: false
};
</script>

Was this article helpful?